.hero {
  display: grid;
  align-items: center;
  height: auto;
  min-height: max(620px, calc(100dvh - 106px));
}

.hero > img {
  position: absolute;
  inset: 0;
}

.hero-copy {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  width: min(650px, 86vw);
  margin-left: 7vw;
  padding: 72px 0;
}

.menu-button span {
  transition: transform .2s, opacity .2s;
}

@media (max-width: 720px) {
  .hero {
    align-items: end;
    height: auto;
    min-height: max(570px, calc(100dvh - 90px));
  }

  .hero-copy {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    margin: 0;
    padding: 56px 22px 70px;
    align-self: end;
  }

  .menu-button:not([aria-expanded="true"]) {
    grid-auto-rows: 1px;
    align-content: center;
    gap: 7px;
  }

  .menu-button[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .menu-button[aria-expanded="true"] span:first-child {
    transform: rotate(45deg);
  }

  .menu-button[aria-expanded="true"] span:last-child {
    transform: rotate(-45deg);
  }
}