.news-slider {
    --news-slider-columns: 3;
    --news-slider-gap: 2rem;

    position: relative;
}

.news-slider__viewport {
    overflow: hidden;
}

.news-slider__track {
    display: flex;
    gap: var(--news-slider-gap);
    transition: transform 450ms ease;
    will-change: transform;
}

.news-slider__item {
    flex: 0 0 calc(
        (
            100% -
            (var(--news-slider-columns) - 1) *
            var(--news-slider-gap)
        ) /
        var(--news-slider-columns)
    );

    min-width: 0;
}

.news-slider__navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.news-slider__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 3rem;
    height: 3rem;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.news-slider__button:disabled {
    cursor: default;
    opacity: 0.35;
}

.news-slider__status {
    min-width: 5rem;
    text-align: center;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .news-slider {
        --news-slider-columns: 2;
    }
}

@media (max-width: 767px) {
    .news-slider {
        --news-slider-columns: 1;
        --news-slider-gap: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .news-slider__track {
        transition: none;
    }
}