File: /var/www/quadcode-jobs/resources/sass/components/_saas.scss
.saas {
display: flex;
align-items: center;
position: relative;
@include breakpoint-down('lg') {
justify-content: flex-end;
align-items: start;
}
@include breakpoint-down('sm') {
flex-direction: column;
}
&-img {
width: 380px;
height: 366px;
background-image: url("../../../public/files/saas.png");
background-size: contain;
background-repeat: no-repeat;
background-position: 12px 4px;
margin-right: 45px;
flex-shrink: 0;
@include breakpoint-down('lg') {
width: 436px;
height: 438px;
position: static;
margin-left: -125px;
margin-right: 39px;
}
@include breakpoint-down('sm') {
width: 260px;
height: 240px;
position: relative;
margin: 0 auto;
margin-bottom: 30px;
}
}
&-content {
padding-top: 27px;
@include breakpoint-down('lg') {
width: 50%;
padding-top: 7px;
}
@include breakpoint-down('sm') {
width: 320px;
margin: 0 auto;
}
.subtitle {
margin-top: 5px;
@include breakpoint-down('lg') {
margin-top: 13px;
}
}
}
&-blocks {
display: flex;
flex-wrap: wrap;
margin-top: 20px;
}
&-numbers {
width: calc((100%) / 3);
margin-bottom: 20px;
@include breakpoint-down('lg') {
width: calc((100%) / 2);
}
@include breakpoint-down('sm') {
margin-bottom: 30px;
}
.number {
font-size: 36px;
font-weight: 600;
line-height: 41px;
color: #FB0028;
}
.text {
font-size: 16px;
line-height: 21px;
}
}
}