.onglets-gallery {
margin-bottom: var(--wp--preset--spacing--6);
}
.onglets-gallery .onglets-navigation {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: var(--wp--preset--spacing--1);
}
.onglets-gallery .wp-block-button .wp-block-button__link {
padding-left: var(--wp--preset--spacing--2);
padding-right: var(--wp--preset--spacing--2);
background-color: transparent;
color: var(--wp--preset--color--custom-noir);
border: 1px solid var(--wp--preset--color--custom-noir);
font-size: var(--wp--preset--font-size--3);
transition: all 0.3s ease;
}
.onglets-gallery .wp-block-button .wp-block-button__link:hover,
.onglets-gallery .wp-block-button .wp-block-button__link.active {
background-color: var(--wp--preset--color--custom-noir)!important;
color: var(--wp--preset--color--custom-blanc)!important;
}
.onglets-gallery .onglet-panel {
display: none;
}
.onglets-gallery .onglet-panel.active {
display: block;
}
.onglets-gallery .onglet-gallery {
width: 100%;
margin-top: 0;
} .onglets-gallery .gallery-swiper {
width: 100%;
height: auto;
margin-bottom: var(--wp--preset--spacing--3);
position: relative;
padding: var(--wp--preset--spacing--5) 0 var(--wp--preset--spacing--4) 0;
overflow: hidden;
}
.onglets-gallery .gallery-swiper .swiper-slide {
text-align: center;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: auto !important;
height: auto;
overflow: hidden;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translateZ(0);
}
.onglets-gallery .gallery-swiper .gallery-image {
display: block;
width: auto;
height: 400px;
max-width: 100%;
object-fit: cover;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
@media (max-width: 768px) {
.onglets-gallery .gallery-swiper .gallery-image {
height: 250px;
}
}
@media (max-width: 480px) {
.onglets-gallery .gallery-swiper .gallery-image {
height: 200px;
}
}
.onglets-gallery .image-caption {
padding: var(--wp--preset--spacing--2);
font-size: var(--wp--preset--font-size--1);
color: var(--wp--preset--color--custom-noir);
background-color: rgba(255, 255, 255, 0.9);
margin-top: var(--wp--preset--spacing--1);
} .onglets-gallery .swiper-button-next,
.onglets-gallery .swiper-button-prev {
width: 44px;
height: 44px;
margin-top: 0;
top: 0;
background-color: transparent;
transition: all 0.3s ease;
}
.onglets-gallery .swiper-button-next::after,
.onglets-gallery .swiper-button-prev::after {
display: none;
}
.onglets-gallery .swiper-button-prev {
right: 60px;
left: auto;
background-image: url(//www.smoov-design.fr/wp-content/themes/smoov/assets/chart/arrow-link-noir.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
transform: rotate(180deg);
}
.onglets-gallery .swiper-button-prev:hover {
background-image: url(//www.smoov-design.fr/wp-content/themes/smoov/assets/chart/arrow-link-noir-hover.svg);
}
.onglets-gallery .swiper-button-next {
right: 10px;
background-image: url(//www.smoov-design.fr/wp-content/themes/smoov/assets/chart/arrow-link-noir.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.onglets-gallery .swiper-button-next:hover {
background-image: url(//www.smoov-design.fr/wp-content/themes/smoov/assets/chart/arrow-link-noir-hover.svg);
} .onglets-gallery .swiper-pagination {
position: absolute!important;
bottom: 0!important;
left: 0!important;
width: 100%!important;
}
.onglets-gallery .swiper-pagination-bullet {
width: 12px;
height: 12px;
background-color: var(--wp--preset--color--custom-noir);
border-radius: 50%;
opacity: 0.2;
transition: all 0.3s ease;
}
.onglets-gallery .swiper-pagination-bullet-active {
opacity: 1;
}
@media (max-width: 768px) {
.onglets-gallery .onglets-navigation {
gap: 8px;
margin-bottom: var(--wp--preset--spacing--2);
}
.onglets-gallery .wp-block-button .wp-block-button__link {
font-size: var(--wp--preset--font-size--2);
padding-left: 16px;
padding-right: 16px;
}
.onglets-gallery .onglet-gallery {
width: 100%;
margin-bottom: var(--wp--preset--spacing--3);
}
.onglets-gallery .swiper-button-prev {
right: 50px;
}
.onglets-gallery .swiper-button-next {
right: 5px;
}
}