.swiper,
.swiper-wrapper,
.swiper-slide {
height: 100% !important;
}
.swiper-slide {
width: 100% !important;
}
.swiper-slide img, .swiper-slide figure img, figure img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.swiper-slide img, .swiper-slide figure img{
transform: scale(1);
opacity: 0;
}
.slot-item.is-active .swiper-slide img:hover, .slot-item.is-active .swiper-slide figure img:hover{
transform: scale(1);
}
.swiper-slide img:hover, .swiper-slide figure img:hover{
transform: scale(1.05);
}
.slot-item.is-active .swiper .swiper-button-next:not(.swiper-button-disabled), .swiper-button-prev:not(.swiper-button-disabled){
opacity: 1;
pointer-events: all !important;
}
.slot-item:not(.is-active) .swiper .swiper-button-next,.slot-item:not(.is-active) .swiper .swiper-button-prev {
opacity: 0;
pointer-events: none;
}
.slot-ext-arrow {
position: absolute; top: var(--arrow-mid-y, 50%);
transform: translateY(-50%);
z-index: 100;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid var(--white);
background: rgba(217, 217, 217, 0.06);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
cursor: crosshair !important;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, background 0.2s ease;
stroke: var(--white);
}
.slot-ext-arrow--prev {
left: calc(50% - (var(--expand-width, 400px) / 2) - 24px - 44px);
transform: rotate(180deg) translateY(50%);
}
.slot-ext-arrow--next {
left: calc(50% + (var(--expand-width, 400px) / 2) + 24px);
}
.slot-ext-arrow.is-visible, .slot-swiper-counter.is-visible {
opacity: var(--opacity-fade-thick);
pointer-events: all;
}
.slot-ext-arrow.is-disabled {
opacity: 0;
pointer-events: none;
}
.slot-ext-arrow:hover {
background: var(--lightgrey);
stroke: var(--black);
color: var(--white);
opacity: 1;
}
.slot-swiper-counter {
position: fixed;
bottom: calc(var(--m-space-gap) + var(--s-space-gap));
left: calc(var(--m-space-gap) + var(--s-space-gap));
color: var(--white);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}
@media only screen and (max-width: 580px) {
.slot-ext-arrow, .swiper-button-next, .swiper-button-prev{ display: none !important; }
.slot-swiper-counter{
bottom: 0px !important;
left: 0px !important;
padding: var(--m-space-gap);
}
}