html > body > #grid > main.landing {
  /** Required arguments with purportedly ridiculous defaults */
  --element-gap-inline: 200px;
  --element-gap-block: 200px;
  --element-gap-between-features-and-paragraph: 200px;
  --element-color-lead: red;
  --element-heading-font: italic 100px "Comic Sans MS", cursive;;
  --element-heading-font-size: 200px;
  --element-heading-text-overlay: red;

  display: grid;
  grid-template-columns: subgrid;
  gap: 0 var(--element-gap-inline);

  > header {
    container-type: inline-size;
    container-name: landing-title;

    > h1 {
      pointer-events: none;
      font: var(--element-heading-font);
      font-size: max(var(--element-heading-font-size), 3.5vw);
      line-height: .85;
      background: var(--element-heading-text-overlay);
      background-clip: text;
      color: transparent;
      text-decoration-thickness: 1px;
    }

    @container landing-title (min-width: 0) {
      > h1 {
        font-size: calc(100cqw / 5.5);
      }
    }
  }

  > h2,
  > h3 {
    font-size: x-large;
  }

  > header > h2,
  > h3 {
    color: var(--element-color-lead);
  }

  > *:not(h2, h3),
  > .blocks + h3 {
    margin-top: var(--element-gap-block);
  }

  > article + ul.features,
  > ul.features + article {
    margin-top: var(--element-gap-between-features-and-paragraph);
  }

  > article {
    --element-gap: var(--element-gap-between-features-and-paragraph);
  }
}