.section-card-panels-grid {
  --mobile-columns: var(--mobile-columns, 1);
  --tablet-columns: var(--tablet-columns, 2);
  --desktop-columns: var(--desktop-columns, 4);

  display: grid;
  grid-template-columns: repeat(var(--mobile-columns), minmax(0, 1fr));
  gap: var(--space-32) var(--space-4);

  @media (min-width: 768px) {
    grid-template-columns: repeat(var(--tablet-columns), minmax(0, 1fr));
  }

  @media (min-width: 1200px) {
    grid-template-columns: repeat(var(--desktop-columns), minmax(0, 1fr));
  }
}