/* Homepage: drie smaakmomenten (ochtend, middag, avond) op zwart, gelijke kaarten, één reserveerknop. */
.momenten {
  background-color: var(--dark);
  color: var(--light);
  padding: var(--space-2xl) var(--space-m);
}
.momenten__binnen { width: var(--max-screen-width); max-width: 100%; margin: 0 auto; text-align: center; }
.momenten__tagline { margin: 0 0 .6rem; font-weight: 600; color: var(--primary); }
.momenten__kop { font-family: "Bearmen"; font-size: var(--text-2xl); color: var(--secondary); margin: 0 0 var(--space-xs); }
.momenten__intro { margin: 0 auto var(--space-l); max-width: 54rem; color: var(--light-80); }

.momenten__lijst {
  list-style: none;
  margin: 0 0 var(--space-l);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-s);
  text-align: left;
}
.moment {
  background-color: var(--base);
  border: 1px solid var(--light-10);
  border-radius: var(--radius-m);
  overflow: hidden;
}
.moment__foto { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.moment__tekst { padding: var(--space-s) var(--space-m) var(--space-m); }
.moment__wanneer {
  margin: 0 0 .4rem;
  font-size: 1.3rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
}
.moment__titel { font-family: "Bearmen"; font-size: var(--text-l); color: var(--secondary); margin: 0 0 .4rem; }
.moment__omschrijving { margin: 0; color: var(--light-80); }
.momenten__knop { display: inline-block; }

@media (max-width: 767px) {
  /* kaarten naast elkaar om te vegen */
  .momenten__lijst {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--space-m);
    margin: 0 calc(var(--space-m) * -1) var(--space-l);
    padding: 0 var(--space-m) .6rem;
    scrollbar-width: none;
  }
  .momenten__lijst::-webkit-scrollbar { display: none; }
  .moment { scroll-snap-align: start; }
}