.hero,
.hero > * {
  min-width: 0;
}

@media (max-width: 800px) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .hero-footer {
    width: 100%;
    align-items: stretch;
  }

  .hero-footer p {
    width: 100%;
    max-width: 100%;
  }

  .hero-footer .arrow-link {
    align-self: flex-start;
  }
}