/* _layout.css — web-content, sezione-home, hero, HeroPicture */
/* =======================
   LAYOUT
   ======================= */
.web-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100%;
    background: transparent;
    overflow: visible;
    padding-bottom: 60px;
    position: relative;
    z-index: 1;
}

.sezione-home {
    position: relative;
    align-self: center;
    display: flex;
    flex-wrap: wrap;
    max-width: 608px;
    margin: 0;
    padding: 0;
    justify-content: flex-start;
    align-items: center;
    isolation: isolate;
}

@media (min-width: 928px) {
    .sezione-home {
        max-width: 912px
    }
}

@media (max-width: 664px) {
    .sezione-home {
        max-width: 304px
    }
}

.spacerline {
    display: flex;
    width: 80%;
    height: 1px;
    margin: 20px auto 24px;
    background-color: rgba(0, 0, 0, .2)
}

/* =======================
   HERO
   ======================= */
.hero {
    margin-top: 56px;
    display: flex;
    flex-direction: column;
    align-content: center;
    width: 100%;
    margin-bottom: 12px
}

.hero--home {
    margin-top: 102px;
    margin-bottom: 34px;
    min-height: 72px;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity .42s ease, transform .42s ease;
    will-change: opacity, transform;
}

.hero--home.is-faded {
    opacity: .08;
    transform: translateY(-10px) scale(.995);
    pointer-events: none;
}

@media (max-width: 640px) {
    .hero--home {
        margin-top: 92px;
        margin-bottom: 24px;
        min-height: 64px;
    }
}

.HeroPicture {
    background-image: url("../immagini/HeroLogoDay.webp");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 120px;
    padding: 0;
    /* fisso: non si schiaccia */
}

@media (prefers-color-scheme: dark) {
    .HeroPicture {
        background-image: url("../immagini/HeroLogoNight.webp")
    }
}

@media (max-width: 640px) {
    .HeroPicture {
        height: 100px
    }
}