Aliaksei Karzhou
1 year ago
|
After Width: | Height: | Size: 480 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
@ -0,0 +1,224 @@ |
||||
.conditions { |
||||
margin: 114px 0; |
||||
|
||||
@include tablet { |
||||
margin: 89px 0; |
||||
} |
||||
|
||||
&__title { |
||||
margin: 21px auto 10px; |
||||
} |
||||
|
||||
&__location { |
||||
display: flex; |
||||
align-items: stretch; |
||||
gap: 48px; |
||||
margin: 0 0 48px; |
||||
|
||||
@include desktop { |
||||
gap: 24px; |
||||
} |
||||
|
||||
@include laptop { |
||||
flex-direction: column; |
||||
margin: 0 0 30px; |
||||
} |
||||
|
||||
&-text, |
||||
&-address { |
||||
border-radius: 40px 12px; |
||||
|
||||
@include laptop { |
||||
border-radius: 30px 10px; |
||||
} |
||||
} |
||||
|
||||
&-text { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
padding: 16px 36px; |
||||
font-weight: 500; |
||||
font-size: 23px; |
||||
line-height: 141%; |
||||
text-align: center; |
||||
color: $darkgrey; |
||||
background-color: $white; |
||||
|
||||
@include tablet { |
||||
padding: 14px 18px; |
||||
font-size: 16px; |
||||
} |
||||
} |
||||
|
||||
&-address { |
||||
flex: 0 0 auto; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 20px; |
||||
padding: 30px 32px 30px 45px; |
||||
font-weight: 700; |
||||
font-size: 35px; |
||||
line-height: 146%; |
||||
color: $white; |
||||
background-color: $blue; |
||||
|
||||
@include laptop { |
||||
justify-content: center; |
||||
} |
||||
|
||||
@include tablet { |
||||
padding: 18px 18px 18px 24px; |
||||
font-size: 21px; |
||||
} |
||||
|
||||
&::before { |
||||
content: ''; |
||||
flex: 0 0 auto; |
||||
height: 28px; |
||||
width: 22px; |
||||
background: url(../img/icons/location.svg) center no-repeat; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&__sliders { |
||||
position: relative; |
||||
z-index: 10; |
||||
margin: 48px 0; |
||||
|
||||
@include tablet { |
||||
margin: 48px -15px 108px; |
||||
} |
||||
|
||||
&-main { |
||||
& .swiper { |
||||
&-slide { |
||||
& img { |
||||
display: block; |
||||
height: 566px; |
||||
width: 100%; |
||||
object-fit: cover; |
||||
border-radius: 66px 22px; |
||||
|
||||
@include tablet { |
||||
height: 380px; |
||||
border-radius: 40px 16px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
&-thumbs { |
||||
position: absolute; |
||||
left: 50%; |
||||
bottom: 32px; |
||||
width: 440px; |
||||
z-index: 100; |
||||
transform: translateX(-50%); |
||||
|
||||
@include tablet { |
||||
bottom: -54px; |
||||
max-width: calc(100% - 30px); |
||||
} |
||||
|
||||
& .swiper { |
||||
&-slide { |
||||
& img { |
||||
display: block; |
||||
height: 84px; |
||||
width: 100%; |
||||
box-sizing: border-box; |
||||
object-fit: cover; |
||||
border: 2px solid $white; |
||||
border-radius: 5px 12px; |
||||
|
||||
@include tablet { |
||||
height: 64px; |
||||
} |
||||
} |
||||
|
||||
&-thumb-active img { |
||||
border-color: $blue; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
&-controls { |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 40px; |
||||
right: 40px; |
||||
z-index: 101; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
transform: translateY(-50%); |
||||
|
||||
@include tablet { |
||||
left: 15px; |
||||
right: 15px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&__advantages { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
gap: 44px 60px; |
||||
|
||||
@include laptop { |
||||
gap: 44px; |
||||
} |
||||
|
||||
@include mobile { |
||||
gap: 36px; |
||||
} |
||||
} |
||||
|
||||
&__advantage { |
||||
flex: calc(100% / 3 - 60px / 3 * 2); |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
gap: 20px; |
||||
|
||||
@include laptop { |
||||
flex: calc(100% / 2 - 44px / 2); |
||||
} |
||||
|
||||
@include mobile { |
||||
flex: 1 1 100%; |
||||
} |
||||
|
||||
&-figure { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
height: 64px; |
||||
width: 64px; |
||||
border-radius: 64px; |
||||
background-color: $blue; |
||||
|
||||
&-image { |
||||
display: block; |
||||
max-width: 100%; |
||||
height: auto; |
||||
} |
||||
} |
||||
|
||||
&-text { |
||||
font-weight: 500; |
||||
font-size: 21px; |
||||
line-height: 146%; |
||||
text-align: center; |
||||
color: $grey; |
||||
|
||||
@include tablet { |
||||
font-size: 19px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||