:root {
  /* Use width:var(--container-width) and margin-left:auto + margin-right:auto when a section/article child container element is available */
  --container-width: 90vw;

  /* Use padding:var(--container-gutter) and width:100% when a section/article child container element is not available */
  --container-gutter: 5vw;

  --gutter-width: 8px;
  --gutter-1x: var(--gutter-width);
  --gutter-2x: calc(var(--gutter-width) * 2);
  --gutter-3x: calc(var(--gutter-width) * 3);
  --gutter-4x: calc(var(--gutter-width) * 4);
  --gutter-5x: calc(var(--gutter-width) * 5);
  --gutter-6x: calc(var(--gutter-width) * 6);
  --gutter-7x: calc(var(--gutter-width) * 7);
  --gutter-8x: calc(var(--gutter-width) * 8);
  --gutter-9x: calc(var(--gutter-width) * 9);
  --gutter-10x: calc(var(--gutter-width) * 10);
  --gutter-11x: calc(var(--gutter-width) * 11);
  --gutter-12x: calc(var(--gutter-width) * 12);
  --whitespace: 3.5rem;
}

:where(content-container, [container]) {
  display: block;
  width: var(--container-width);
  margin-inline: auto;
}

:where([container-padding]) { padding-inline: var(--container-gutter); }

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

main {
  flex-grow: 1;
}

main > section,
main > article {
  padding-top: var(--whitespace);
  padding-bottom: var(--whitespace);
}

@media (max-width: 799px) {
  .hidden-sm { display: none !important; }
}

@media (min-width: 800px) {
  :root {
    --container-width: 720px;
    --container-gutter: calc((100vw - var(--container-width)) / 2);
    --whitespace: 4.5rem;
  }
}

@media (min-width: 800px) and (max-width: 1066px) {
  .hidden-md { display: none !important; }
}

@media (min-width: 1067px) {
  :root {
    --container-width: 960px;
    --container-gutter: calc((100vw - var(--container-width)) / 2);
  }

  .hidden-lg { display: none !important; }
}

@media (min-width: 1200px) {
  :root {
    --container-width: 1080px;
    --container-gutter: calc((100vw - var(--container-width)) / 2);
  }
}