@media (min-width: 600px) {
  .site-nav {
    padding-inline: 50px;
  }

  .nav-links span {
    display: inline;
  }
}

@media (min-width: 680px) {
  .hero {
    flex-direction: row;
    
  }

  .hero h1 {
    text-align: left;
  }

  .hero-description {
    max-width: 550px;
  }

  .hero-image {
    order: 1;
    flex: 1;
    max-width: 280px; 
  }
}

@media (min-width: 870px) {
  .projects-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
  }
}