@media (max-width: 768px) {
  .main-cards {
    flex-direction: column;
  }
  .card {
    width: 300px;
    height: 215px;
  }

  #syllabus,
  #questions,
  #notes,
  #recommend {
    font-size: 15px;
  }

  .intro {
    margin-bottom: 50px;
  }

  .pages h2 {
    display: none;
  }

  .pages .menu {
    display: block;
    font-size: 7vw;
  }

  .syllabus-cards {
    flex-direction: column;
  }

  .sCard {
    width: 300px;
    height: 250px;
  }

  .heading {
    margin-bottom: 50px;
  }
}