.apo-list-stories {
    --stories-item-count: 1;
    --stories-item-gap: 1.5rem;
    --stories-item-width: 100%;
    --stories-scroller-inline-padding: 0;
    --stories-nav-button-width: clamp(2rem, 1.5541rem + 1.6216vw, 3.5rem);
    --stories-nav-button-offset: -1.25rem;
    container: stories / inline-size;
    padding-inline: var(--stories-scroller-inline-padding);
}

.apo-list-stories__wrapper {
    grid-auto-flow: column;
    grid-auto-columns: var(--stories-item-width);
    gap: var(--stories-item-gap);
    /* scrolling */
    /*overflow-y: clip;
    overflow-x: auto;
    scrollbar-width: none;*/

    overflow: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    touch-action: pan-x;
    user-select: none;
    /* sub-pixel fix */
    margin-inline: -1px;
    padding-inline: 1px;
}

:where(.apo-list-stories:has(.apo-list-stories__item:nth-child(2))) {
    --stories-nav-opacity: 1;
}

@media (width >= 48rem) {
    .apo-list-stories {
        --stories-item-count: 2;
        --stories-item-width: calc((100% / var(--stories-item-count)) - (var(--stories-item-gap) * 1 / 2));
        --stories-scroller-inline-padding: 2rem;
        --stories-item-gap: 2rem;
        --stories-nav-button-offset: 0;
    }

    :where(.apo-list-stories:has(.apo-list-stories__item:nth-child(2))) {
        --stories-nav-opacity: 0;
    }

    :where(.apo-list-stories:has(.apo-list-stories__item:nth-child(3))) {
        --stories-nav-opacity: 1;
    }
}

@media (width >= 75rem) {
    .apo-list-stories {
        --stories-item-count: 3;
        --stories-item-gap: 3.5rem;
        --stories-item-width: calc((100% / var(--stories-item-count)) - (var(--stories-item-gap) * 2 / 3));
    }

    :where(.apo-list-stories:has(.apo-list-stories__item:nth-child(3))) {
        --stories-nav-opacity: 0;
    }

    :where(.apo-list-stories:has(.apo-list-stories__item:nth-child(4))) {
        --stories-nav-opacity: 1;
    }
}

.apo-list-stories__item {
    border: solid 1px var(--bs-gray-500);
    flex: 0 0 var(--stories-item-width);
    transition: opacity 1s var(--apo-easing-out);
    /* scrolling */
    scroll-snap-align: start;
}

    .apo-list-stories__item:is(.carousel__hidden) {
        opacity: 0;
    }

.apo-list-stories__image {
    width: 7.75rem;
    aspect-ratio: 1;
}

.apo-list-stories__nav {
    background-color: var(--bs-white);
    color: var(--bs-primary-navy);
    border: solid 1px currentColor;
    top: 50%;
    width: var(--stories-nav-button-width);
    aspect-ratio: 1;
    transform: translateY(-50%);
    transition: all 0.5s var(--apo-easing-out);
    z-index: 1;
    opacity: var(--stories-nav-opacity, 0);
}

.apo-list-stories__nav--prev {
    left: var(--stories-nav-button-offset);
}

.apo-list-stories__nav--next {
    right: var(--stories-nav-button-offset);
}

.apo-list-stories__nav:disabled {
    color: var(--bs-gray-500);
}

.apo-list-stories__nav:not(:disabled):hover {
    color: var(--bs-white);
    background-color: var(--bs-primary-navy);
    border-color: var(--bs-primary-navy);
}