$columns: (
  1: 100%,
  2: 50%,
  3: 33.33%,
  4: 25%,
  5: 20%,
  6: 16.66%,
  7: 14.28%,
  8: 12.5%,
  9: 11.11%
);

.gallery {
  margin-bottom: 1.5rem;
}

.gallery-item {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  margin-bottom: $global-margin;
  text-align: center;

  // Loops to enumerate the classes for gallery columns.
  @for $i from 2 through 9 {
    .gallery-columns-#{$i} & {
      max-width: map-get($columns, $i);
    }
  }
}

.gallery-caption {
  display: block;
}