/* =========================================================
HERO CLASSIC
========================================================= */

.section-hero.hero-classic{
    --hero-bottom-space: 40px;
    --hero-avatar-overhang: 76px;

    margin:0 0 calc(var(--hero-bottom-space) + var(--hero-avatar-overhang)) 0;
    padding:0 !important;
    overflow:visible;
}

.section-hero.hero-classic > .layout-container,
.section-hero.hero-classic > .layout-container-hero{
    width:100%;
    max-width:none;
    margin:0;
    padding:16px 16px 0 16px !important;
    box-sizing:border-box;
    overflow:visible;
}

.hero-classic{
    width:100%;
    margin:0;
    overflow:visible;
}

.hero-classic-wrapper{
    position:relative;
    width:100%;
    margin:0;
    padding:0;
    overflow:visible;
}

.hero-classic .profile-banner{
    position:relative;
    width:100%;
    min-height:48vh;
    margin:0;
    border-radius:22px;
    overflow:hidden;
    box-sizing:border-box;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.hero-classic .profile-avatar{
    position:absolute;
    left:50%;
    bottom:-90px;
    transform:translateX(-50%);
    width:180px;
    height:180px;
    border-radius:50%;
    overflow:hidden;
    z-index:20;
}

.hero-classic .profile-avatar img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    border-radius:50%;
    border:4px solid #fff;
    background:#fff;
    box-shadow:0 6px 20px rgba(0,0,0,0.25);
}

/* kasujemy ręczne dokładanie następnej sekcji */
.section-hero.hero-classic + .section{
    margin-top:0 !important;
}

/* =========================================================
TABLET
========================================================= */

@media (max-width:1024px){
    .section-hero.hero-classic{
        --hero-bottom-space: 30px;
        --hero-avatar-overhang: 70px;
    }

    .section-hero.hero-classic > .layout-container,
    .section-hero.hero-classic > .layout-container-hero{
        padding:14px 14px 0 14px !important;
    }

    .hero-classic .profile-banner{
        min-height:36vh;
        border-radius:16px;
    }

    .hero-classic .profile-avatar{
        width:135px;
        height:135px;
        bottom:-65px;
    }
}

/* =========================================================
MOBILE
========================================================= */

@media (max-width:768px){
    .section-hero.hero-classic{
        --hero-bottom-space: 24px;
        --hero-avatar-overhang: 60px;
    }

    .section-hero.hero-classic > .layout-container,
    .section-hero.hero-classic > .layout-container-hero{
        padding:12px 12px 0 12px !important;
    }

    .hero-classic .profile-banner{
        min-height:24vh;
        border-radius:12px;
    }

    .hero-classic .profile-avatar{
        width:115px;
        height:115px;
        bottom:-55px;
    }
}