main {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 5rem;
}

.main-section {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 2.5rem;
}

.section-header {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.section-content {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2.5rem;
}

.planner-outline-container {
  position: sticky;
  top: var(--layout-header-height);
}

.planner-summary {
  order: 0;
}

.planner-actions {
  order: 1000;
}

.semester-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 2.5rem;
}

.semester-header {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0.5rem;
}

.semester-start-date {
  display: none;
  font-size: 1.4rem;
  font-family: var(--font-montserrat-alternates);
  color: var(--color-black);
}

.semester-actions {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 2.5rem;
}

.semester-modules {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2.5rem;
}

/* media queries always use default font-size (16px) to calculate `rem`, so here 60.75 rem equals 972px */
@media only screen and (width < 60.75rem) {
  :root {
    --header-spacer-display: none;
  }

  .planner-timeline-container {
    display: none;
  }

  .semester-start-date {
    display: block;
  }
}

/* media queries always use default font-size (16px) to calculate `rem`, so here 40 rem equals 640px */
@media only screen and (width < 40rem) {
  .section-content {
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 2.5rem;
  }

  .semester-actions {
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 2.5rem;
  }
}

/* media queries always use default font-size (16px) to calculate `rem`, so here 31.25 rem equals 500px */
@media only screen and (width < 31.25rem) {
  .planner-outline-container {
    display: none;
  }
}