@media (max-width: 900px) {

  .header {
    padding: 0 20px;
  }

  .header nav {
    display: none;
  }

  .hero {
    padding: 120px 20px 60px;
  }

  .section,
  .contact {
    padding: 80px 20px;
  }

  .card-list,
  .works-grid,
  .media-list,
  .blog-grid {
    grid-template-columns: 1fr;
  }

  .card {
    min-height: auto;
  }

  .card span {
    margin-bottom: 48px;
  }

  .portfolio-box,
  .project-box {
    grid-template-columns: 1fr;
    padding: 36px 24px;
  }

  .portfolio-box h3,
  .project-box h3 {
    font-size: 32px;
  }

  .single-article {
    padding: 110px 20px 80px;
  }
}