/*
 * Compact 280 px video-gallery layout.
 *
 * These rules control only the displayed dimensions.
 * They do not reduce the encoded resolution or downloaded file size.
 */

/* Gallery grid for standalone and embedded galleries. */
.field--name-images.field__items,
.field--name-images > .field__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
  gap: 2px;
  justify-content: start;
  align-items: start;
  width: 100%;
}

/* Remove unnecessary spacing around each video. */
.field--name-images.field__items > .field__item,
.field--name-images > .field__items > .field__item {
  width: 100%;
  max-width: 280px;
  margin: 0;
  padding: 0;
}

/* Display each local video at no more than 280 px wide. */
.field--name-images video {
  display: block;
  width: 100% !important;
  max-width: 280px;
  height: auto !important;
  aspect-ratio: 16 / 9;
  margin: 0;
  border: 0;
  background: #000;
  object-fit: contain;
}

/* Remote-video support. */
.field--name-images iframe,
.field--name-images .media-oembed-content {
  display: block;
  width: 100% !important;
  max-width: 280px;
  aspect-ratio: 16 / 9;
  margin: 0;
  border: 0;
}

/* Use the full available width on narrow screens. */
@media (max-width: 600px) {
  .field--name-images.field__items,
  .field--name-images > .field__items {
    grid-template-columns: 1fr;
  }

  .field--name-images.field__items > .field__item,
  .field--name-images > .field__items > .field__item,
  .field--name-images video,
  .field--name-images iframe,
  .field--name-images .media-oembed-content {
    width: 100% !important;
    max-width: 100%;
  }
}