122 lines
1.9 KiB
CSS
122 lines
1.9 KiB
CSS
|
|
||
|
|
|
||
|
|
.swiper {
|
||
|
|
width: 100%;
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.swiper-wrapper {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
.swiper-slide {
|
||
|
|
flex: 0 0 auto;
|
||
|
|
width: 100%;
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.swiper-button-prev {
|
||
|
|
width: 40px;
|
||
|
|
height: 40px;
|
||
|
|
background-image: url("/promo/images/right-arrow.svg");
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center;
|
||
|
|
cursor: pointer;
|
||
|
|
color: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.swiper-button-next {
|
||
|
|
width: 40px;
|
||
|
|
height: 40px;
|
||
|
|
background-image: url("/promo/images/right-arrow.svg");
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center;
|
||
|
|
cursor: pointer;
|
||
|
|
color: transparent;
|
||
|
|
transform: rotate(180deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.swiper-button-next:hover,
|
||
|
|
.swiper-button-next:focus,
|
||
|
|
.swiper-button-prev:hover,
|
||
|
|
.swiper-button-prev:focus {
|
||
|
|
opacity: 0.8;
|
||
|
|
transition: opacity 0.25s ease-in;
|
||
|
|
}
|
||
|
|
|
||
|
|
.swiper-button-group {
|
||
|
|
position: absolute;
|
||
|
|
display: flex;
|
||
|
|
gap: 10px;
|
||
|
|
width: 100%;
|
||
|
|
max-width: 124px;
|
||
|
|
left: 318px;
|
||
|
|
bottom: -34px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* @media (max-width: 1770px) {
|
||
|
|
.swiper-button-group {
|
||
|
|
left: 360px;
|
||
|
|
}
|
||
|
|
} */
|
||
|
|
|
||
|
|
@media (max-width: 1440px) {
|
||
|
|
.swiper-button-group {
|
||
|
|
left: 292px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 1300px) {
|
||
|
|
.swiper-button-group {
|
||
|
|
left: 260px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 1200px) {
|
||
|
|
.swiper {
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.swiper-button-group {
|
||
|
|
left: 336px;
|
||
|
|
bottom: -50px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 860px) {
|
||
|
|
.swiper-button-group {
|
||
|
|
left: 296px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.swiper-button-group {
|
||
|
|
left: 230px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
@media (max-width: 650px) {
|
||
|
|
.swiper-button-group {
|
||
|
|
left: 208px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 600px) {
|
||
|
|
.swiper-button-group {
|
||
|
|
left: 136px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 450px) {
|
||
|
|
.swiper-button-group {
|
||
|
|
left: 84px;
|
||
|
|
bottom: -40px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 340px) {
|
||
|
|
.swiper-button-group {
|
||
|
|
left: 70px;
|
||
|
|
}
|
||
|
|
}
|