/* https://css-tricks.com/an-auto-filling-css-grid-with-max-columns/ */
[data-grid=photo-gallery] {
  --grid-column-gap: 15px;
  --grid-row-gap: 20px;
  --grid-column-count: 5;
  --grid-item--min-width: 200px;
}
[data-grid=photo-gallery] .grid-item {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  cursor: pointer;
}
[data-grid=photo-gallery] .grid-item:hover, [data-grid=photo-gallery] .grid-item:focus-visible {
  -webkit-transform: scale(1.04);
          transform: scale(1.04);
}
[data-grid=photo-gallery] .grid-item img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* https://css-tricks.com/an-auto-filling-css-grid-with-max-columns/ */
[data-grid] {
  /**
   * User input values.
   */
  /**
   * Calculated values.
   */
  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-column-gap));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
  grid-gap: var(--grid-row-gap) var(--grid-column-gap);
}/*# sourceMappingURL=grids.css.map */