.hero {
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--new-orange);

  .hero-inner {
    background:
      linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)),
      url("../../assets/images/hero.jpg");
    background-size: 100% 100%;
    background-position: 39% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    height: 550px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .hero-title {
    font-family: "Playfair Display", serif;
    font-size: 2.25rem;
    margin: 19rem 0 0 0;
    display: inline-block;
  }

  .ampersand-wrap {
    position: relative;
    display: inline-block;
    line-height: 1;

    .ampersand {
      font-family: serif;
      font-weight: 400;
      color: var(--new-orange-2);
      z-index: 1;
      font-size: 220px;
      opacity: 0.63;
      display: block;
      line-height: 1;
    }

    .her,
    .him {
      font-family: "MonteCarlo", cursive;
      font-size: 50px;
      position: absolute;
      z-index: 2;
      background: transparent;
      font-weight: 400;
      color: var(--bg);
      padding: 0.05rem 0.4rem;
      border-radius: 6px;
      pointer-events: none;
      white-space: nowrap;
    }

    .her {
      top: 22%;
      left: -34%;
      transform: translate(-8%, -8%);
    }

    .him {
      bottom: 22%;
      right: -34%;
      transform: translate(8%, 8%);
    }
  }

  .hero-image-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    width: 100%;
    overflow: hidden;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

@media (min-width: 768px) {
  .hero {
    background-size: 100% 100%;
    min-height: 0;
    background-color: var(--bg);

    .hero-inner {
      height: 750px;

      .hero-title {
        margin: 28rem 0 0 0;
      }
      .ampersand-wrap {
        .ampersand {
          font-size: 300px;
        }

        .her,
        .him {
          font-size: 4rem;
        }

        .her {
          top: 18%;
          left: -38%;
        }

        .him {
          bottom: 18%;
          right: -34%;
        }
      }
    }
  }
}

@media screen and (min-width: 1921px) {
  .hero-inner {
    height: 800px;
  }
}