.page-hero {
  padding: 30px 30px 0;

  @media (max-width:1680px) {
    padding: 20px 20px 0;
  }

  @media (max-width:1440px) {
    padding: 16px 16px 0;
  }

  @media (max-width:1024px) {
    padding: 0;
  }

  .page-hero-wrap {
    position: relative;
    overflow: hidden;

    figure {
      position: relative;
      margin: 0;
      min-height: 420px;

      @media (max-width:1680px) {
        min-height: 380px;
      }

      @media (max-width:1440px) {
        min-height: 340px;
      }

      @media (max-width:1280px) {
        min-height: 300px;
      }

      @media (max-width:1024px) {
        height: 60vh;
        min-height: 260px;
      }

      @media (max-width:768px) {
        height: 50vh;
      }

      @media (max-width:576px) {
        height: 42vh;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      &:before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.15) 0%,
            rgba(0, 0, 0, 0.20) 40%,
            rgba(0, 0, 0, 0.35) 100%);
        z-index: 1;
      }
    }

    .container-wide {
      position: absolute;
      left: 0;
      right: 0;
      top: 70%;
      transform: translateY(-50%);
      z-index: 2;

      @media (max-width:1280px) {
        padding: 0 20px;
      }

      @media (max-width:1024px) {
        top: 50%;
        text-align: center;
      }

      @media (max-width:576px) {
        padding: 0 16px;
      }
    }

    h1 {
      margin: 0;
      max-width: 70%;
      color: var(--color-white);
      font-family: var(--font-family-georgian), sans-serif;
      font-weight: 400;
      line-height: var(--line-height-tight);
      font-size: var(--font-size-2xl);

      @media (max-width:1280px) {
        max-width: 100%;
      }
    }
  }
}