/* Breakpoints */
/* >=1200px is covered by base */

/* <= 1024px */
@media (max-width: 1024px) {
  .grid.three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* <= 768px */
@media (max-width: 768px) {
  .grid.two {
    grid-template-columns: 1fr;
  }
  .grid.three {
    grid-template-columns: 1fr;
  }
  .nav-links {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }
  .mobile-menu[hidden] {
    display: none;
  }
  .mobile-menu {
    display: flex;
  }
  .hero h1 {
    font-size: 2.25rem;
  }
  .cta {
    flex-direction: column;
    align-items: flex-start;
  }
  .newsletter-form {
    flex-direction: column;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* <= 480px */
@media (max-width: 480px) {
  .hero {
    min-height: 60vh;
  }
  .slider-btn {
    display: none;
  }
  .card-body {
    padding: 12px;
  }
}