body {
  display: flex;
  flex-direction: column;
  align-items: start;
}

header,
main,
footer {
  inline-size: 100%;
}

.container {
  margin-inline: auto;
  inline-size: 100%;
  padding-inline: 2rem;
  padding-block: 1rem;
  position: relative;
  max-inline-size: 1376px;
}

.variant-controls {
  select {
    color: var(--qgds-color-text-default, black);
    background-color: var(--qgds-color-background, white);
  }
}

main > section {
  margin-inline: auto;
  inline-size: 100%;
  position: relative;

  & > div {
    max-inline-size: 1376px;
    margin-inline: auto;
    padding-inline: 2rem;
    border: 2px solid transparent;
    position: relative;
    padding-block: 3rem;
    margin-block: 2rem;

    .variant-controls {
      display: none;
      font-size: 0.75rem;
      position: absolute;
      inset-block-start: 0.5rem;
      inset-inline-end: 0.5rem;
      z-index: 10;
      background: var(--qgds-color-background, white);
      padding: 0.3rem;

      select {
        border-radius: 4px;
        border: 1px solid var(--qgds-color-border, #666);
      }
    }

    &:hover {
      border: 2px dashed var(--qgds-color-border, #666);

      .variant-controls {
        display: block;
      }
    }
  }
}

header {
  border-block-end: 3px solid var(--qgds-color-border, black);
  padding-block: 1rem;

  .container {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
  }
}

main {
  padding-block-end: 4rem;
  display: flex;
  flex-direction: column;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

[data-columns="2"] {
  grid-template-columns: repeat(2, 1fr);
}

[data-columns="3"] {
  grid-template-columns: repeat(3, 1fr);
}

[data-columns="4"] {
  grid-template-columns: repeat(4, 1fr);
}

[data-columns="5"] {
  grid-template-columns: repeat(5, 1fr);
}

[data-columns="6"] {
  grid-template-columns: repeat(6, 1fr);
}

[data-columns="7"] {
  grid-template-columns: repeat(7, 1fr);
}

[data-columns="8"] {
  grid-template-columns: repeat(8, 1fr);
}

[data-columns="9"] {
  grid-template-columns: repeat(9, 1fr);
}

[data-columns="10"] {
  grid-template-columns: repeat(10, 1fr);
}

[data-columns="11"] {
  grid-template-columns: repeat(11, 1fr);
}

[data-columns="12"] {
  grid-template-columns: repeat(12, 1fr);
}

/* Highlight sections with duplicate palette classes */

/* First section with immediately adjacent matching sibling - remove bottom margin */
section.qgds-palette-default:has(+ section.qgds-palette-default),
section.qgds-palette-soft:has(+ section.qgds-palette-soft),
section.qgds-palette-muted:has(+ section.qgds-palette-muted),
section.qgds-palette-bold:has(+ section.qgds-palette-bold),
section.qgds-palette-deep:has(+ section.qgds-palette-deep) {
  & > .component-container {
    margin-block-end: 0;
  }
}

/* Immediately adjacent sibling with matching class - remove top margin */
section.qgds-palette-default + section.qgds-palette-default,
section.qgds-palette-soft + section.qgds-palette-soft,
section.qgds-palette-muted + section.qgds-palette-muted,
section.qgds-palette-bold + section.qgds-palette-bold,
section.qgds-palette-deep + section.qgds-palette-deep {
  & > .component-container {
    margin-block-start: 0;
  }
}