/* The main page container */
/* The Main Container */
.storia-content {
    grid-area : innergrid;
}
/* Page Title */
.storia-title {
    font: var(--serif-l);
    margin-bottom : 2rem;
}
/* The Single Slide */
.storia-slide {
    width : 100%;
}
.storia-slide:not(:last-child) {
    margin-bottom : 4rem;
}
.storia-picture-container {
    position            : relative;
    display             : grid;
    grid-template-areas : "content";
}
/* The Picture */
.storia-picture {
    position   : relative;
    grid-area  : content;
    background : linear-gradient(to bottom, var(--accent) , var(--dark));
    max-height : calc(100vh - var(--side-spacer) - var(--side-spacer));
    object-fit: cover;
    object-position: center;
}
.storia-picture.has-picture::after {
    content : "";
    position: absolute;
    inset : 0;
    background: rgba(0,0,0,0.15) linear-gradient(to bottom, rgba(0,0,0,0.5),transparent);
}
.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 {
    grid-area : content;
    color     : var(--light);
    z-index   : 1;
    align-self: start;
    position  : sticky;
    top       : 0;
    padding   : 2rem;
    text-wrap : balance;
    width: 100%;
}
.slide-title {
    display : block;
    font    : var(--serif-m-fluid);
}
.slide-subtitle {
    display : block;
    font    : var(--sans-m);
    font    : var(--serif-m-fluid);
}
.storia-picture-text {
    font : var(--sans-m);
    padding-top : 1rem;
}
@media (width < 1100px) {
    .slide-titles {
        padding : 1rem;
        top : var(--stickybars-distance);
    }
    .storia-slide:not(:last-child) {
        margin-bottom : 3rem;
    }
}