.About.PageContent {
  $width: 520px;
  padding-bottom: $unit-12x;

  section {
    display: flex;
    flex-direction: column;
    position: relative;
    gap: $unit-2x;
    z-index: 5;

    .Hero {
      position: absolute;
      width: 40vw;
      height: 80vh;
      right: -18vw;
      top: $unit-4x * -1;
      z-index: 1;
      background-image: var(--hero-gradient), url('/images/about-hero.jpg');

      @include breakpoint(tablet) {
        right: -14vw;
        width: 60vw;
      }

      @include breakpoint(phone) {
        right: $unit-2x * -1;
        width: 80vw;

        &::before {
          content: ' ';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: var(--hero-gradient-overlay);
          z-index: 3;
        }
      }
    }

    p {
      font-size: $font-medium;
      max-width: $width;
      line-height: 1.35;
      z-index: 2;
    }

    h2 {
      font-weight: $bold;
      font-size: $font-medium;
      margin: 0;
      max-width: $width;
      z-index: 2;
    }
  }
  .Links {
    display: grid;
    gap: $unit;
    margin: $unit-2x 0;
  }

  div.LinkItem {
    margin-top: $unit-2x;
  }

  .LinkItem {
    max-width: calc($width / 3 * 2);

    @include breakpoint(phone) {
      max-width: inherit;
      width: 100%;
    }
  }
}