WP Gallery Bootstrap styling

_gallery.scss

/* WP Gallery Bootstrap styling
-------------------------------------------------------------- */
.gallery {
  @include make-row();

  margin-right: -0.5rem;
  margin-left: -0.5rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;

  .gallery-item {
    @include make-col-ready();
    @include make-col(12);

    overflow: hidden;
    margin-bottom: 1rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    position: relative;

    img {
      display: block;
      height: auto;
      width: 100%;
    }
  }

  @include media-breakpoint-up(sm) {
    &.gallery-columns-2,
    &.gallery-columns-3,
    &.gallery-columns-4,
    &.gallery-columns-5,
    &.gallery-columns-6,
    &.gallery-columns-7,
    &.gallery-columns-8,
    &.gallery-columns-9 {
      .gallery-item {
        @include make-col(6);
      }
    }
  }

  @include media-breakpoint-up(md) {
    &.gallery-columns-3,
    &.gallery-columns-4,
    &.gallery-columns-5,
    &.gallery-columns-6,
    &.gallery-columns-7,
    &.gallery-columns-8,
    &.gallery-columns-9 {
      .gallery-item {
        @include make-col(4);
      }
    }
  }

  @include media-breakpoint-up(lg) {
    &.gallery-columns-4 .gallery-item {
      @include make-col(3);
    }

    &.gallery-columns-5 .gallery-item {
      @include make-col(1, 5);
    }

    &.gallery-columns-6 .gallery-item {
      @include make-col(2);
    }

    &.gallery-columns-7 .gallery-item {
      @include make-col(2, 14);
    }

    &.gallery-columns-8 .gallery-item {
      @include make-col(2, 16);
    }

    &.gallery-columns-9 .gallery-item {
      @include make-col(2, 18);
    }
  }
}