@layer base {  
  body {
    color: var(--color-grey-800);
    font-size: 16px;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  
    @media (max-width: 639.98px) {
      line-height: 1.4;
    }
  }
  
  a {
    text-decoration: none;
  
    &:hover {
      text-decoration: underline;
    }
  
    &.action {
      color: var(--color-primary);
    }
  
    &.danger {
      color: var(--color-red-darker);
    }
  
    .no-decoration:hover {
      text-decoration: none;
    }
  }
  
  .paragraph {
    font-size: 1.5rem;
    line-height: 1.6;
    width: 96.66%;
    max-width: 480px;
  
    @media (max-width: 1439.98px) {
      font-size: 1.438rem;
    }
  
    @media (max-width: 1199.98px) {
      font-size: 1.375rem;
    }
  
    @media (max-width: 991.98px) {
      font-size: 1.25rem;
    }
  }
  
  .paragraph-sm {
    font-size: 1.25rem;
    line-height: 1.5;
  
    @media (max-width: 991.98px) {
      font-size: 1.125rem;
    }
  
    @media (max-width: 639.98px) {
      font-size: 1rem;
      line-height: 1.4;
    }
  }
  
  li {
    margin-bottom: 0.5rem;
  
    @media (max-width: 639.98px) {
      margin-bottom: 0.375rem;
    }
  }
  
  small {
    display: inline-block;
    font-size: 0.8rem;
    line-height: 1.4;
  
    @media (max-width: 639.98px) {
      font-size: 0.75rem;
    }
  }
  
  /* Links */
  .text-link {
    color: var(--color-primary);
  }
  
  /* Pseudo Links used in StimulusJS */
  .pseudo-link {
    font-size: 1.25rem;
    line-height: 1.4;
    color: var(--color-primary);
  
    &:hover {
      text-decoration: underline;
    }
  }
  
  /* Headings */
  h1, h2, h3, h4 {
    color: var(--color-grey-900);
    font-weight: 400;
    line-height: 1.125;
    margin: 0;
    text-rendering: geometricPrecision;
  }
  
  h1 {
    letter-spacing: -0.066rem;
  
    @media screen and (min-width: 320px) /* fluid typography min */ {
      font-size: calc(30px + 4 * ((100vw - 320px) / 680));
    }
  
    @media screen and (min-width: 1680px) /* fluid typography max */ {
      font-size: 40px;
    }
  }
  
  h2 {
    @media screen and (min-width: 320px) /* fluid typography min */ {
      font-size: calc(24px + 4 * ((100vw - 320px) / 680));
    }
  
    @media screen and (min-width: 1680px) /* fluid typography max */ {
      font-size: 32px;
    }
  }
  
  h3 {
    @media screen and (min-width: 320px) /* fluid typography min */ {
      font-size: calc(20px + 2 * ((100vw - 320px) / 680));
    }
  
    @media screen and (min-width: 1680px) /* fluid typography max */ {
      font-size: 24px;
    }
  }
  
  h4 {
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-rendering: optimizeLegibility;
    text-transform: uppercase;
  
    @media (max-width: 639.98px) {
      font-size: 0.813rem;
    }
  }
  
  /* Display */
  .display-1,
  .display-2 {
    line-height: 1.1;
    text-rendering: geometricPrecision;
  }
  
  .display-1 {
    color: var(--color-primary);
    font-weight: 500;
    letter-spacing: -0.066rem;
  
    @media screen and (min-width: 320px) /* fluid typography min */ {
      font-size: calc(36px + 12 * ((100vw - 320px) / 680));
    }
  
    @media screen and (min-width: 1680px) /* fluid typography max */ {
      font-size: 60px;
    }
  }
  
  .display-2 {
    font-weight: 400;
  
    @media screen and (min-width: 320px) /* fluid typography min */ {
      font-size: calc(24px + 8 * ((100vw - 320px) / 680));
    }
  
    @media screen and (min-width: 1680px) /* fluid typography max */ {
      font-size: 40px;
    }
  }
  
  .subtitle {
    color: var(--color-grey-600);
    display: block;
    font-size: 1rem;
    margin-top: 0.5rem;
  
    @media (max-width: 639.98px) {
      font-size: 0.938rem;
    }
  }
  
  /* Unordered lists */
  .list-styled {
    margin: 0;
    padding: 0;
  
    li {
      background: url("/assets/bullet-bd52f3b9.svg") 0 0.563rem no-repeat;
      background-size: 0.375rem 0.375rem;
      list-style: none;
      margin: 0;
      margin-bottom: 0.5rem;
      padding-left: 1.25rem;
    }
  }
  
  .list-unstyled {
    margin: 0;
    padding: 0;
  
    li {
      list-style: none;
      margin-bottom: 0.5rem;
      padding-right: 1rem;
  
      a {
        display: block;
      }
    }
  }
  
  .list-unstyled-2 {
    margin: 0;
    padding: 0;
  
    li {
      list-style: none;
      margin-bottom: 0.5rem;
      padding-right: 1rem;
    }
  }
}