@media (min-width: 981px) {
  .hero {
    position: relative;
    min-height: 610px;
    overflow: hidden;
    padding: 0;
    background: #f7fbfa;
  }

  .hero-grid {
    min-height: 610px;
    grid-template-columns: minmax(0, 1fr) minmax(430px, .95fr);
    gap: 64px;
    align-items: center;
  }

  .hero-copy {
    position: relative;
    z-index: 2;
    max-width: 610px;
    padding: 68px 0 72px;
  }

  .hero-copy h1 span {
    display: inline;
  }

  .hero-media {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50vw;
    min-height: 0;
    border-radius: 0;
    overflow: hidden;
    background: #dfeceb;
  }

  .hero-media > img {
    width: 100%;
    height: 100%;
    min-height: 610px;
    object-fit: cover;
    object-position: center;
  }

  .hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(90deg,
        #f7fbfa 0%,
        rgba(247, 251, 250, .96) 7%,
        rgba(247, 251, 250, .72) 15%,
        rgba(247, 251, 250, .28) 25%,
        rgba(247, 251, 250, 0) 38%),
      linear-gradient(180deg,
        rgba(9, 37, 35, 0) 62%,
        rgba(9, 37, 35, .10) 100%);
    pointer-events: none;
  }

  .hero-actions {
    position: relative;
    z-index: 2;
  }

  .hero-features {
    position: relative;
    z-index: 2;
    max-width: 590px;
  }
}