/* ==========================================================
   BARBER AREIA
   FOTO PRINCIPAL — 465 x 431
========================================================== */

/*
   Container:
   - máximo 465px
   - não cria borda extra
   - não cria fundo
*/

#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;
    outline:0 !important;

    background:transparent !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;
}


/* ==========================================================
   IMAGEM

   Desktop:
   caixa máxima = 465 × 431

   object-fit: contain:
   mostra 100% da fotografia, sem cortar.
========================================================== */

#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:465px !important;
    max-width:100% !important;

    height:431px !important;
    max-height:none !important;

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

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

    background:transparent !important;

    /*
       BORDA COLADA DIRETAMENTE NA IMAGEM
    */

    border:
        2px solid rgba(255,255,255,.90) !important;

    border-radius:24px !important;

    outline:0 !important;

    box-shadow:
        0 18px 42px
        rgba(0,0,0,.20) !important;

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


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

   Mantém proporção 465:431.
   Nunca ultrapassa a tela.
========================================================== */

@media(max-width:850px){

    #inicio .hero-logo,
    #inicio .hero-image,
    #inicio .hero-visual,
    #inicio .hero-media,
    #inicio .barber-hero-photo{
        width:min(465px,100%) !important;
        max-width:100% !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;

        /*
           465 / 431
           preserva exatamente a proporção pedida
        */

        height:auto !important;
        aspect-ratio:465 / 431 !important;

        object-fit:contain !important;
    }
}


@media(max-width:520px){

    #inicio .hero-logo,
    #inicio .hero-image,
    #inicio .hero-visual,
    #inicio .hero-media,
    #inicio .barber-hero-photo{
        width:100% !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;

        aspect-ratio:465 / 431 !important;

        border-radius:20px !important;
    }
}