.section-grid__grid {
  display: grid;
  padding-top: var(--spacing-md, 24px);
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
  grid-template-columns: 1fr;
}

/* ── Storybook Grid Variants ────────────────────────── */

.section-grid__grid--1 {
  grid-template-columns: 1fr;
}

.section-grid__grid--2 {
  grid-template-columns: 1fr 1fr;
}

.section-grid__grid--3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.section-grid__grid--4 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* ── Drupal Paragraph Variants ─────────────────────── */

.section-grid--1-columns .section-grid__grid {
  grid-template-columns: 1fr;
}

.section-grid--2-columns .section-grid__grid {
  grid-template-columns: 1fr 1fr;
}

.section-grid--3-columns .section-grid__grid {
  grid-template-columns: 1fr 1fr 1fr;
}

.section-grid--4-columns .section-grid__grid {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.section-grid__column {
  min-width: 0;
}

/* ── Responsive ────────────────────────────────────── */

@media (max-width: 1024px) {
  .section-grid__grid--4 {
    grid-template-columns: 1fr 1fr;
  }

  .section-grid--4-columns .section-grid__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .section-grid__grid--2,
  .section-grid__grid--3,
  .section-grid__grid--4 {
    grid-template-columns: 1fr;
  }

  .section-grid--2-columns .section-grid__grid,
  .section-grid--3-columns .section-grid__grid,
  .section-grid--4-columns .section-grid__grid {
    grid-template-columns: 1fr;
  }
}