body {
  height: auto;
  background: var(--oc-semantic-color-frame-background);
  color: var(--oc-semantic-color-text-default);
  font: var(--oc-semantic-font-copy-100);
  margin: 0;
}

section {
  margin-bottom: 4rem;
}

.page {
  max-width: 1400px;
  margin: auto;
  padding: 2rem;
}

.auto-grid {
  --column-width: 200px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--column-width), 1fr));
  gap: 1rem;
  align-content: center;
}

.auto-grid > * {
  justify-self: center;
}

.grid {
  --column-count: 1;
  display: grid;
  grid-template-columns: repeat(var(--column-count), 1fr);
  gap: 1rem;
}

.grid[data-columns="2"] {
  --column-count: 2;
}

.grid[data-columns="3"] {
  --column-count: 3;
}

.grid[data-columns="4"] {
  --column-count: 4;
}

.grid[data-columns="5"] {
  --column-count: 5;
}

/* For testing: Give all components a margin to discover changes to the display style of our custom elements. */
/* Please add new components to the list below. */
oc-accordion-v1,
oc-auth-field-v1,
oc-badge-v1,
oc-banner-v1,
oc-button-v1,
oc-card-v2,
oc-card-v3,
oc-carousel-v1,
oc-cinema-v1,
oc-checkbox-v1,
oc-checkbox-v2,
oc-dropdown-v1,
oc-energy-label-v1,
oc-expander-v1,
oc-form-group-v1,
oc-icon-v1,
oc-icon-button-v3,
oc-interactive-overlay-v1,
oc-interactive-overlay-v2,
oc-logo-v1,
oc-paper-card-v1,
oc-promo-card-v1,
oc-promo-card-v2,
oc-radio-button-v1,
oc-radio-button-v2,
oc-selection-tile-v1,
oc-selection-tile-v2,
oc-switch-v2,
oc-switch-v3,
  /* oc-tag-v1 margin would break the layout in the promo break */
oc-text-area-v1,
oc-text-field-v1 {
  margin: 5px;
}

.grid[data-columns="6"] {
  --column-count: 6;
}

/* when a section is targeted by a hash in the URL, hide all other sections */
body:has(section:target) section:not(:target) {
  display: none;
}

section[id] > h2 {
  cursor: pointer;
}