:root {
  --font-fallback: Arial, Helvetica, sans-serif;
  --font-ballet: 'Ballet-Regular', var(--font-fallback);
  --font-baskerville: 'LibreBaskerville', var(--font-fallback);
  --font-neuehaas: 'NeueHaasGroteskText', var(--font-fallback);

  --font-ballet-l-sz: 4.125rem;
  --font-ballet-l-lh: calc(55/66);
  --font-ballet-l-ls: 0;

  --font-baskerville-s-sz: 0.75rem;
  --font-baskerville-s-lh: calc(16/12);
  --font-baskerville-s-ls: 0.05em;

  --font-neuehaas-xs-sz: 0.5rem;
  --font-neuehaas-xs-lh: calc(12/8);
  --font-neuehaas-xs-ls: 0.1em;

  --font-neuehaas-s-sz: 0.625rem;
  --font-neuehaas-s-lh: calc(16/10);
  --font-neuehaas-s-ls: 0.1em;

  --white-01: #ece8e2;
  --white-02: #f5f2ef;
  --grey-01: #e1dfda;
  --grey-02: #b3aea8;
  --dark-01: #31302e;

  --border: 0.5px solid;
  --blur: blur(0.3px);

  --grid-cols: 2;
  --grid-margin: 20px;
  --grid-gap: 40px;
  --grid-colw: calc((100vw - 2 * var(--grid-margin) - (var(--grid-cols) - 1) * var(--grid-gap)) / var(--grid-cols));

  --margin-top: 150px;

  --aspect: 4/4.5;
}
@media (min-width: 48em) {
  :root {
    --grid-cols: 8;
  }
}
@media (min-width: 80em) {
  :root {
    --grid-cols: 12;
  }
}
@media (min-width: 160em) {
  :root {
    --grid-cols: 24;
    --margin-top: 300px;
  }
}