@layer componentes {
  #entendi,
  #aviso,
  .entendi,
  .aviso {
    min-height: 1.4em;
    margin: 0 0 var(--espaco-4);
  }

  #aviso,
  .aviso {
    padding: var(--espaco-4);
    border: var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    background: var(--cor-aviso);
  }

  #aviso-seguranca,
  .aviso--seguranca {
    margin: var(--espaco-1-6) 0 0;
    padding: var(--espaco-2-8);
    border: var(--borda);
    border-radius: var(--raio-sm);
    background: var(--cor-aviso);
  }

  .aviso--dica,
  .aviso--adulto {
    margin: 0;
    padding: var(--espaco-3);
    border: var(--borda-largura-fina) solid var(--cor-borda);
    border-radius: var(--raio-1);
  }

  .aviso--dica {
    background: var(--cor-aviso);
  }

  .aviso--adulto {
    background: var(--cor-aviso-adulto);
  }

  @media (max-width: 699px) {
    #entendi,
    #aviso,
    .entendi,
    .aviso {
      margin-bottom: var(--espaco-2-2);
    }
  }
}