@layer styles {
  @font-face {
    font-family: 'EB Garamond';
    src: url('/assets/fonts/EBGaramond-Italic-Variable-latin-ext.woff2')
      format('woff2');
    font-weight: 400 800;
    font-style: italic;
    font-display: swap;
    unicode-range:
      U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
      U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
      U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }

  @font-face {
    font-family: 'EB Garamond';
    src: url('/assets/fonts/EBGaramond-Italic-Variable-latin.woff2')
      format('woff2');
    font-weight: 400 800;
    font-style: italic;
    font-display: swap;
    unicode-range:
      U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
      U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
      U+2212, U+2215, U+FEFF, U+FFFD;
  }

  @font-face {
    font-family: 'EB Garamond';
    src: url('/assets/fonts/EBGaramond-Variable-latin-ext.woff2')
      format('woff2');
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
    unicode-range:
      U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
      U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
      U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }

  @font-face {
    font-family: 'EB Garamond';
    src: url('/assets/fonts/EBGaramond-Variable-latin.woff2') format('woff2');
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
    unicode-range:
      U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
      U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
      U+2212, U+2215, U+FEFF, U+FFFD;
  }

  :root {
    --color--background: #f3ede4;
    --color--text: #003d20;

    --border-radius: 0.25rem;

    --space--small: 1rem;
    --space: 1.5rem;
    --space--medium: 3rem;
    --space--large: 5rem;
    --space--extra-large: 10rem;

    --space-from-heading--1: var(--space--small);

    --page-side-padding: clamp(var(--space), 3vw, var(--space--large));

    --font: 'EB Garamond', Georgia, 'Times New Roman', serif;
    --font--heading: var(--font);
  }
  @media (min-width: 1380px) {
    :root {
      --page-side-padding: 0;
    }
  }

  .heading {
    color: var(--section__color);
    font-family: var(--font--heading);
    font-size: var(--font-size);
    font-weight: 400;
    letter-spacing: 0.03em;
  }

  .heading--1 {
    --font-size: clamp(2.8rem, 6vw, 3.5rem);

    max-width: 35ch;
  }

  .heading--2 {
    --font-size: clamp(1.625rem, 2.5vw, 1.875rem);
    max-width: 42ch;
  }

  .heading--1 + p {
    margin-top: var(--space-from-heading--1);
  }

  .heading--2 + p {
    margin-top: 0.5rem;
  }

  .heading--3 + p,
  .heading--4 + p {
    margin-top: 0.4rem;
  }

  p + .heading {
    margin-top: var(--space);
  }

  .ingress {
    font-size: clamp(1.5rem, 2.5vw, 1.75rem);
    line-height: 1.4;
  }

  .button {
    display: inline-block;
    padding: 0.7rem 1.4rem;
    border: 0;
    border-radius: var(--border-radius);
    background: var(--color--text);
    color: var(--color--background);
    font: inherit;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  }

  .button:focus-visible {
    outline: 2px solid var(--color--text);
    outline-offset: 2px;
  }

  .button-block {
    text-align: center;
  }

  .link {
    color: inherit;
    text-decoration: none;
  }

  .link:hover {
    text-decoration: underline;
  }

  .strong {
    font-weight: 700;
    letter-spacing: 0.02em;
  }
}