/* TABLET */
@media (max-width: 1024px) {
  section {
    padding: 4rem 2rem;
  }

  .hero {
    grid-template-columns: 1fr;
  }

  .hero-left {
    padding: 6rem 2rem;
  }

}

/* MOBILE */
@media (max-width: 600px) {
  nav ul {
    display: none;
    /* we’ll replace with menu later */
  }

  .hero-title {
    font-size: 2rem;
  }

  .services-header {
    grid-template-columns: 1fr;

    gap: 2rem;

    padding: 0;

    margin-bottom: 3rem;
  }

  .services-intro {
    padding-left: 0;
    padding-top: 0;

    max-width: 100%;

    font-size: 0.9rem;
    line-height: 2;
  }

  .services-headline {
    font-size: 3.5rem;
    line-height: 1;
  }
}