.hero {
  grid-column: full-start / full-end;
  position: relative;
  height: 100%;
  min-height: calc(100svh - var(--nav-height));
  font-family: var(--font-fun);
  color: var(--color-light);
  font-size: 2.5rem;
  line-height: 1;

  @media (min-width: 768px) {
    font-size: 4rem;
    max-width: 600px;
    margin: 0 auto;
  }

  .overlay {
    display: grid;
    gap: var(--sp-md);
    align-content: end;
    justify-content: start;
    padding: 0 0 var(--sp-md) var(--sp-md);

    @media (min-width: 768px) {
      font-size: 3rem;
      padding: var(--sp-lg) 0 var(--sp-lg) var(--sp-lg);
    }
  }

  img {
    height: 100%;
  }
}