/* Venue pages: one hero photo, then any extras in a horizontal strip.
   The page used to render every photo full-width and stacked, which pushed a
   venue's address and hours below several screens of images -- Intuit Art
   Museum and Elephant Room each supplied ten. */

.cxw-place-photo-caption {
  font-family: Abcrom, Arial, sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 20px;
  opacity: .5;
}

.cxw-place-photo-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  margin-top: 12px;
  padding-bottom: 10px;
  /* Snapping makes a trackpad flick land on an image edge rather than
     halfway through one. */
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.cxw-place-photo-strip-item {
  flex: 0 0 auto;
  margin: 0;
  scroll-snap-align: start;
  max-width: 80%;
}

/* 170px rather than something taller on purpose: at ~220px exactly two
   landscape photos filled the column, so a venue with ten looked like a venue
   with two and nothing signalled that the row scrolled. At this height the
   next image peeks past the edge, which is the affordance. */
.cxw-place-photo-strip-item img {
  display: block;
  height: 170px;
  width: auto;
  max-width: 100%;
  object-fit: cover;
}

.cxw-place-photo-strip-item figcaption {
  font-family: Abcrom, Arial, sans-serif;
  font-size: 13px;
  font-weight: 300;
  line-height: 17px;
  opacity: .5;
  margin-top: 6px;
  max-width: 320px;
}

@media screen and (max-width: 767px) {
  .cxw-place-photo-strip-item img { height: 150px; }
}