@media (max-width: 900px) {
  .hero-container {
    display: block;
  }
  .hero-image {
    /* width: 50%; */
    /* display: flex;
    justify-content: center; */
    padding: 100px;
  }
}

@media (max-height: 500px) {
  h1 {
    font-size: 4rem;
  }
}

@media (max-width: 500px) {
  .logo {
    font-size: 2rem;
  }
  h1 {
    font-size: 4rem;
  }
  footer > .container {
    display: flex;
    flex-direction: column-reverse;
    gap: 1rem;
  }
}