File: /var/www/quadcode-site/src/style/components/block.scss
.block {
padding-top: 96px;
padding-bottom: 64px;
@include breakpoint-down('deskS') {
padding-top: 64px;
}
&__title {
text-align: center;
max-width: 780px;
margin: 0 auto;
opacity: 0;
transform: translateY(-30px);
@include breakpoint-down('deskL') {
max-width: 620px;
}
@include breakpoint-down('deskS') {
max-width: 510px;
}
}
&__desc {
text-align: center;
max-width: 780px;
margin: 0 auto;
opacity: 0;
transform: translateY(-30px);
@include breakpoint-down('deskL') {
max-width: 620px;
}
@include breakpoint-down('deskS') {
max-width: 510px;
}
}
.grid-sass {
margin-top: 42px;
@include breakpoint-down('deskS') {
margin-top: 36px;
}
@include breakpoint-down('tabM') {
margin-top: 26px;
}
}
&__img {
opacity: 0;
transform: translateY(-30px);
}
&_content-img-1 {
padding-top: 64px;
padding-bottom: 96px;
@include breakpoint-down('deskS') {
padding-top: 58px;
}
@include breakpoint-down('tabM') {
padding-bottom: 58px;
}
.block {
&__desc {
margin-bottom: 56px;
margin-top: 16px;
@include breakpoint-down('deskS') {
margin-bottom: 32px;
}
}
&__img {
width: 100%;
max-width: 780px;
display: block;
margin: 0 auto;
box-shadow: 0 60px 40px -40px rgba(0, 0, 0, 0.2);
border-radius: 6px;
}
}
}
&_content-img-2 {
padding-bottom: 0;
.block {
&__desc {
margin-bottom: 34px;
margin-top: 16px;
@include breakpoint-down('deskS') {
margin-bottom: 24px;
}
}
&__img {
width: 100%;
max-width: 780px;
display: block;
margin: 0 auto;
@include breakpoint-down('deskL') {
max-width: 620px;
}
@include breakpoint-down('deskS') {
max-width: 510px;
}
}
&__item {
&_icon {
margin-bottom: 46px;
}
}
&__content-icon {
display: flex;
align-items: center;
margin: 0 auto;
width: max-content;
&-item {
margin-right: 34px;
opacity: 0;
transform: translateY(-30px);
img {
@include breakpoint-down('deskS') {
width: 60px;
height: 60px;
}
@include breakpoint-down('mobM') {
width: 50px;
height: 50px;
}
}
&:last-of-type {
margin-right: 0;
}
}
}
}
}
&_content-img-3 {
padding-bottom: 0;
.block {
&__desc {
margin-bottom: 64px;
margin-top: 16px;
@include breakpoint-down('deskS') {
margin-bottom: 40px;
}
}
&__img {
width: 100%;
max-width: 1180px;
display: block;
margin: 0 auto;
@include breakpoint-down('deskL') {
max-width: 940px;
}
}
}
}
&_grid-sass-2 {
padding-bottom: 96px;
padding-top: 64px;
.block {
&__desc {
max-width: 580px;
margin-top: 16px;
@include breakpoint-down('deskS') {
max-width: 510px;
}
}
}
.grid-sass {
margin-top: 34px;
@include breakpoint-down('deskS') {
margin-top: 94px;
}
@include breakpoint-down('tabM') {
margin-top: 33px;
}
&_row {
@include breakpoint-down('deskS') {
margin-top: 34px;
}
}
}
.block-icon__title {
}
.block-icon__text {
@include breakpoint-down('deskS') {
max-width: 210px;
}
@include breakpoint-down('tabM') {
max-width: 100%;
}
br {
@include breakpoint-down('deskS') {
display: none;
}
}
}
}
&--about {
padding: 182px 0;
@include breakpoint-down('deskS') {
padding: 64px 0;
}
@include breakpoint-down('tabM') {
padding-bottom: 48px;
}
.grid-sass {
margin-top: 0;
&__item {
padding: 0 25px;
@include breakpoint-down('deskS') {
padding: 0 10px;
}
@include breakpoint-down('tabM') {
margin-bottom: 15px;
}
}
}
.block-icon {
&__icon {
width: auto;
height: auto;
@include breakpoint-down('deskS') {
height: 70px;
width: 70px;
}
}
&__item {
&_icon {
margin-bottom: 0;
}
}
}
}
}