.swiper-coverflow-block {
position: relative;
overflow: hidden;
}
.swiper-coverflow-container {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.swiper-coverflow-block .swiper {
padding: 0 0 var(--wp--preset--spacing--4) 0;
}
.swiper-coverflow-block .swiper-slide {
width: 280px;
height: auto;
overflow: hidden;
transition: all 0.3s ease;
}
.swiper-coverflow-block .swiper-slide-active {
transform: scale(1.05);
}
.slide-content {
display: flex;
flex-direction: column;
height: 100%;
}
.slide-image {
width: 100%;
height: auto;
aspect-ratio: 368/522;
overflow: hidden;
}
.slide-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.slide-text {
padding: var(--wp--preset--spacing--2) 0 0 0;
display: flex;
flex-direction: column;
opacity: 0;
transition: opacity 0.3s;
}
.swiper-coverflow-block .swiper-slide-active .slide-text {
opacity: 1;
}
.slide-titre {
font-size: var(--wp--preset--font-size--4);
font-weight: 600;
color: var(--wp--preset--color--custom-beige);
margin: 0 0 8px 0;
}
.slide-description {
font-size: var(--wp--preset--font-size--2);
color: var(--wp--preset--color--custom-noir);
margin: 0;
} .swiper-navigation {
position: absolute;
bottom: 0;
right: 0;
display: flex;
gap: var(--wp--preset--spacing--1);
z-index: 10;
}
.swiper-coverflow-block .swiper-button-prev,
.swiper-coverflow-block .swiper-button-next {
position: relative;
top: auto;
left: auto;
right: auto;
transform: none;
width: 54px;
height: 31px;
margin-top: 0;
background-color: transparent;
cursor: pointer;
transition: all 0.3s ease;
}
.swiper-coverflow-block .swiper-button-prev {
background-image: url(//www.smoov-design.fr/wp-content/themes/smoov/assets/chart/arrow-link-beige-fond-transp.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
transform: rotate(180deg);
}
.swiper-coverflow-block .swiper-button-prev:hover {
background-image: url(//www.smoov-design.fr/wp-content/themes/smoov/assets/chart/arrow-link-beige-hover.svg);
}
.swiper-coverflow-block .swiper-button-next {
background-image: url(//www.smoov-design.fr/wp-content/themes/smoov/assets/chart/arrow-link-beige-fond-transp.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.swiper-coverflow-block .swiper-button-next:hover {
background-image: url(//www.smoov-design.fr/wp-content/themes/smoov/assets/chart/arrow-link-beige-hover.svg);
}
.swiper-coverflow-block .swiper-button-prev:after,
.swiper-coverflow-block .swiper-button-next:after {
display: none;
}