:root {
  --outer-gutter: 0.75rem;
  --grid-gutter: 1.5rem;
  --grid-divider-gutter: calc(calc(var(--grid-gutter) / 2) * -1 );
}
@media screen and (min-width: 992px) {
  :root {
    --outer-gutter: 1.5rem;
  }
}
@media screen and (min-width: 1200px) {
  :root {
    --outer-space: 18.05vw;
  }
}
@media screen and (min-width: 1600px) {
  :root {
    --outer-space: 260px;
  }
}
:root {
  --font-serif-display: Georgia, Times, Times New Roman, serif;
  --font-serif-text: Georgia, Times, Times New Roman, serif;
  --font-sans-grotesk: system-ui, Arial, Helvetica Neue, Helvetica, sans-serif;
}

html:not([data-unsafe]) {
  --font-serif-display: "Serif Display", Georgia, Times, Times New Roman, serif;
  --font-serif-text: "Serif Text", Georgia, Times, Times New Roman, serif;
  --font-sans-grotesk: "Sans Grotesk", system-ui, Arial, Helvetica Neue, Helvetica, sans-serif;
}

.landing-intro {
  --intro-height: calc(100dvh - 70px);
  min-height: var(--intro-height);
}
@media screen and (min-width: 600px) {
  .landing-intro {
    --intro-height: auto;
  }
}

[data-ref=introduction] {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
@media screen and (min-width: 740px) {
  [data-ref=introduction] {
    width: auto;
    max-width: 50dvw;
  }
}
@media screen and (min-width: 740px) {
  [data-ref=introduction] {
    top: 0;
    bottom: auto;
    left: 0;
    max-width: 55dvw;
  }
}
@media screen and (min-width: 992px) {
  [data-ref=introduction] {
    top: 25%;
    left: 10%;
    max-width: 40dvw;
  }
}
@media screen and (min-width: 1280px) {
  [data-ref=introduction] {
    max-width: 30dvw;
  }
}