.slides {
    --snap-height: calc((var(--app-vh, 1vh) * 100) - var(--bar-height, 92px));
    max-block-size: var(--snap-height);
    overflow-y: auto;
    z-index: 2;
    position: relative;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

.slides::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.slides::after {
    content: "";
    display: block;
    position: absolute;
    inset-inline-start: 50%;
    inset-block-end: 1.5em;
    block-size: 0.7em;
    inline-size: 0.7em;
    border-block-end: 2px solid #ffffff70;
    border-inline-end: 2px solid #ffffff70;
    animation: slideHint 2s linear infinite;
    z-index: 3;
}

@keyframes slideHint {
    0% {
        transform: translate(-50%, -6px) rotate(45deg);
        opacity: 0.65;
    }

    50% {
        transform: translate(-50%, 8px) rotate(45deg);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -6px) rotate(45deg);
        opacity: 0.65;
    }
}

.slide {
    box-sizing: border-box;
    min-block-size: var(--snap-height);
    block-size: var(--snap-height);
    display: grid;
    place-content: center;
    gap: 1rem;
    overflow-x: hidden;
    padding: 1.5rem 0 3.4rem;
    position: relative;
}

@supports (scroll-snap-type: y mandatory) {
    .slides {
        scroll-snap-type: y mandatory;
    }

    .slide {
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
}

@media only screen and (max-width: 600px) {
    .slides {
        --snap-height: calc((var(--app-vh, 1vh) * 100) - var(--bar-height, 92px));
    }

    .slide {
        gap: 0.75rem;
        padding: 1rem 0 3.2rem;
    }

    .slides::after {
        inset-block-end: 1.15em;
    }
}