@media (max-width: 900px) {
  .site-header,
  .site-footer {
    align-items: flex-start;
    flex-direction: column;
  }
  .site-nav {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .hero-grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .service-strip,
  .tour-grid,
  .tour-selected-detail,
  .tour-home-layout,
  .dashboard-shell {
    grid-template-columns: 1fr;
  }
  .hero-media {
    min-height: 280px;
    justify-items: center;
  }
  .dashboard-sidebar {
    position: static;
  }
}

@media (max-width: 620px) {
  .search-box {
    grid-template-columns: 1fr;
  }
  .search-box .field-wide {
    grid-column: auto;
  }
  .live-trip-stats {
    grid-template-columns: 1fr;
  }
  .panel-head,
  .production-panel,
  .page-intro-single {
    align-items: flex-start;
    flex-direction: column;
  }
  .actions {
    flex-direction: column;
  }
  .btn {
    width: 100%;
  }
  h1 {
    font-size: 42px;
  }
}