<commit_before>// IMAGE GALLERY
// --------------
// This provides a component for a responsive image gallery, that uses Flexbox.
// Each gallery instance will take up the full available width,
// and scale the image thumbnails accordingly.
// Can be used with figures and figcaptions, or with images enclosed in DIVs.

.gallery {
  display: flex;
  flex-wrap: wrap;
}

.gallery div:first-child {
}

.gallery div {
  margin: 0;
  margin: 0.5rem auto;
}

.gallery img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 130px;
  cursor: -webkit-zoom-in;
}<commit_msg>Refactor image gallery component ================================<commit_after>// IMAGE GALLERY
// --------------
// A responsive image gallery component using CSS grid layout.
//
// * Each gallery instance takes up the full available width;
// * Images are arranged into a responsive grid of thumbnails;
// * Combines nicely with a lightbox plugin;
// * Use with figures + figcaptions, or with plain images;
// * Default of 4 columns can be changed with the "data-columns" attribute.

.gallery {
  // Let the magic begin...
  display: grid;

  // Centre everything
  justify-content: center;
  justify-items: center;

  // align-content: center;
  // align-items: center;

  // Give us four columns by default...
  grid-template-columns: repeat(4, auto);
}

// ...unless the column count is specified like so:
// <div class="gallery" data-columns="3">
@for $i from 1 through 12 {
  .gallery[data-columns="#{$i}"] {
    grid-template-columns: repeat($i, auto);
  }
}

.gallery > img,
.gallery > figure,
.gallery > div {
  // On mobile, each image spans all columns
  grid-column: 1 / -1;

  @include bp(md) {
    grid-column: auto / auto;
  }

  padding: 0.5rem;
  margin: 0;
}

.gallery img {
  width: auto;
  margin: 0;

  // This would make them all the same height.
  // May be more aesthetically pleasing, but wouldn’t be as robust
  // at handling different sizes and aspect ratios...

  // max-height: 150px;

  // Thumbnails should be links to fullsize versions / trigger lightbox
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}
{'fraction_non_alphanumeric': 0.14508506616257089, 'fraction_numerical': 0.011342155009451797, 'mean_word_length': 2.898710865561694, 'pattern_counts': {'":': 0, '<': 4, '<?xml version=': 0, '>': 7, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5421414', 'n_tokens_mistral': 693, 'n_tokens_neox': 638, 'n_words': 247}