/*==================================================
TABLET
Breakpoint : 992px
==================================================*/

@media (max-width: 992px) {
  /*==============================
    GRID
    ==============================*/

  .hero-grid,
  .home-grid,
  .learning-timeline,
  .pillar-grid,
  .environment-grid,
  .parent-grid,
  .footer-grid,
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  /*==============================
    HERO
    ==============================*/

  .hero {
    text-align: center;
  }

  .hero-description {
    margin-inline: auto;

    max-width: 700px;
  }

  .hero-buttons {
    justify-content: center;
  }

  .hero-visual {
    margin-top: 60px;
  }

  /*==============================
    WHY
    ==============================*/

  .why-item {
    flex-direction: column;

    align-items: flex-start;
  }

  /*==============================
    TIMELINE
    ==============================*/

  .learning-timeline::before {
    display: none;
  }

  /*==============================
    CTA
    ==============================*/

  .cta-buttons {
    justify-content: center;
  }

  /*==============================
    FOOTER
    ==============================*/

  .footer-grid {
    gap: 48px;
  }
}