/* Shared section/container widths, spacing and grids. Component composition remains with consumers. */
.fs-section {
  box-sizing: border-box;
  width: 100%;
  padding-inline: var(--fs-gutter);
}

.fs-section.max-w-narrow {
  max-width: min(100%, calc(var(--fs-container-narrow) + var(--fs-gutter) + var(--fs-gutter)));
}

.fs-section.max-w-standard,
.fs-section.max-w-wide {
  max-width: min(100%, calc(var(--fs-container-site) + var(--fs-gutter) + var(--fs-gutter)));
}

.fs-section.pt-6 {
  padding-top: var(--fs-space-6);
}

.fs-section.pb-6 {
  padding-bottom: var(--fs-space-6);
}

.fs-section.pt-10 {
  padding-top: var(--fs-space-10);
}

.fs-section.pb-10 {
  padding-bottom: var(--fs-space-10);
}

.fs-section.pt-12 {
  padding-top: var(--fs-space-12);
}

.fs-section.pb-12 {
  padding-bottom: var(--fs-space-12);
}

.fs-section.pt-16 {
  padding-top: clamp(3rem, 6vw, var(--fs-space-16));
}

.fs-section.pb-16 {
  padding-bottom: clamp(3rem, 6vw, var(--fs-space-16));
}

.fs-section.pt-24 {
  padding-top: clamp(4rem, 8vw, var(--fs-space-24));
}

.fs-section.pb-24 {
  padding-bottom: clamp(4rem, 8vw, var(--fs-space-24));
}

.fs-section.mt-16 {
  margin-top: clamp(3rem, 6vw, var(--fs-space-16));
}

.max-w-narrow {
  max-width: var(--fs-container-narrow);
}

.max-w-standard {
  max-width: var(--fs-container-default);
}

.max-w-wide {
  max-width: var(--fs-container-wide);
}

.max-w-full {
  max-width: var(--fs-container-full);
}

.fs-layout-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--fs-grid-column-gap);
  row-gap: var(--fs-grid-row-gap);
  align-items: start;
}

.fs-layout-grid > * {
  min-width: 0;
}

.content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fs-space-6);
  margin-top: var(--fs-space-12);
  align-items: stretch;
}

.content-grid:empty {
  display: none;
}

@media (min-width: 64rem) {
  .fs-layout-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
@media (min-width: 64rem) {
  .content-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 48rem) and (max-width: 63.999rem) {
  .fs-layout-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}
@media (min-width: 48rem) and (max-width: 63.999rem) {
  .content-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}