@layer pages {
  @scope (.hero) {
    position: relative;
    width: 100%;
    height: 70dvh;

    padding-left: 32px;
    padding-right: 32px;

    @media(width >= 768px) {
      padding-left: 10%;
      padding-right: 10%;
    }

    &::before {
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(to bottom, oklch(22.645% 0.0000 89.88) 25.00%, oklch(23.267% 0.0041 308.27) 32.14%, oklch(24.837% 0.0166 312.87) 39.29%, oklch(27.472% 0.0321 312.53) 46.43%, oklch(30.685% 0.0542 312.89) 53.57%, oklch(33.301% 0.0677 312.52) 60.71%, oklch(34.903% 0.0777 312.56) 67.86%, oklch(35.518% 0.0807 312.22) 75.00%);
      filter: url(#grain);
      clip-path: inset(0);
      content: '';
    }

    .hero-inner {
      height: 100%;
      width: 100%;
      position: relative;
      display: flex;
      justify-content: center;
    }

    .grain {
      position: fixed;
    }

    .background-overlay {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      opacity: 0.2;
      mix-blend-mode: plus-lighter;
    }

    .portrait-overlay {
      position: absolute;
      width: 100%;
      height: 100%;
      flex: 1 1 100%;
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      max-width: 1282px;
    }

    .portrait {
      position: relative;
      width: auto;

      height: 60%;
      @media (width >= 1024px) {
        height: 75%;
      }
    }

    .content {
      position: absolute;
      width: 100%;
      height: 100%;
      flex: 1 1 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      max-width: 1282px;

      padding-right: 30%;

      @media (width >= 1024px) {
        padding-right: 20%;
      }
    }

    .content-inner {
      & > p {
        font-size: 1.125rem;
      }

      & > * + * {
        margin-top: 1rem;
      }
    }

    .heading {
      color: oklch(83% 0.13 96);
      line-height: 1;
      font-family: 'Chakra Petch', sans-serif;
      font-weight: 600;
      font-style: normal;

      font-size: 2.5rem;
      @media (width >= 1024px) {
        font-size: 4.5rem;
      }
    }
  }
}