:root {
  --non-battle-content-max: 1180px;
  --non-battle-reading-max: 72ch;
  --non-battle-gutter: clamp(12px, 3vw, 32px);
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

body > :is(header, main, footer),
main > :is(section, article, aside) {
  width: min(
    calc(100% - (2 * var(--non-battle-gutter))),
    var(--non-battle-content-max)
  );
  min-width: 0;
  margin-inline: auto;
}

:is(
  .hero,
  .intro,
  .notice,
  .section-block,
  .search-panel,
  .trust-section,
  .directory-layout,
  .issue,
  .bundle-card,
  .product-card,
  .gallery-empty,
  form,
  figure
) {
  max-width: 100%;
  min-width: 0;
  margin-inline: auto;
}

:is(
  .featured-grid,
  .trail-actions,
  .bundle-grid,
  .product-grid,
  .directory-layout,
  .gallery-grid
) {
  justify-content: center;
  justify-items: center;
}

:is(
  .featured-grid,
  .trail-actions,
  .bundle-grid,
  .product-grid,
  .directory-layout,
  .gallery-grid
) > * {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

:is(
  .actions,
  .button-row,
  .button-group,
  .cta-row,
  .flyer-dialog-actions,
  .primary-nav,
  header nav,
  footer nav,
  .locale-selector
) {
  justify-content: center;
}

:is(.button, .trail-button, button, [role="button"]) {
  max-width: 100%;
  margin-inline: auto;
}

:is(h1, h2, .kicker, .status-label, footer) {
  text-align: center;
}

:is(article, .legal-hero, .section-block, .hero, .intro, .notice)
  > :is(p, ul, ol, address) {
  max-width: var(--non-battle-reading-max);
  margin-inline: auto;
  text-align: left;
}

:is(label, input, select, textarea, address) {
  text-align: left;
}

img,
video,
iframe,
canvas,
figure {
  display: block;
  max-width: 100%;
  margin-inline: auto;
}

@media (max-width: 720px) {
  :root {
    --non-battle-gutter: 12px;
  }

  :is(
    .featured-grid,
    .trail-actions,
    .bundle-grid,
    .product-grid,
    .directory-layout,
    .gallery-grid
  ) {
    grid-template-columns: minmax(0, 1fr);
  }

  :is(
    .actions,
    .button-row,
    .button-group,
    .cta-row,
    .flyer-dialog-actions
  ) {
    align-items: center;
    justify-content: center;
  }
}

@media (min-width: 721px) and (max-width: 1024px) {
  :root {
    --non-battle-gutter: 20px;
  }

  :is(
    .featured-grid,
    .trail-actions,
    .bundle-grid,
    .product-grid,
    .directory-layout,
    .gallery-grid
  ) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}