File: /var/www/quadcode-jobs/resources/sass/components/_benefits.scss
.benefits-section {
padding: 75px 0 65px;
@include breakpoint-down('lg') {
padding-top: 45px;
padding-bottom: 50px;
}
@include breakpoint-down('sm') {
padding-top: 25px;
}
.benefits-disclamer {
margin-top: 30px;
text-align: center;
font-size: 80%;
color: #666;
}
.container {
h2 {
line-height: 80px;
@include breakpoint-down('lg') {
line-height: 66px;
}
@include breakpoint-down('sm') {
text-align: left;
}
}
.subtitle {
width: 650px;
font-size: 21px;
line-height: 27px;
text-align: center;
margin: 10px auto 0;
@include breakpoint-down('lg') {
font-size: 18px;
line-height: 24px;
}
@include breakpoint-down('sm') {
width: 100%;
font-size: 16px;
line-height: 21px;
text-align: left;
margin: 0;
}
}
.benefits-blocks {
display: flex;
justify-content: center;
flex-wrap: wrap;
@include breakpoint-down('sm') {
width: calc(100%);
justify-content: center;
}
.block {
width: 226px;
margin-top: 48px;
@include breakpoint-down('lg') {
width: 200px;
margin-top: 40px;
}
@include breakpoint-down('sm') {
width: calc((100% - 20px) / 2);
margin-top: 30px;
margin-right: 20px;
&:nth-child(2n + 2) {
margin-right: 0;
}
}
&-icon {
width: 70px;
height: 70px;
margin: 0 auto 23px;
@include breakpoint-down('lg') {
width: 58px;
height: 58px;
margin-bottom: 16px;
}
@include breakpoint-down('sm') {
width: 48px;
height: 48px;
margin: 14px auto;
margin-top: 0px;
}
}
&-text {
font-size: 18px;
line-height: 24px;
text-align: center;
@include breakpoint-down('lg') {
font-size: 16px;
line-height: 22px;
}
@include breakpoint-down('sm') {
font-size: 14px;
}
}
}
}
}
}