.avis-slider {
position: relative;
width: 100vw;
margin-left: calc(50% - 50vw);
padding: 32px 0 32px 0;
overflow: hidden;
}
.avis-slider__track {
display: flex;
gap: 20px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding: 0 56px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.avis-slider__track::-webkit-scrollbar {
display: none;
} .avis-slider__card {
flex: 0 0 calc((100% - 2 * 20px) / 3);
scroll-snap-align: start;
background-color: #fff;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-origin: border-box;
background-clip: border-box;
padding: 3rem;
position: relative;
min-height: 280px;
display: flex;
flex-direction: column;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.avis-slider__card__quote {
position: relative;
display: block;
width: 48px;
height: 48px;
margin-bottom: 8px;
object-fit: contain;
}
.avis-slider__card__text {
position: relative;
font-family: "Syne";
font-size: 20px;
font-weight: 500;
line-height: 1.5;
color: #1e1e1e;
margin: 0 0 12px 0;
flex: 1;
}
.avis-slider__card__meta {
position: relative;
font-family: "Syne";
font-size: 20px;
font-weight: 600;
color: #1e1e1e;
margin: 0 0 12px 0;
opacity: 0.9;
}
.avis-slider__card__footer {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 12px;
}
.avis-slider__card__trustpilot {
position: relative;
display: inline-flex;
align-items: center;
flex-shrink: 0;
padding: 8px 14px;
background-color: #aaaad7;
color: #fff;
font-size: 13px;
font-family: "Syne";
text-decoration: none;
border-radius: 999px;
transition:
opacity 0.2s,
transform 0.2s;
}
.avis-slider__card__trustpilot:hover {
opacity: 0.95;
transform: translateY(-1px);
color: #fff;
}
.avis-slider__card__trustpilot:focus {
color: #fff;
}
.avis-slider__card__stars {
position: relative;
display: flex;
gap: 2px;
flex-shrink: 0;
}
.avis-slider__card__star {
width: 18px;
height: 18px;
display: block;
flex-shrink: 0;
}
.avis-slider__card__star svg {
width: 100%;
height: 100%;
display: block;
}
.avis-slider__dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 20px;
padding: 0 56px;
}
.avis-slider__dot {
width: 10px;
height: 10px;
border: none;
border-radius: 0;
padding: 0;
background-color: #1e1e1e;
opacity: 0.5;
cursor: pointer;
transition:
background-color 0.2s,
opacity 0.2s,
transform 0.2s;
}
.avis-slider__dot:hover {
background-color: #1e1e1e;
opacity: 1;
}
.avis-slider__dot.is-selected {
background-color: #1e1e1e;
opacity: 1;
transform: scale(1.2);
}
.avis-slider__dot:focus,
.avis-slider__dot:focus-visible {
outline: none !important;
border: none !important;
background-color: #1e1e1e !important;
} @media (max-width: 1024px) {
.avis-slider__track {
padding: 0 24px;
}
.avis-slider__card {
flex: 0 0 calc((100% - 20px) / 2);
min-width: 0;
}
.avis-slider__card__text {
font-size: 16px;
}
.avis-slider__card__meta {
font-size: 16px;
}
} @media (max-width: 768px) {
.avis-slider {
padding: 24px 0;
}
.avis-slider__track {
padding: 0;
gap: 0;
}
.avis-slider__card {
flex: 0 0 100%;
min-height: 260px;
}
.avis-slider__card__quote {
width: 40px;
height: 40px;
}
.avis-slider__card__text {
font-size: 12px;
}
.avis-slider__card__meta {
font-size: 12px;
}
.avis-slider__dots {
padding: 0 16px;
margin-top: 16px;
}
}