/*
DOCUMENTAÇÃO DO ARQUIVO: css/components/hero.css
Espaçamento e apresentação do banner inicial. A escolha entre as imagens horizontal e vertical é feita pelo elemento picture em index.html.
*/
/* ==========================================================
   HERO
========================================================== */

/* Aplica as declarações abaixo a .hero. */
.hero{

    /* Espaço interno; dois valores indicam vertical/horizontal e quatro indicam cima/direita/baixo/esquerda. */
    padding:30px 0;

}

/* Aplica as declarações abaixo a .hero-banner. */
.hero-banner{

    /* Largura desejada; porcentagens dependem do espaço disponível no contêiner. */
    width:100%;

    /* Define a organização do elemento: flex alinha itens, grid cria colunas, block ocupa uma linha e none remove do layout. */
    display:block;

    /* Arredondamento dos cantos; 50% pode criar um círculo em elementos quadrados. */
    border-radius:24px;

    /* Sombra externa: deslocamentos, desfoque e cor criam a sensação de profundidade. */
    box-shadow:0 18px 40px rgba(0,0,0,.12);

}