@layer utilities {
  .fx      { display: flex; }
  .fx-col  { flex-direction: column; }
  .fx-wrap { flex-wrap: wrap; }
  .centro  { align-items: center; }
  .entre   { justify-content: space-between; }

  .g-1 { gap: var(--e-1); }
  .g-2 { gap: var(--e-2); }
  .g-3 { gap: var(--e-3); }
  .g-4 { gap: var(--e-4); }
  .g-6 { gap: var(--e-6); }
  .g-8 { gap: var(--e-8); }

  .p-2 { padding: var(--e-2); }
  .p-4 { padding: var(--e-4); }
  .p-6 { padding: var(--e-6); }

  .mt-2  { margin-block-start: var(--e-2); }
  .mt-4  { margin-block-start: var(--e-4); }
  .mt-6  { margin-block-start: var(--e-6); }
  .mt-8  { margin-block-start: var(--e-8); }
  .mt-12 { margin-block-start: var(--e-12); }

  .t-sm  { font-size: var(--t-sm); }
  .t-lg  { font-size: var(--t-lg); }
  .t-xl  { font-size: var(--t-xl); }
  .t-2xl { font-size: var(--t-2xl); }

  .suave { color: var(--cor-texto-suave); }

  .oculto { display: none; }

  .container {
    width: min(100% - var(--e-8), 1200px);
    margin-inline: auto;
  }
}