.hx-scroll {
    position: relative;
}

.hx-scroll__inner {
    display: flex;
    gap: 16px;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 10px 4px;

    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;

    /*scroll-snap-type: x mandatory;*/ /* Отключаем остановку на каждой карточке при прокрутке */
    scroll-snap-type: x proximity;

    scrollbar-width: none;
}

.hx-scroll__inner::-webkit-scrollbar {
    display: none;
}

.hx-scroll__inner {
    scroll-behavior: auto; /* убираем “инерцию” конфликтующую с drag */
}

.hx-scroll::before,
.hx-scroll::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    pointer-events: none;
    z-index: 2;
}

.hx-scroll::before {
    left: 0;
    background: linear-gradient(to right, var(--bs-body-bg), transparent);
}

.hx-scroll::after {
    right: 0;
    background: linear-gradient(to left, var(--bs-body-bg), transparent);
}

/* Улучшение скрола */
.hx-scroll__inner {
    padding-left: 8px;
    padding-right: 40px; /* ключевой момент */
}

.hx-scroll__inner {
    cursor: grab;
}

.hx-scroll__inner:active {
    cursor: grabbing;
}

.hx-scroll__inner.is-dragging {
    cursor: grabbing;
    user-select: none;
}

/* Делаем карточки одинаковой ширины везде */
.horizontal-card-wrapper {
    flex: 0 0 auto;
    width: 320px; /* или 300px — как тебе нужно */
}

/* Делаем карточки миссий одинаковой ширины везде */
.horizontal-mission-wrapper {
    flex: 0 0 auto;
    width: 320px;
}

/* Чтобы первый элемент к горищонтальном скроле не отступал от левого края сразу при открытии страницы. БЕСИТ */
.hx-scroll__inner {
    padding: 10px 0 10px 0; /* или просто padding: 10px 0; */
}



/* Указатель наличия скрола */
.hx-scroll {
    position: relative;
}

.hx-scroll__hint {
    position: absolute;
    right: 15px;
    top: 40%;
    transform: translateY(-50%);

    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 30%;
    background: rgba(255, 255, 255, 20%);
    color: white;

    pointer-events: none;
    z-index: 5;

    transition: opacity 0.3s ease;
}
/* скрытие указателя */
.hx-scroll__hint.hidden {
    opacity: 0;
}

/* Добавляем свойства классам, чтобы при горизонтальном скроле, не выделялся контент карточки статьи */
.hx-scroll__inner.is-dragging {
    cursor: grabbing;
    user-select: none;
}

.hx-scroll__inner img {
    pointer-events: none;
}