@media (max-width: 1024px) {
  .mockup.side {
    max-width: 140px;
  }
  .mockup.center {
    max-width: 160px;
  }
  .navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
  }
  .overview {
    padding: 3rem 1.5rem;
  }
  .problem-goal {
    padding: 3rem 1.5rem;
  }
  .user-research {
    padding: 3rem 1.5rem;
  }
  .insights {
    padding: 3rem 1.5rem;
  }
  .persona {
    padding: 3rem 1.5rem;
  }

  .info-architecture,
  .conceptualization,
  .solution {
    padding: 3rem 1.5rem;
  }
  .feedback {
    padding: 3rem 1.5rem;
  }
  .learning {
    padding: 3rem 1.5rem;
  }
  .whats-next {
    padding: 3rem 1.5rem;
  }
  .prototype {
    padding: 3rem 1.5rem;
  }

  .info-box {
    grid-template-columns: repeat(2, 1fr);
  }
  .overview .problem-goal .user-research {
    padding: 3rem 3rem;
  }
  .insight-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .persona-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .feedback-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .learning-grid {
    grid-template-columns: 1fr;
  }

  .next-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}