.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.container--wide {
  max-width: var(--container-wide);
  padding-inline: var(--space-md);
}

section {
  padding-block: var(--space-xl);
}

.section--alt {
  background-color: var(--color-bg-alt);
}

.divider {
  width: 60px;
  height: 2px;
  background-color: var(--color-accent);
  margin-block: var(--space-sm);
}

.divider--center {
  margin-inline: auto;
}

/* Grid Layouts */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-sm);
}

/* Masonry-ähnliches Grid für Galerien */
.gallery-grid {
  columns: 3;
  column-gap: var(--space-sm);
}

.gallery-grid__item {
  break-inside: avoid;
  margin-bottom: var(--space-sm);
}

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

@media (max-width: 768px) {
  .container { padding-inline: var(--space-sm); }
  section { padding-block: var(--space-lg); }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .gallery-grid { columns: 1; }
}
