@media (max-width: 620px) {
  .contact-sheet,
  .route-grid,
  .services-strip,
  .photo-band {
    position: relative;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    width: 100%;
    max-width: 100%;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
  }

  .contact-sheet::-webkit-scrollbar,
  .route-grid::-webkit-scrollbar,
  .services-strip::-webkit-scrollbar,
  .photo-band::-webkit-scrollbar {
    display: none;
  }

  .contact-sheet.is-dragging,
  .route-grid.is-dragging,
  .services-strip.is-dragging,
  .photo-band.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
  }

  .contact-sheet > *,
  .route-grid > *,
  .services-strip > *,
  .photo-band > * {
    flex-shrink: 0 !important;
  }

  .photo-band > figure {
    flex-basis: 84% !important;
    width: 84%;
  }

  .route-grid > .route {
    flex-basis: 86% !important;
    width: 86%;
  }

  .services-strip > .service-chip {
    flex-basis: 68% !important;
    width: 68%;
  }

  .contact-sheet > .photo-tile {
    flex-basis: 84% !important;
    width: 84%;
  }

  .contact-sheet > .photo-tile:nth-child(2),
  .contact-sheet > .photo-tile:nth-child(3) {
    flex-basis: 68% !important;
    width: 68%;
  }
}

@media (max-width: 360px) {
  .photo-band > figure,
  .route-grid > .route,
  .contact-sheet > .photo-tile {
    flex-basis: 90% !important;
    width: 90%;
  }

  .services-strip > .service-chip {
    flex-basis: 82% !important;
    width: 82%;
  }
}