@scope (.legal-page) {
  :scope {
    padding-block: 6.5rem 6em;
  }

  .mwdth {
    max-width: 1600px;
    margin-inline: auto;
  }

  .gutter-inside {
    padding-inline: 4vw;
  }

  .headline-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1em;
  }

  h1 {
    margin: 0;
    color: var(--color-blue);
    font-size: 2em;
    font-weight: 500;
  }

  .back-link {
    display: flex;
    align-items: center;
    gap: 0.4em;
    color: var(--color-blue);
    font-size: 1em;
    text-decoration: underline;
  }

  .back-link .icon {
    width: 0.9em;
    height: 0.9em;
  }

  .rich-text h2 {
    margin-top: 2em;
    margin-bottom: 0.4em;
    color: var(--color-blue);
    font-size: 1.1em;
    font-weight: 600;
  }

  .rich-text h3 {
    margin-top: 2em;
    margin-bottom: 0.4em;
    color: var(--color-blue);
    font-size: 1em;
    font-weight: 500;
  }

  .rich-text p {
    margin: 0 0 1em;
    font-size: 0.9em;
    font-weight: 400;
  }

  .rich-text a {
    color: var(--color-blue);
    text-decoration: underline;
  }

  @media (width <= 767px) {
    :scope {
      padding-block: 5.5rem 4em;
    }

    h1 {
      font-size: 1.6em;
    }

    .rich-text h2 {
      font-size: 1em;
    }

    .rich-text h3,
    .back-link {
      font-size: 0.8em;
    }

    .rich-text p {
      font-size: 0.8em;
    }
  }

  @media (width <= 479px) {
    h1 {
      font-size: 1.4em;
    }
  }
}