/* Basis-stijl */
.auto-layout {
  width: 80%;
  margin: auto;
  box-sizing: border-box;
  padding: 0.5rem;
}

/* -------------------------
   GRID-LAYOUT (cards
   
   ------------------------- */
.auto-layout.layout-grid {
  display: grid;
  /* automatisch aantal kolommen afhankelijk van schermbreedte.
     minmax zorgt dat kolommen niet kleiner worden dan 220px. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:1.5rem;
}

.auto-layout.layout-grid-pf {
  display: grid;
  /* automatisch aantal kolommen afhankelijk van schermbreedte.
     minmax zorgt dat kolommen niet kleiner worden dan 220px. */
 grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
 /* max-width: 1200px; /* 3 kolommen x 400px bijv. */
 gap:4px;
}

.auto-layout.layout-grid .item {
  border-radius: 8px;
  /* padding: 0.5rem; */
  /* background: #fff; */
  /* box-shadow: 0 1px 2px rgba(0,0,0,0.04); */
}

/* -------------------------
   COLUMNS-LAYOUT (tekstkolommen)
   ------------------------- */
.auto-layout.layout-columns {
  /* column-width geeft aan vanaf welke breedte een extra kolom gemaakt wordt */
  column-width: 260px;
  column-gap: 1.25rem;
  /* optioneel: voorkom dat koppen en blokken opgesplitst worden */
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  column-break-inside: avoid;
}

.auto-layout.layout-columns .item {
  display: inline-block; /* zodat elke .item als blok in de flow blijft */
  width: 100%;
  margin: 0 0 1rem;      /* afstand tussen items verticaal */
  padding: 0;
  background: transparent; /* geen kaart-achtergrond bij kolommen (optioneel) */
}

.auto-layout.layout-columns .item h3 {
  margin-top: 0;
}

/* Kleine extra responsive tweaks */
@media (max-width: 768px) {
  .auto-layout.layout-grid {
    grid-template-columns: 1fr; /* mobiele weergave: één kolom */
	
  }
  .auto-layout.layout-columns {
    column-width: 100%; /* mobiele weergave: kolommen stapelen */
  }

}