/* Quatro larguras. Mobile primeiro — o site nasce em 390 e cresce. */
:root{
  --bp-sm:390px;   /* piso real: iPhone SE 3a / 13 mini */
  --bp-md:600px;   /* phone paisagem / tablet retrato */
  --bp-lg:900px;   /* tablet paisagem */
  --bp-xl:1200px;  /* desktop */

  --margem-lateral:20px; /* @kind spacing */
  --container:min(1120px, 100% - 2 * var(--margem-lateral)); /* @kind spacing */
  --colunas:4; /* @kind other */
}
@media (min-width:600px){ :root{ --margem-lateral:32px; /* @kind spacing */ --colunas:8; /* @kind other */ } }
@media (min-width:900px){ :root{ --margem-lateral:44px; /* @kind spacing */ --colunas:12; /* @kind other */ } }
@media (min-width:1200px){ :root{ --margem-lateral:56px; /* @kind spacing */ } }