139 lines
4.8 KiB
SCSS
139 lines
4.8 KiB
SCSS
@use "../01-base/breakpoints" as *;
|
|
@use "../01-base/colors" as *;
|
|
@use "../02-abstracts/mixins" as *;
|
|
|
|
|
|
.section-boxes-repeater{
|
|
position: relative;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
.bg-filter{
|
|
@include bg-filter;
|
|
}
|
|
.wrapper{
|
|
position: relative;
|
|
padding-top: 46px;
|
|
padding-bottom: 46px;
|
|
z-index: 99;
|
|
@include responsive(desktop){
|
|
padding: 146px 0;
|
|
}
|
|
.section-heading{
|
|
max-width: 520px;
|
|
@include responsive(desktop){
|
|
margin-left: 32px;
|
|
}
|
|
}
|
|
.section-description{
|
|
@include responsive(desktop){
|
|
max-width: 60%;
|
|
margin-left: 32px;
|
|
}
|
|
}
|
|
.boxes{
|
|
display: grid;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
@include responsive(desktop){
|
|
padding: 14px 50px 0;
|
|
grid-template-columns: repeat(auto-fit,minmax(244px,1fr));
|
|
}
|
|
.box-single{
|
|
background-color: $gray-color;
|
|
clip-path: polygon(0% 5%, 5% 0%, 100% 0%, 100% 5%, 100% 100%, 0% 100%, 0% 5%);
|
|
padding: 30px 22px 15px;
|
|
@include responsive(tablet){
|
|
clip-path: polygon(0% 12%, 2% 0%, 100% 0%, 100% 2%, 100% 100%, 0% 100%, 0% 12%);
|
|
}
|
|
@include responsive(desktop){
|
|
padding: 40px 22px 30px;
|
|
clip-path: polygon(0% 5%, 5% 0%, 100% 0%, 100% 5%, 100% 100%, 0% 100%, 0% 5%);
|
|
}
|
|
.box-image{
|
|
max-width: 40px;
|
|
max-height: 40px;
|
|
aspect-ratio: 1/1;
|
|
margin-bottom: 22px;
|
|
}
|
|
.box-content{
|
|
display: grid;
|
|
grid-template-rows: auto 1fr auto;
|
|
height: 100%;
|
|
.cta{
|
|
align-self: end;
|
|
text-align: end;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.bg-dark{
|
|
.wrapper{
|
|
.boxes.numbered-cards{
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
gap: 20px;
|
|
counter-reset: box-counter;
|
|
@include responsive(desktop){
|
|
flex-direction: row;
|
|
padding: 14px 0 0;
|
|
}
|
|
.box-single{
|
|
clip-path: inherit;
|
|
padding: inherit;
|
|
background-color: inherit;
|
|
@include responsive(tablet){
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
@include responsive(desktop){
|
|
min-height: 420px;
|
|
height: fit-content;
|
|
padding: inherit;
|
|
flex: 0 0 33%;
|
|
}
|
|
.box-content{
|
|
display: grid;
|
|
grid-template-rows: auto;
|
|
height: auto;
|
|
min-height: 300px;
|
|
background-color: $gray-color;
|
|
clip-path: polygon(0% 5%, 5% 0%, 100% 0%, 100% 5%, 100% 100%, 0% 100%, 0% 5%);
|
|
padding: 43px 40px;
|
|
@include responsive(tablet){
|
|
min-height: inherit;
|
|
flex: 1 0 205px;
|
|
clip-path: polygon(0% 10%, 3% 0%, 100% 0%, 100% 5%, 100% 100%, 0% 100%, 0% 5%);
|
|
}
|
|
@include responsive(desktop){
|
|
flex: 1 0 395px;
|
|
clip-path: polygon(0% 5%, 5% 0%, 100% 0%, 100% 5%, 100% 100%, 0% 100%, 0% 5%);
|
|
}
|
|
&__text{
|
|
color: $dark-color;
|
|
@include responsive(tablet){
|
|
margin-bottom: 10px;
|
|
}
|
|
@include responsive(desktop){
|
|
margin-bootom: inherit;
|
|
}
|
|
}
|
|
}
|
|
.box-counter{
|
|
color: $accent-color;
|
|
font-size: 7.2rem;
|
|
font-weight: 700;
|
|
line-height: 110%;
|
|
margin-left: 16px;
|
|
&:before{
|
|
content: "0" counter(box-counter);
|
|
counter-increment: box-counter;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|