/* =========================================
   MYAUBUILD
   Componentes globais
   ========================================= */


/* -----------------------------------------
   LOGO
   ----------------------------------------- */

.site-logo {
    display: flex;
    align-items: center;
    justify-content: center;

    margin-left: auto;
    margin-right: auto;

    flex-shrink: 0;
}


.site-logo__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    text-decoration: none;
}


.site-logo__image {
    display: block;

    width: 100%;
    height: auto;
}


/* SMALL — headers e navegação */

.site-logo--small {
    width: 260px;
    max-width: min(260px, 44vw);
    margin-bottom: 0;
}


/* MEDIUM — login, cadastro e telas de conta */

.site-logo--medium {
    width: 380px;
    max-width: min(380px, 82vw);
    margin-bottom: 24px;
}


/* LARGE — hero e páginas institucionais */

.site-logo--large {
    width: 480px;
    max-width: min(480px, 88vw);
    margin-bottom: 28px;
}


/* Quando a logo estiver diretamente dentro do header,
   ela permanece alinhada à esquerda. */

.header > .site-logo {
    margin-left: 0;
    margin-right: 0;
}


/* RESPONSIVO */

@media (max-width: 600px) {

    .site-logo--small {
        width: 236px;
        max-width: 44vw;
    }

    .site-logo--medium {
        width: 330px;
        max-width: 82vw;
        margin-bottom: 20px;
    }

    .site-logo--large {
        width: 400px;
        max-width: 88vw;
        margin-bottom: 24px;
    }

}