@layer type {
  :root {
    --font-family: "Manrope", sans-serif;
    --font-optical-sizing: auto;
    --font-weight: 400;
    --font-style: normal;
    --font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 0, "ROND" 0;
    --font-size: 16px;

    --line-height: 1.5;
  }

  @font-face {
    font-style: normal;
    font-weight: 400;
    src: url("/fonts/Manrope-Regular.woff2") format("woff2");
    font-family: "Manrope";
    font-display: swap;
  }

  @font-face {
    font-style: normal;
    font-weight: 600;
    src: url("/fonts/Manrope-SemiBold.woff2") format("woff2");
    font-family: "Manrope";
    font-display: swap;
  }

  @font-face {
    font-style: normal;
    font-weight: 200;
    src: url("/fonts/Manrope-Light.woff2") format("woff2");
    font-family: "Manrope";
    font-display: swap;
  }

  html {
    font-style: var(--font-style);
    font-weight: var(--font-weight);
    font-size: var(--font-size);
    font-family: var(--font-family);
    font-optical-sizing: var(--font-optical-sizing);
    font-variation-settings: var(--font-variation-settings);
    text-wrap: pretty;

    > * {
      text-box: trim-both cap;
    }
  }

  :is(p, li) {
    line-height: var(--line-height);

    &:not(:last-child) {
      margin-bottom: 1em;

      @media (max-width: 600px) {
        margin-bottom: 0.5em;
      }
    }
  }

  :is(h2, h3, h4, h5, h6) {
    margin-bottom: 0.5em;
    line-height: 1;
    text-wrap: balance;

    &:not(:first-child) {
      margin-block-start: 1em;
    }
  }

  .body-lg {
    font-size: var(--body-lg);
  }
}