/* Carousel Mobile */
.carousel-mobile {
    overflow-y: auto;
    overflow-x: hidden;

    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;

    -ms-overflow-style: none;
    scrollbar-width: none;
}

.carousel-mobile::-webkit-scrollbar {
    display: none;
}

.carousel-item-mobile {
    display: none;
    position: relative;
    width: 100%;
    height: 33%;
    align-items: center;
    text-align: center;
    user-select: none;
}

.carousel-item-mobile img {
    position: relative;
    height: 100%;
    width: auto;
    object-fit: cover;
    opacity: 0;
}

@media (max-width: 1920px) {
    #top-corner {
        transform: scale(0.8);
    }

    #bottom-corner {
        transform: scale(-0.8) translate(100%, 100%);
    }
}

@media (max-width: 1280px) {

    .arrow-symbol-container img,
    .portrait-carousel-text img {
        transform: scale(0.6);
    }

    #top-corner {
        transform: scale(0.5);
    }

    #bottom-corner {
        transform: scale(-0.5) translate(100%, 100%);
    }

    #scroll-indicator {
        transform: scale(0.8);
    }
}

@media (max-width: 798px) {

    .spin-symbol-container #spin-symbol {
        scale: 0.9;
    }

    .arrow-symbol-container img,
    .portrait-carousel-text img {
        transform: scale(0.5);
    }

    #top-corner {
        transform: scale(0.3);
    }

    #bottom-corner {
        transform: scale(-0.3) translate(100%, 100%);
    }
}

@media (max-width: 640px) {

    .arrow-symbol-container img,
    .portrait-carousel-text img {
        transform: scale(0.4);
    }

    #scroll-indicator {
        transform: scale(0.6);
    }
}

/* Portrait */
@media (orientation: portrait) {
    .portrait-carousel-text {
        font-size: 3cqh;
        padding-bottom: 15vw;
    }

    /* Switch to portrait Text Mode */
    .carousel-item-text,
    .arrow-symbol-container {
        display: none;
    }

    .portrait-carousel-text {
        display: flex;
        z-index: 3;
    }

    /* Scroll Indeicator */
    #scroll-indicator {
        left: 6%;
    }

    .spin-symbol-container #spin-symbol {
        scale: 1;
    }

    @media (max-width: 1280px) {
        #top-corner {
            transform: scale(0.8);
        }

        #bottom-corner {
            transform: scale(-0.8) translate(100%, 100%);
        }
    }

    @media (max-width: 798px) {
        #top-corner {
            transform: scale(0.6);
        }

        #bottom-corner {
            transform: scale(-0.6) translate(100%, 100%);
        }
    }

    @media (max-width: 640px) {

        #top-corner {
            transform: scale(0.5);
        }

        #bottom-corner {
            transform: scale(-0.5) translate(100%, 100%);
        }
    }

}