.article__body {
    position: relative;
    overflow: hidden;
}

/* ----------------------------------------
   Переменные для быстрой настройки
---------------------------------------- */
.article-slider {
    --slider-max-width: 760px;
    --slider-aspect-ratio: 16/9;
    --btn-size: 48px;
    --btn-bg: transparent;
    --btn-bg-hover: transparent;
    --btn-color: transparent;
    --caption-color: #212121;
    --counter-color: #212121;
    --transition-duration: 0.3s;
}

/* ----------------------------------------
   Общий контейнер
---------------------------------------- */
.article-slider {
    position: relative;
    max-width: var(--slider-max-width);
    margin: 0 auto;
    font-family: sans-serif;
    user-select: none;
}

.article-slider__instance {
    position: relative;
}

/* ----------------------------------------
   Слайды
---------------------------------------- */
.article-slider__slides {
    position: relative;
    /* Поддерживаем произвольное соотношение сторон */
    width: 100%;
    /* aspect-ratio: var(--slider-aspect-ratio); */
    overflow: hidden;
}

.article-slider__slides {
    /* aspect-ratio: 2/1; */
}

@media (min-width: 576px) {
    .article-slider__slides {
        width: 100%;
        height: auto;
        aspect-ratio: initial;
    }
}

.article-slider__track {
    height: 100%;
    display: flex;
    transition: transform var(--transition-duration) ease;
    will-change: transform;
}

.article-slider__slide {
    width: 100%;
    max-width: 100%;
}

.article-slide {
    height: 100%;
    margin: 1rem 0 0 0;
}

.article-slide__img {
    display: block;
    width: 100%;
    height: 52vw;
    object-fit: cover;
}

@media (min-width: 576px) {
    .article-slide__img {
        height: 427px;
    }
}

/* ----------------------------------------
   Подпись слайда
---------------------------------------- */
.article-slide__caption {
    text-align: left;
    margin-top: 16px;
    color: var(--caption-color);
    font-family: Rubik, sans-serif;
    font-size: 16px;
    line-height: 30px;
    font-weight: 400;
}

/* ----------------------------------------
   Кнопки и счётчик
---------------------------------------- */
.article-slider__buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

/* Псевдо-элемент показывает «1 / 5» между кнопками */
.article-slider__counter {
    text-align: center;
    color: var(--caption-color);
    font-family: Rubik, sans-serif;
    font-size: 16px;
    line-height: 30px;
    font-weight: 400;
}

/* Стиль самих кнопок */
.article-slider__btn {
    width: var(--btn-size);
    height: var(--btn-size);
    border: none;
    border-radius: 50%;
    background-color: var(--btn-bg);
    color: var(--btn-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--transition-duration);
}

/* Ховер и состояние disabled */
.article-slider__btn:hover:not(:disabled) {
    background-color: var(--btn-bg-hover);
}

.article-slider__btn:disabled {
    opacity: 0.3;
    cursor: default;
}

/* Стрелки через content */
.article-slider__btn.glider-prev::before,
.article-slider__btn.glider-next::before {
    content: '';
    display: inline-block;
    width: 48px;
    height: 48px;
    background-image: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

.article-slider__btn.glider-prev::before {
    background-image: url('data:image/svg+xml;utf8,<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.8774 17L5.12216 23.6667M5.12216 23.6667L10.8774 30.3333M5.12216 23.6667L43 23.6667" stroke="%2396D3CE" stroke-width="2"/></svg>');
}

.article-slider__btn.glider-next::before {
    background-image: url('data:image/svg+xml;utf8,<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M37.1226 30L42.8778 23.3333M42.8778 23.3333L37.1226 16.6667M42.8778 23.3333L5 23.3333" stroke="%2396D3CE" stroke-width="2"/></svg>');
}