.hero {
  position: relative;
  padding: var(--spacing-lg) var(--spacing-lr);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md)
}

.hero h1, .hero p {
  max-width: 52%;
}

.pond-graphic {
  position: absolute;
  height: 110svh;
  z-index: -1;
  right: -25svw;
  top: -10rem;
}

.otter-graphic {
  position: absolute;
  width: 27svw;
  max-width: 350px;
  z-index: -1;
  right: 10svw;
  top: 2rem;
}


@media (max-width: 1000px) {
    .hero h1 {
      margin-top: 5svh;
    }

      .pond-graphic {
        height: 90svh;
        right: -27svw;
        top: -25svh;
      }

    .otter-graphic {
          max-width: 300px;
    }

}

@media (max-width: 600px) {

    .hero h1, .hero p {
      max-width: 70%;
    }
    .pond-graphic {
        height: 60svh;
        top: -15svh;
    }

    .otter-graphic {
        top: 0;
    }
}