/*
 * marquee gallery
 */


body { overflow-x: hidden; }

.marquee {
  /* break out of the text column so the strip runs edge to edge */
  width: 100vw;
  margin: 40px 0 40px calc(50% - 50vw);
  overflow: hidden;
}

.marquee-track {
  display: flex;
  flex-wrap: nowrap;          /* always one line, also on mobile */
  width: max-content;
  animation: marquee-scroll 60s linear infinite;
}

.marquee-item {
  flex: 0 0 auto;
  padding-right: 16px;        /* padding (not gap) keeps the loop seamless */
}

.marquee-item img {
  display: block;
  /*height: 220px;*/
  height: 420px;
  /*width: 330px;*/
  width: 560px;
  object-fit: cover;
  filter: grayscale(50%);    /* forces B&W even if the source is colour */
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }  /* the set is duplicated, so -50% = one full set */
}

@media (max-width: 600px) {
  .marquee-item { padding-right: 10px; }
  /*.marquee-item img { height: 140px; width: 210px; }*/
  .marquee-item img { height: 220px; width: 330px; }
  .marquee-track { animation-duration: 45s; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation-duration: 240s; }
}