/* The main page container */
/* The Single nav item */
.sidebar-storia-item {
    border-bottom : 1px solid var(--dark);
    display       : block;
    font          : var(--serif);
    padding       : 1rem 0;
}
.sidebar-storia-item:hover {
    opacity : .35;
}
/* Hide On Mobile */
@media (width <= 800px) {
    .sidebar-storia { display : none; }
}
/* The Main Container */
.storia-content {
    grid-area : innergrid;
}
/* Page Title */
.storia-title {
    font       : var(--serif-l);
    min-height : 6rem;
}
/* The Single Slide */
.storia-slide {
    width                 : 100%;
    display               : grid;
    grid-template-columns : 1fr 2fr;
}
/* The Picture */
.storia-picture {
    position     : relative;
    grid-column  : 1 / -1;
    grid-row     : 1 / 3;
    aspect-ratio : 2/1;
    background   : linear-gradient(to bottom, var(--accent) , var(--dark));
}
.storia-picture.has-picture::after {
    content : "";
    position: absolute;
    inset : 0;
    background: rgba(0,0,0,0.35);
}
.storia-image {
    width : 100%;
    height : 100%;
    object-fit: cover;
}
/* The text Container */
.slide-content {
    grid-area          : content;
    z-index            : 2;
    display            : grid;
    grid-template-rows : 1fr 1fr;
    color              : var(--light);
    margin-left        : auto;
    width              : 100%;
    max-width          : 35rem;
    padding            : 0 3rem;
}
/* The Slide title and subtitle */
.slide-titles {
    align-self    : end;
    grid-column   : 2 / -1;
    grid-row      : 1;
    z-index       : 2;
    color         : var(--light);
    padding-right : 3rem;
}
.slide-title {
    display : block;
    font    : var(--serif-l);
}
.slide-subtitle {
    display : block;
    font    : var(--sans-l);
}
.slide-text {
    padding-top   : 3rem;
    padding-right : 3rem;
    grid-column   : 2 / -1;
    grid-row      : 2;
    z-index       : 2;
    color         : var(--light);
}
/* Slider Controller */
.storia-slider-controls {
    width : 100%;
}
.storia-slider-input {
    -webkit-appearance : none;
    width              : 100%;
    display            : block;
    cursor             : pointer;
}
/* The Input Slider used to control the slider */
.storia-slider-input::-webkit-slider-runnable-track,
.storia-slider-input::-moz-range-track {
    height        : 2px;
    background    : var(--dark);
    border-radius : 0px;
}
.storia-slider-input::-webkit-slider-thumb,
.storia-slider-input::-moz-range-thumb {
    width         : 1rem;
    height        : 6px;
    background    : var(--dark);
    border-radius : 0px;
    border        : none;
}
.storia-slider-input::-webkit-slider-thumb::hover,
.storia-slider-input::-moz-range-thumb::hover {
    background: var(--accent);
}
/* Mobile Adjustments */
@media (width <= 1100px) {

    .storia-title {
        min-height     : auto;
        padding-bottom : 1rem;
    }

    /* The Slides Container becomes an horizontal slider on mobile */
    .storia-slides {
        display               : grid;
        grid-template-columns : repeat(var(--totalslides),90%);
        gap                   : 0.5rem;
        overflow              : hidden;
        scroll-behavior       : smooth;
    }

    .storia-picture {
        grid-row     : 1;
        aspect-ratio : 4/5;
    }

    .slide-titles {
        align-self   : start;
        justify-self : start;
        grid-column  : 1 / -1;
        padding      : 2rem 2rem 2rem 1rem;
    }

    .slide-title,
    .slide-subtitle {
        font : var(--serif-m);
    }

    .slide-text {
        grid-column : 1 / -1;
        color       : var(--dark);
        padding     : 0.5rem 0 0;
    }

}
/* Desktop Adjustments */
@media (width > 1100px) {
    .storia-slider-controls {
        display : none;
    }
}