File: /var/www/quadcode-site/src/style/components/slider-awards.scss
.slider-awards {
padding: 100px 0;
@include breakpoint-down('deskL') {
padding-bottom: 120px;
}
@include breakpoint-down('tabM') {
padding-bottom: 80px;
}
&__wrapper {
position: relative;
}
.navigation {
margin-bottom: 30px;
justify-content: flex-end;
}
.pagination {
display: none;
@include breakpoint-down('tabM') {
display: flex;
align-items: center;
width: max-content;
margin: 56px auto 0;
}
.swiper-pagination-bullet {
width: 6px;
height: 6px;
background: $grey30;
transition: all .4s ease;
&-active {
transition: all .4s ease;
width: 10px;
height: 10px;
background: $red;
}
}
}
}
.swiper-awards {
&__slide {
padding: 76px 21px 21px 21px;
background: #F8F9FA;
border-radius: 16px;
min-height: 434px;
display: flex;
flex-direction: column;
@include breakpoint-down('deskL') {
min-height: 397px;
}
@include breakpoint-down('deskS') {
min-height: 490px;
}
@include breakpoint-down('tabM') {
min-height: 444px;
}
}
&__slideHeader {
display: flex;
align-items: flex-start;
justify-content: space-between;
color: #889AA8;
position: absolute;
top: 21px;
left: 21px;
right: 21px;
}
&__slideImage {
padding: 0 20px;
> img {
width: 100%;
height: auto;
display: block;
}
}
.stars {
margin: 0 auto 24px;
width: max-content;
}
&__title {
text-align: center;
margin-bottom: 6px;
flex: 1;
width: calc(100% + 12px);
margin-left: -6px;
}
&__company {
text-align: center;
color: #889AA8;
}
}