.image-slider {
    width: 100%;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

.image-slider__slide {
    aspect-ratio: var(--slide-ratio, 16 / 9);
    max-height: var(--slide-max-height);
    overflow: hidden;
}

.image-slider__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.image-slider .swiper-button-prev,
.image-slider .swiper-button-next {
    width: 3rem;
    height: 3rem;
}

.image-slider__nav {
    display: block;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    transition: filter 0.2s ease;
}

.image-slider__nav:hover {
    filter: invert(1);
}

.image-slider__nav::after {
    display: none;
}

/* ---- Pagination dots ---- */

.image-slider {
    --swiper-pagination-color: var(--color-brand-primary);
    --swiper-pagination-bullet-inactive-color: var(--color-brand-background);
    --swiper-pagination-bullet-inactive-opacity: 0.4;
    --swiper-pagination-top: 1rem;
    --swiper-pagination-bottom: auto;
}

.image-slider__pagination {
    display: none;
}

.image-slider[data-pagination="true"] .image-slider__pagination {
    display: block;
}

@media (max-width: 768px) {
    .image-slider .swiper-button-prev,
    .image-slider .swiper-button-next {
        display: none;
    }

    .image-slider__pagination {
        display: block;
    }
}