.slider-images {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.slider-images__container {
    width: 100%;
    overflow: hidden;
}

.slider-images__track {
    display: flex;
    gap: 24px;

    overflow-x: auto;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    align-items: center;

    padding: 40px 5vw;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.slider-images__track::-webkit-scrollbar {
    display: none;
}

/*
|--------------------------------------------------------------------------
| Slides
|--------------------------------------------------------------------------
*/

.slider-images__slide {
    flex-shrink: 0;

    height: clamp(280px, 40vw, 420px);

    scroll-snap-align: center;

    position: relative;
}

/*
|--------------------------------------------------------------------------
| Images
|--------------------------------------------------------------------------
*/

.slider-images__slide img {
    height: 100%;
    width: auto;

    display: block;

    object-fit: contain;
}

/*
|--------------------------------------------------------------------------
| Dots
|--------------------------------------------------------------------------
*/

.slider-images__dots {
    position: absolute;
    bottom: 20px;
    right: 40px;

    display: flex;
    gap: 8px;

    z-index: 10;
}

.slider-images__dot {
    width: 8px;
    height: 8px;

    border: none;
    border-radius: 50%;

    cursor: pointer;

    background: white;
    opacity: .4;
}

.slider-images__dot.is-active {
    background: red;
    opacity: 1;
}

/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 1024px) {

    .slider-images__track {
        gap: 20px;
        padding: 32px 24px;
    }

    .slider-images__dots {
        right: 24px;
    }

}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

    .slider-images__track {
        gap: 16px;
        padding: 24px 16px;
    }

    .slider-images__slide {
        height: clamp(220px, 55vw, 340px);
    }

    .slider-images__dots {
        right: 50%;
        transform: translateX(50%);
        bottom: 12px;
    }

}