.projet-gallery {
position: relative;
width: 100%;
overflow: hidden;
}
.projet-gallery__swiper {
position: relative;
width: 100%;
overflow: hidden;
}
.projet-gallery__slide {
margin: 0;
width: 100%;
max-height: 80dvh;
display: flex;
align-items: center;
justify-content: center;
}
.projet-gallery__image {
display: flex;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center;
}
.projet-gallery__nav {
position: absolute;
top: 50%;
z-index: 2;
width: 48px;
height: 48px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.85);
border-radius: 50%;
background:
transparent
url(//architecte-rc.com/wp-content/themes/rc/assets/chart/button-arrow.svg) center / 20px 15px no-repeat;
cursor: pointer;
transform: translateY(-50%);
transition:
background-color 0.25s ease,
border-color 0.25s ease,
opacity 0.25s ease,
background-image 0.25s ease,
background-position 0.25s ease;
}
.projet-gallery__nav--prev {
left: clamp(0.75rem, 2vw, 1.5rem);
transform: translateY(-50%) scaleX(-1);
}
.projet-gallery__nav--next {
right: clamp(0.75rem, 2vw, 1.5rem);
}
.projet-gallery__nav:hover,
.projet-gallery__nav:focus-visible {
background-color: var(--wp--preset--color--custom-primary);
border-color: var(--wp--preset--color--custom-primary);
background-image: url(//architecte-rc.com/wp-content/themes/rc/assets/chart/button-arrow.svg);
background-position: 70% 50%;
}
.projet-gallery__nav.swiper-button-disabled {
opacity: 0.35;
cursor: default;
}
@media (max-width: 768px) {
.projet-gallery__nav {
width: 40px;
height: 40px;
background-size: 16px 12px;
}
}