.post-gallery {
position: relative;
width: 100%;
max-width: 100%;
margin-block: var(--wp--preset--spacing--4);
overflow: hidden;
}
.post-gallery__swiper {
position: relative;
width: 100%;
overflow: hidden;
border-radius: 2px;
}
.post-gallery__slide {
position: relative;
margin: 0;
width: 100%;
height: 0;
padding-bottom: 66.666%;
overflow: hidden;
}
.post-gallery__image {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center;
}
.post-gallery__nav {
position: absolute;
top: 50%;
z-index: 2;
width: 36px;
height: 36px;
padding: 0;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 50%;
background:
var(--wp--preset--color--custom-white)
url(//architecte-rc.com/wp-content/themes/rc/assets/chart/button-arrow-black.svg) center / 14px 10px no-repeat;
cursor: pointer;
transform: translateY(-50%);
transition:
border-color 0.25s ease,
opacity 0.25s ease;
}
.post-gallery__nav--prev {
left: 0.5rem;
transform: translateY(-50%) scaleX(-1);
}
.post-gallery__nav--next {
right: 0.5rem;
}
.post-gallery__nav:hover,
.post-gallery__nav:focus-visible {
border-color: var(--wp--preset--color--custom-default);
}
.post-gallery__nav.swiper-button-disabled {
opacity: 0.35;
cursor: default;
}
.post-gallery__pagination {
position: absolute;
right: 0.5rem;
bottom: 0.5rem;
left: auto !important;
z-index: 2;
display: inline-flex;
width: auto !important;
gap: 0.35rem;
}
.post-gallery__pagination .swiper-pagination-bullet {
width: 7px;
height: 7px;
margin: 0 !important;
background: rgba(255, 255, 255, 0.55);
opacity: 1;
}
.post-gallery__pagination .swiper-pagination-bullet-active {
background: var(--wp--preset--color--custom-primary);
}