.splide {
    width: 100%;

    & .splide__arrow {
        fill: var(--color-link);
    }

    & .splide__pagination__page.is-active {
        background: var(--color-link);
    }

    & .splide__list {

        & .splide__slide {
            transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
            /*transform: translateX(-5%);*/

            aspect-ratio: 1080/2340; /*screenshots*/
            background-size: cover;
            max-height: min(70vh, 800px);
            height: 80vh;
            overflow: hidden;

            &:not(.is-active) {
                opacity: 0.3;
                transform: scale(0.9);
            }

            &.is-next, &.is-prev {
                opacity: 0.5;
                transform: scale(0.9);
            }

            & .splide__slide__label {
                padding: 20px;
                background-color: rgb(19 10 41 / 90%);
                border-radius: 20px 20px 10px 20px;
                position: absolute;
                bottom: 10px;
                opacity: 0;
                width: calc(100% - 20px);
                left: 10px;
                height: auto;
                max-height: 100%;
                transition: opacity 0.3s ease-in-out;
                pointer-events: none;
                overflow: hidden;
                border-top: 1px solid var(--color-link);
                border-left: 1px solid var(--color-link);
            }

            &:hover .splide__slide__label {
                opacity: 1;
            }
        }
    }

    & .splide__toggle {
        margin-top: 1rem;
        background-color: transparent;
        font-size: 16px;
        padding: 8px;

        & span {
            color: var(--color-link);
        }
    }

    & .splide__progress {
        background: #141414;

        & .splide__progress__bar {
            background: var(--color-headline);;
            height: 2px;
            transform: translateZ(0);
            will-change: width;
        }
    }
}