@media(max-width:900px) {
  .main-nav {
    display: none
  }

  .nav-toggle {
    display: block
  }

  .desktop-dropdown {
    display: none
  }

  .hero-grid,
  .feature-grid,
  .course-detail,
  .form-wrap {
    grid-template-columns: 1fr
  }

  .hero-visual {
    max-width: 650px;
    margin: auto;
    width: 100%
  }

  .detail-side {
    position: static
  }

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

  .footer-grid {
    grid-template-columns: 1fr 1fr
  }

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

@media(max-width:650px) {
  .topbar-inner {
    justify-content: center
  }

  .topbar-inner span:last-child {
    display: none
  }

  .nav-wrap {
    min-height: 74px
  }

  .brand-copy strong {
    font-size: 19px
  }

  .brand-copy small {
    font-size: 6.5px
  }

  .brand-mark {
    width: 42px;
    height: 42px
  }

  .hero {
    padding: 58px 0 55px
  }

  .hero h1 {
    font-size: 44px;
    letter-spacing: -2.4px
  }

  .hero p {
    font-size: 15px
  }

  .hero-visual .hero-image {
    min-height: 300px
  }

  .float-one {
    left: 5px;
    bottom: 20px
  }

  .float-two {
    right: 5px;
    top: 20px
  }

  .section {
    padding: 60px 0
  }

  .page-hero {
    padding: 52px 0
  }

  .page-hero h1 {
    font-size: 40px
  }

  .stats,
  .course-grid,
  .feature-list,
  .journey,
  .review-grid,
  .blog-grid,
  .internship-grid,
  .form-row,
  .module-grid,
  .footer-grid {
    grid-template-columns: 1fr
  }

  .cta {
    display: block;
    padding: 60px
  }

  .cta h2 {
    font-size: 29px
  }

  .rating-panel {
    grid-template-columns: 1fr
  }

  .form-panel,
  .info-panel,
  .detail-main,
  .detail-side {
    padding: 22px
  }

  .mobile-drawer {
    width: min(350px, 91vw)
  }
}