/* ========================================================================
   layout.css — Layout y grid responsive 3-2-1
   ======================================================================== */

/* Contenedores */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--espacio);
}

/* Grid para regiones y noticias */
.grid-regiones,
.grid-noticias {
  display: grid;
  gap: var(--espacio);
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
  .grid-regiones,
  .grid-noticias {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .grid-regiones,
  .grid-noticias {
    grid-template-columns: 1fr;
  }
}