Aliaksei Karzhou
1 year ago
parent
000de26ee4
commit
2c63221d7e
|
After Width: | Height: | Size: 4.5 KiB |
@ -0,0 +1,235 @@ |
|||||||
|
.why-program { |
||||||
|
margin: 111px 0 114px; |
||||||
|
|
||||||
|
@include tablet { |
||||||
|
margin: 74px 0 89px; |
||||||
|
} |
||||||
|
|
||||||
|
& .container { |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
&__title { |
||||||
|
margin: 21px 0 27px; |
||||||
|
|
||||||
|
@include tablet { |
||||||
|
margin: 21px 0 23px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__video { |
||||||
|
position: absolute; |
||||||
|
top: 515px; |
||||||
|
left: 16px; |
||||||
|
right: 16px; |
||||||
|
padding: 0 48px 32px; |
||||||
|
overflow: hidden; |
||||||
|
border-radius: 80px 40px; |
||||||
|
background: url(../img/12-steps-bg.svg) right 12px bottom -70px no-repeat; |
||||||
|
background-color: $blue; |
||||||
|
|
||||||
|
@include desktop { |
||||||
|
position: static; |
||||||
|
margin: 0 0 30px; |
||||||
|
} |
||||||
|
|
||||||
|
@include laptop { |
||||||
|
padding: 0 24px 24px; |
||||||
|
border-radius: 30px 11px; |
||||||
|
background: $blue; |
||||||
|
} |
||||||
|
|
||||||
|
@include tablet { |
||||||
|
font-size: 17px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
&-content { |
||||||
|
height: 573px; |
||||||
|
margin: 0 -48px 30px; |
||||||
|
background-color: $grey; |
||||||
|
|
||||||
|
@include laptop { |
||||||
|
margin: 0 -24px 30px; |
||||||
|
height: auto; |
||||||
|
width: calc(100% + 48px); |
||||||
|
aspect-ratio: 16 / 9; |
||||||
|
} |
||||||
|
|
||||||
|
& > * { |
||||||
|
display: block; |
||||||
|
height: 100%; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&-text { |
||||||
|
max-width: 812px; |
||||||
|
font-weight: 500; |
||||||
|
font-size: 24px; |
||||||
|
line-height: 146%; |
||||||
|
color: $white; |
||||||
|
|
||||||
|
@include laptop { |
||||||
|
max-width: none; |
||||||
|
} |
||||||
|
|
||||||
|
@include tablet { |
||||||
|
font-size: 17px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
& > b { |
||||||
|
font-weight: 700; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__slider { |
||||||
|
& .swiper { |
||||||
|
overflow: visible; |
||||||
|
|
||||||
|
@include laptop { |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
&-wrapper { |
||||||
|
position: static; |
||||||
|
flex-wrap: wrap; |
||||||
|
|
||||||
|
@media screen and (min-width: 992.1px) { |
||||||
|
gap: 40px 30px; |
||||||
|
} |
||||||
|
|
||||||
|
@include laptop { |
||||||
|
position: relative; |
||||||
|
flex-wrap: nowrap; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&-slide { |
||||||
|
position: static; |
||||||
|
height: auto; |
||||||
|
|
||||||
|
@media screen and (min-width: 992.1px) { |
||||||
|
flex: 0 0 calc(100% / 3 - 30px / 3 * 2); |
||||||
|
} |
||||||
|
|
||||||
|
@include laptop { |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
&:nth-child(-n + 3) { |
||||||
|
margin-bottom: 812px; |
||||||
|
|
||||||
|
@include desktop { |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&:nth-child(1) { |
||||||
|
@media screen and (min-width: 1240.1px) { |
||||||
|
flex: 0 1 27%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&:nth-child(2) { |
||||||
|
@media screen and (min-width: 1240.1px) { |
||||||
|
flex: 0 1 30%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&:nth-child(3) { |
||||||
|
@media screen and (min-width: 1240.1px) { |
||||||
|
flex: 1 1 30%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&:nth-child(4) { |
||||||
|
@media screen and (min-width: 1240.1px) { |
||||||
|
flex: 0 1 31%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&:nth-child(5) { |
||||||
|
@media screen and (min-width: 1240.1px) { |
||||||
|
flex: 0 1 33%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&:nth-child(6) { |
||||||
|
@media screen and (min-width: 1240.1px) { |
||||||
|
flex: 1 1 27%; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__slide { |
||||||
|
height: 100%; |
||||||
|
padding: 31px 38px; |
||||||
|
box-sizing: border-box; |
||||||
|
border-radius: 22px 40px; |
||||||
|
background-color: $white; |
||||||
|
|
||||||
|
@include laptop { |
||||||
|
padding: 24px; |
||||||
|
} |
||||||
|
|
||||||
|
&-count { |
||||||
|
margin: 0 0 6px; |
||||||
|
font-weight: 700; |
||||||
|
font-size: 59px; |
||||||
|
line-height: 127%; |
||||||
|
letter-spacing: 0.05em; |
||||||
|
color: $white; |
||||||
|
-webkit-text-stroke: 1px $blue; |
||||||
|
|
||||||
|
@include laptop { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
@include mobile { |
||||||
|
font-size: 50px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&-title { |
||||||
|
margin: 0 0 9px; |
||||||
|
|
||||||
|
@include laptop { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&-text { |
||||||
|
margin: 0; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 17px; |
||||||
|
line-height: 146%; |
||||||
|
color: $grey; |
||||||
|
|
||||||
|
& > b { |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
|
||||||
|
@include laptop { |
||||||
|
font-size: 15px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__slider-controls { |
||||||
|
display: none; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
gap: 24px; |
||||||
|
margin: 35px 0 0; |
||||||
|
|
||||||
|
@include laptop { |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue