/* Mobile scrollports reach the screen edge; padding belongs to the content.
   Use the same gutter as the adjacent article or directory heading. */
@media (max-width: 980px) and (orientation: portrait) {
  html[data-qc-mobile-page] body main.qc-place .city-story .city-story__images,
  html[data-qc-mobile-page] body main.qc-place .triptych,
  html[data-qc-mobile-page] body main.qc-place .elsewhere .elsewhere__list[role],
  html[data-qc-mobile-page] body :is(#places, #main-content) .about2-story .places2-list[aria-label] {
    --rail-inset: max(24px, var(--qc-mobile-gutter, 20px));
    box-sizing: border-box !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100vw !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-inline: calc(50% - 50vw) !important;
    padding-inline: var(--rail-inset) !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: none !important;
    scroll-snap-type: none !important;
    scroll-padding-inline: 0 !important;
    scroll-behavior: auto !important;
    overflow-anchor: none !important;
    touch-action: pan-x pan-y pinch-zoom !important;
    scrollbar-width: none !important;
  }
  html[data-qc-mobile-page] body main.qc-place .city-story .city-story__images,
  html[data-qc-mobile-page] body main.qc-place .triptych {
    --rail-inset: var(--qc-mobile-gutter, 20px);
  }
  html[data-qc-mobile-page] body main.qc-place .city-story .city-story__images > figure,
  html[data-qc-mobile-page] body main.qc-place .triptych > figure {
    flex: 0 0 78vw !important;
    width: 78vw !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-inline: 0 !important;
    scroll-snap-align: none !important;
  }
  html[data-qc-mobile-page] body main.qc-place .elsewhere .elsewhere__list > .elsewhere__card,
  html[data-qc-mobile-page] body :is(#places, #main-content) .about2-story .places2-list > .places2-card {
    box-sizing: border-box !important;
    flex: 0 0 min(300px, 78vw) !important;
    width: min(300px, 78vw) !important;
    min-width: 0 !important;
    max-width: min(300px, 78vw) !important;
    margin-inline: 0 !important;
    scroll-snap-align: none !important;
  }
}