/* ============================================================
   FOTO PRINCIPAL
   Sem espaço vazio em cima/baixo.
============================================================ */

#inicio .hero-logo,
#inicio .hero-image,
#inicio .hero-visual,
#inicio .hero-media,
#inicio .barber-hero-photo{
    box-sizing:border-box !important;

    width:100% !important;
    max-width:465px !important;

    height:auto !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    border-radius:0 !important;

    background:none !important;
    box-shadow:none !important;

    overflow:visible !important;
}


/* remove molduras antigas */

#inicio .hero-logo::before,
#inicio .hero-logo::after,
#inicio .hero-image::before,
#inicio .hero-image::after,
#inicio .hero-visual::before,
#inicio .hero-visual::after,
#inicio .hero-media::before,
#inicio .hero-media::after,
#inicio .barber-hero-photo::before,
#inicio .barber-hero-photo::after{
    content:none !important;
    display:none !important;
}


/*
   NÃO forçamos 431px de altura.
   A própria proporção da fotografia define a altura.

   Resultado:
   - sem faixa vazia
   - sem cortar
   - sem esticar
   - borda colada na foto
*/

#inicio .hero-logo > img,
#inicio .hero-image > img,
#inicio .hero-visual > img,
#inicio .hero-media > img,
#inicio .barber-hero-photo > img{
    box-sizing:border-box !important;

    display:block !important;

    width:100% !important;
    max-width:465px !important;

    height:auto !important;
    max-height:none !important;

    aspect-ratio:auto !important;

    margin:0 !important;
    padding:0 !important;

    object-fit:initial !important;
    object-position:center !important;

    border:2px solid rgba(255,255,255,.92) !important;
    border-radius:24px !important;

    outline:0 !important;

    background:transparent !important;

    box-shadow:
        0 18px 45px rgba(0,0,0,.22) !important;

    transform:none !important;
    filter:none !important;
    opacity:1 !important;
}


/* ============================================================
   LOGO BARBER AREIA CLUB

   Centralizada e maior,
   imediatamente acima de SEU CORTE.
============================================================ */

.barber-club-side{
    box-sizing:border-box !important;

    display:flex !important;
    flex-direction:column !important;

    align-items:center !important;
    justify-content:center !important;

    text-align:center !important;

    padding:
        28px 28px 30px !important;
}


.barber-club-side-logo{
    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    width:100% !important;

    margin:
        0 auto 19px !important;

    padding:0 !important;

    text-align:center !important;
}


.barber-club-side-logo img{
    display:block !important;

    width:auto !important;

    /*
       Logo maior
    */

    height:auto !important;
    max-height:none !important;

    max-width:210px !important;

    margin:0 auto !important;
    padding:0 !important;

    aspect-ratio:auto !important;

    object-fit:contain !important;

    border:0 !important;
    border-radius:0 !important;

    background:transparent !important;

    box-shadow:none !important;

    filter:none !important;
}


/* título do card */

.barber-club-side h2,
.barber-club-side h3{
    width:100% !important;

    margin:
        0 auto 12px !important;

    text-align:center !important;
}


/* caso o título esteja dividido em linhas */

.barber-club-side strong{
    text-align:center !important;
}


/* textos */

.barber-club-side p{
    max-width:350px !important;

    margin-left:auto !important;
    margin-right:auto !important;

    text-align:center !important;
}


/* botão */

.barber-club-side a{
    align-self:center !important;
}


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

@media(max-width:850px){

    #inicio .hero-logo,
    #inicio .hero-image,
    #inicio .hero-visual,
    #inicio .hero-media,
    #inicio .barber-hero-photo{
        width:min(100%,465px) !important;

        margin:
            0 auto !important;
    }

    #inicio .hero-logo > img,
    #inicio .hero-image > img,
    #inicio .hero-visual > img,
    #inicio .hero-media > img,
    #inicio .barber-hero-photo > img{
        width:100% !important;
        height:auto !important;

        max-width:465px !important;

        aspect-ratio:auto !important;

        margin:0 auto !important;
    }

    .barber-club-side-logo img{
        max-width:190px !important;
    }
}


@media(max-width:480px){

    #inicio .hero-logo,
    #inicio .hero-image,
    #inicio .hero-visual,
    #inicio .hero-media,
    #inicio .barber-hero-photo{
        max-width:100% !important;
    }

    #inicio .hero-logo > img,
    #inicio .hero-image > img,
    #inicio .hero-visual > img,
    #inicio .hero-media > img,
    #inicio .barber-hero-photo > img{
        max-width:100% !important;

        border-radius:19px !important;
    }

    .barber-club-side{
        padding:
            24px 20px 26px !important;
    }

    .barber-club-side-logo{
        margin-bottom:16px !important;
    }

    .barber-club-side-logo img{
        max-width:165px !important;
    }
}