/* Opt-in column coordinates. Frames control width; applications place items. */
.su-layout {
  --su-layout-gutter: var(--space-gap);
  --su-layout-padding-inline: var(--space-page-x);

  box-sizing: border-box;
  container-name: support-layout;
  container-type: inline-size;
  padding-inline: var(--su-layout-padding-inline);
}

.su-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--su-layout-gutter);
}

@container support-layout (min-width: 48rem) {
  .su-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

@container support-layout (min-width: 75rem) {
  .su-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}