/**
 * @file
 * Default styles for the page builder gallery row type
 */

/** Thumbnail preview in paragraph display **/

/* @TODO: Make this less specific (aka more themeable/abstract) */
.rw-paragraph--gallery-row .field--name-field-image-ref-multi {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  display: var(--rw-display--grid);
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  /* grid-gap: var(--rw-gutter, 32px); */
  /*margin: 0 -16px;*/
  gap: 1rem;
}

.rw-paragraph--gallery-row .field--name-field-image-ref-multi > .field--item {
  /*-webkit-box-flex: 0;
  -ms-flex: 0 1 170px;
      flex: 0 1 170px;
      margin: 16px;*/
  aspect-ratio: 16 / 9;
  overflow: hidden;

   img {
    width: 100%;
    height: 100%;
    object-fit: cover;
   }
}

@supports not (display: flex) {
  .rw-paragraph--gallery-row .field--name-field-image-ref-multi {
    float: left;
    margin: 0 var(--rw-gutter, 32px);
  }
  .rw-paragraph--gallery-row .field--name-field-image-ref-multi .field--item {
    max-width: 180px;
  }
}