/* GLOBAL ELEMENTS */
.identity-logo {
    font: 400 var(--fsize-3)/1 "Playfair Display", Sans-serif;
}

/* SECTIONS */
#hero {
    padding-top: calc(var(--pagination-spacer-y) + var(--header-height));
    /*height: 100vh;
    min-height: fit-content;
    max-height: 768px;*/
    background-image: url('/images/hero.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom right;
    padding-bottom: 0;
}
.hero-paragraph {
    margin-bottom: 70vw;
}
#about,
#intro,
#journey,
#social  {
    display: flex;
    flex-direction: column;
    row-gap: var(--pagination-spacer-y);
}
#about-carousel {
    /* per qualche motivo lo sfondo ha 1px di bordo bianco superiore, questo lo fixa */
    margin-top: -1px;
    padding-top: 1px;
}
#privacy section.col {
    row-gap: 1rem;
}
#privacy section.col h3 {
    margin-top: 1rem;
}


/* MEDIA OBJECTs */
.col,
.media-object {
    display: flex;
    flex-direction: column;
}
.media-object {
    row-gap: var(--pagination-spacer-y);
}
section:not(.section__wrapped) .text-wrapper {
    padding: 0 var(--pagination-spacer-x);
}
.text-wrapper,
.text-wrapper div {
    display: flex;
    flex-direction: column;
    row-gap: var(--content-gap);
}

.media-object .text-wrapper {
    width: 100%;
}
.media-object .image-wrapper {
    width: 100%;
    height: auto;
    overflow: hidden;
}

.media-object .image-wrapper img {
    transition: all .3s ease-out;
}
.media-object .image-wrapper img:hover {
    scale: 1.125;
}

.section__intro {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    row-gap: 20px;
}


/* UTILS */
.bg-white {
    background-color: var(--color-bg);
}
.bg-sand {
    background-color: var(--color-bg-sand);
}
.bg-dark {
    background-color: var(--color-bg-dark);
    color: var(--color-text-dark);
}
section.bg-dark {
    /* altezza del padding considerando la presenza del ::before */
    padding-top: calc(var(--pagination-spacer-y) - 4rem); 
}
section.section__wrapped.bg-dark {
    /* section__wrapped ha 1rem in più di padding */
    padding-top: calc(var(--pagination-spacer-y) - 3rem); 
}
section.bg-dark::before {
    content: " ";
    display: block;
    position: sticky;
    top: var(--header-height);
    height: 4rem;
    background: linear-gradient(to bottom, var(--color-bg-dark), transparent);
}
.bg-sand-white {
    background: linear-gradient(
        to bottom, 
        var(--color-bg-sand) calc(var(--swiper-slide-heg) / 2), 
        var(--color-bg) calc(var(--swiper-slide-heg) / 2)
    );
}
.bg-white-sand {
    background: linear-gradient(
        to bottom, 
        var(--color-bg) calc(var(--swiper-slide-heg) / 2),
        var(--color-bg-sand) calc(var(--swiper-slide-heg) / 2)
    );
}
h1.centered,
h2.centered {
    text-align: center;
}
section.centered {
    display: flex;
    justify-content: center;
}
.string {
    white-space: nowrap;
}
@media screen and (min-width: 576px) {
    #hero {
        background-image: url(/images/hero_mobile.png);
        background-size: 50%;
    }
    #hero .text-wrapper {
        max-width: 50%;
        flex-grow: 1;
    }
    #hero .text-wrapper div {
        max-width: 87%;
        align-self: flex-end;
    }
}
@media screen and (min-width: 998px) {
    #timeline .text-wrapper {
        max-width: 50%;
        flex-grow: 1;
    }
    #hero .text-wrapper div,
    #timeline .text-wrapper div {
        max-width: 87%;
        align-self: flex-end;
    }
    
    .media-object,
    .timeline-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    
        column-gap: var(--pagination-spacer-x);
    }
    
    .media-object.reversed:nth-child(odd),
    .media-object:nth-child(even):not(.reversed) {
        flex-direction: row-reverse;
    }
    .media-object .image-wrapper {
        max-width: 1098px;
        width: 100%;
        height: 100%;
    
        object-fit: cover;
    }
    .media-object .text-wrapper {
        max-width: 680px;
    }
    .media-object.reversed:nth-child(even) .text-wrapper,
    .media-object:nth-child(odd):not(.reversed) .text-wrapper {
        padding-right: var(--pagination-spacer-x);
        padding-left: 0;
    }
    .media-object.reversed:nth-child(odd) .text-wrapper,
    .media-object:nth-child(even):not(.reversed) .text-wrapper {
        padding-right: 0;
        padding-left: var(--pagination-spacer-x);
    }
}
@media screen and (min-width: 1025px) {
    #hero {
        max-height: 898PX;
        min-height: 768px;
        background-image: url(/images/hero.png);
        background-size: 65%;
    }
}
@media screen and (min-width: 1200px) {
    #hero {
        max-height: 1030px;
        background-size: 60%;
        background-position-x: 110%;
    }
}