/* _________________________ ELEMENTI SLIDER _________________________ */
/* ___________________________________________________________________ */

.block-slides {
    position: relative;
}

.slide-label-container {
    color: white;
    text-orientation: mixed;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    position: absolute;
    top: calc(var(--slide-width)/2);
    left: calc(var(--slide-width)/3);
}

.slides-container {
    height: calc(100vw * 0.42);
    width: 100%;
    display: flex;
}

.slides-container::-webkit-scrollbar {
    display: none;
}

.non-interactive {
    pointer-events: none;
}

.slide {
    position: relative;
    width: var(--slide-width);
    flex-grow: 2;
    transition: flex-grow 0.6s ease-in-out;
    overflow: hidden;
}

.collapsed {
    flex-grow: 0;
    cursor: pointer;
    flex-shrink: 2;
}

.collapsed .slide-image {
    opacity: 0;
}

.slide-content {
    padding: var(--slide-width) calc(var(--slide-width) + 2rem) var(--slide-width) calc(var(--slide-width) + 4rem);
    height: 100%;
}

.slide-text {
    width: 60%;
    color: white;
    position: relative;
    z-index: 2;
}

.slide-image {
    position: absolute;
    right: 0;
    bottom: 0;
    max-width: 55vw;
    opacity: 1;
    transition: opacity 0.5s;
}

.slider-mobile-hide {
    display: block;
}

.slider-mobile-show {
    display: none;
}

.slides-dots-container {
    width: 100%;
    padding: 2rem var(--hor-padding);
    position: absolute;
    width: 50%;
    top: 0;
    right: 0;
    display: flex;
    gap: 0.3rem;
    justify-content: end;
    display: none;
}

.slides-dot {
    width: 5px;
}





@media screen and (max-width: 1600px) {

    .slide-text {
        width: 80%;
    }

    .slides-container {
        height: calc(100vw * 0.55);
    }

    .slide-image {
        max-width: 50vw;
    }
}


@media screen and (max-width: 1350px) {

    .slide-text {
        width: 100%;
    }

    .slides-container {
        max-height: 45rem;
    }
}


@media screen and (max-width: 1200px) {
    .slides-container {
        height: calc(100vw * 0.65);
    }
}


@media screen and (max-width: 900px) {

    .collapsed {
        flex-grow: 1;
        flex-shrink: 0;
    }

    .slide {
        flex-basis: 100vw;
        flex-shrink: 0;
    }

    .slides-container {
        height: 40rem;
        overflow-x: hidden;
    }

    .slide-content {
        padding: 2rem 10rem 2rem 5rem;
        height: 100%;
        background-repeat: no-repeat;
        background-position: bottom right;
        background-size: 75% auto;
    }

    .slides-dots-container {
        display: flex;
    }

    .slides-dot {
        width: 7px;
    }

    .slides-dots-container {
        padding: 3rem var(--hor-padding);
    }

    .slide-image {
        max-width: 70%;
    }

    .collapsed .slide-image {
        opacity: 1;
    }
}



@media screen and (max-width: 600px) {

    .slides-dots-container {
        padding: 2.2rem var(--hor-padding);
    }

    .slides-dot {
        width: 5px;
    }

    .slide-label-container {
        font-size: 1rem;
        text-orientation: initial;
        writing-mode: horizontal-tb;
        transform: rotate(0);
        position: absolute;
        top: 2rem;
        left: var(--hor-padding);
    }
    .slides-container {
        height: 35rem;
    }

    .slide-content {
        padding: 5rem var(--hor-padding) 2rem var(--hor-padding);
        background-size: 100% auto;
    }

    .slide-image {
        position: absolute;
        max-width: calc(100vw - 2rem);
    }


.slider-mobile-hide {
    display: none;
}

.slider-mobile-show {
    display: block;
}

}


@media screen and (max-height: 950px)  and (orientation: landscape) {

    .slides-container {
        height: 40rem;
    }
}




@media screen and (max-height: 750px)  and (orientation: landscape) {

    .slide-content {
        padding-top: 2rem;
    }

    .slides-container {
        height: 35rem;
    }
}