parent
1b89e64acb
commit
aa44dd8117
After Width: | Height: | Size: 3.2 KiB |
After Width: | Height: | Size: 2.9 KiB |
After Width: | Height: | Size: 1.9 KiB |
After Width: | Height: | Size: 2.7 KiB |
@ -0,0 +1,142 @@ |
|||||||
|
.advantages { |
||||||
|
margin: 51px 0 116px; |
||||||
|
|
||||||
|
& .container { |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
gap: 39px 34px; |
||||||
|
|
||||||
|
@include desktop { |
||||||
|
gap: 24px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__item { |
||||||
|
padding: 36px 36px 28px; |
||||||
|
box-sizing: border-box; |
||||||
|
border-radius: 22px 40px; |
||||||
|
background-color: $white; |
||||||
|
|
||||||
|
@include tablet { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
padding: 30px 24px; |
||||||
|
} |
||||||
|
|
||||||
|
@include mobile { |
||||||
|
padding: 30px 19px; |
||||||
|
} |
||||||
|
|
||||||
|
&--counter { |
||||||
|
flex: 1 1 440px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
gap: 20px; |
||||||
|
padding: 0; |
||||||
|
background-color: rgba($color: $white, $alpha: 0); |
||||||
|
|
||||||
|
@include desktop { |
||||||
|
flex: 1 1 100%; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
@include mobile { |
||||||
|
gap: 8px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&--conditions { |
||||||
|
flex: 0 1 666px; |
||||||
|
} |
||||||
|
|
||||||
|
&--detox { |
||||||
|
flex: 0 1 454px; |
||||||
|
} |
||||||
|
|
||||||
|
&--center, |
||||||
|
&--support { |
||||||
|
flex: 1 1 20%; |
||||||
|
} |
||||||
|
|
||||||
|
&--conditions, |
||||||
|
&--detox, |
||||||
|
&--center, |
||||||
|
&--support { |
||||||
|
@include desktop { |
||||||
|
flex: 1 1 calc(50% - 24px / 2); |
||||||
|
} |
||||||
|
|
||||||
|
@include tablet { |
||||||
|
flex: 1 1 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&-figure { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
height: 66px; |
||||||
|
width: 66px; |
||||||
|
margin: 0 0 20px; |
||||||
|
border-radius: 80px; |
||||||
|
background-color: $blue; |
||||||
|
|
||||||
|
@include tablet { |
||||||
|
height: 55px; |
||||||
|
width: 55px; |
||||||
|
} |
||||||
|
|
||||||
|
&-image { |
||||||
|
display: block; |
||||||
|
max-width: 100%; |
||||||
|
height: auto; |
||||||
|
|
||||||
|
@include tablet { |
||||||
|
width: 28px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&-text { |
||||||
|
font-weight: 500; |
||||||
|
font-size: 19px; |
||||||
|
line-height: 146%; |
||||||
|
color: $grey; |
||||||
|
|
||||||
|
@include tablet { |
||||||
|
font-size: 18px; |
||||||
|
line-height: 141%; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
&--counter { |
||||||
|
font-weight: 500; |
||||||
|
font-size: 17px; |
||||||
|
line-height: 122%; |
||||||
|
color: $grey; |
||||||
|
|
||||||
|
@include mobile { |
||||||
|
font-size: 15px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
& b { |
||||||
|
font-weight: 700; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&-counter { |
||||||
|
font-weight: 700; |
||||||
|
font-size: 174px; |
||||||
|
line-height: 94%; |
||||||
|
letter-spacing: 0.06em; |
||||||
|
text-transform: uppercase; |
||||||
|
color: $blue; |
||||||
|
|
||||||
|
@include mobile { |
||||||
|
font-size: 120px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
Loading…
Reference in new issue