/**
 * CSS for Views responsive grid style.
 */

.gallery__gallery {
  --gallery-responsive-grid--layout-gap: 10px;
  --gallery-responsive-grid--column-count: 8;
  --gallery-responsive-grid--cell-min-width: 250px;

  --gallery-responsive-grid--gap-count: calc(var(--gallery-responsive-grid--column-count) - 1);
  --gallery-responsive-grid--total-gap-width: calc(var(--gallery-responsive-grid--gap-count) * var(--gallery-responsive-grid--layout-gap));
  --gallery-responsive-grid-item--max-width: calc((100% - var(--gallery-responsive-grid--total-gap-width)) / var(--gallery-responsive-grid--column-count));
  --gallery-responsive-grid-item--calculated-min-width: min(100%, var(--gallery-responsive-grid--cell-min-width)); /* Ensure that cell minimum width does not overflow container. */

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--gallery-responsive-grid-item--calculated-min-width), var(--gallery-responsive-grid-item--max-width)), 1fr));
  gap: var(--gallery-responsive-grid--layout-gap);

  &.tobii-zoom {
    display: grid;
  }
}


.gallery-image {
  &:nth-child(1 of .gallery-image) {
    @media (width > 600px) {
      grid-column: span 2;
        grid-row: span 2;
    }
  }

  .tobii-zoom {
    display: flex;
    height: 100%;
  }

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

.tobii__slide[class] figure > figcaption {
  font-size: 20px;
  padding-block: var(--sp1);
}