.hec-realisation-slider {
    position: relative;
    display: flex;
    align-items: center
}

.hec-slider-viewport {
    overflow: hidden;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    padding-left: calc(var(--hec-gap, 8px));
}

.hec-realisation-slides {
    display: flex;
    gap: var(--hec-gap, 30px);
    transition: transform .3s ease;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory
}

/* calculate slide width based on --slides-visible variable */
.hec-realisation-slides .hec-slide {
    box-sizing: border-box;
    flex: 0 0 calc((100% - ((var(--slides-visible) - 1) * var(--hec-gap, 8px))) / var(--slides-visible));
    max-width: calc((100% - ((var(--slides-visible) - 1) * var(--hec-gap, 8px))) / var(--slides-visible));
    scroll-snap-align: start
}

.hec-realisation-slides .hec-slide img {
    width: 100%;
    /* let width drive the size and keep natural aspect ratio */
    height: auto;
    display: block;
    /* default: slightly square on medium/large screens */
    aspect-ratio: var(--hec-aspect-ratio, 4/3);
    max-height: 520px; /* cap to avoid huge images on very large screens */
    object-fit: cover;
    border-radius: 40px;
}

/* dots */
.hec-realisation-dots {
    display: flex;
    gap: 0px;
    justify-content: center;
    margin-top: 12px
}

.hec-realisation-dots .hec-dot {
    background: none;
    border: 0;
    font-size: 40px;
    line-height: 1;
    color: var(--hec-dot-inactive, #D9DADA);
    cursor: pointer
}

.hec-realisation-dots .hec-dot.hec-dot--active {
    color: var(--hec-dot-color)
}

@media (max-width:600px) {
    .hec-realisation-slides .hec-slide {
        max-width: calc((100% - ((1.3 - 1) * var(--hec-gap, 8px))) / 1.3);
        flex: 0 0 calc((100% - ((1.3 - 1) * var(--hec-gap, 8px))) / 1.3)
    }
}

/* Responsive: more rectangular on small screens, more square on large screens */
@media (max-width:900px) {
    .hec-realisation-slides .hec-slide img {
        aspect-ratio: 16/9;
        max-height: 360px;
    }
}

@media (min-width:1200px) {
    .hec-realisation-slides .hec-slide img {
        aspect-ratio: 1/1; /* full square on wide screens */
        max-height: 400px;
    }
}