.image-wrapper,
.gallery-sizer {
  width: 25%;
}

.gallery {

  display: block;

  .image-wrapper {
    float: left;
    padding: 3px;

    // hack required if no padding
    .image {
      width: 100.1%;
      width: calc( 100% + 1px );
      height: 100%;
    }
  }

  &:after {
    content: '';
    display: block;
    clear: both;
  }
}

.caption {
  position: static;
  color: #AAA;
}

.gallery-3-col {
  display: grid;
  grid-gap: 0.5em;
  align-items: stretch;
  justify-items: center;

  @include breakpoint($small) {
    grid-template-columns: repeat(3, 1fr);
  }

  caption {
    width: 100%;
    grid-column: 1 / -1;
  }
}

.gallery-4-col {
  display: grid;
  grid-gap: 0.5em;
  align-items: stretch;
  justify-items: center;

  @include breakpoint($small) {
    grid-template-columns: repeat(4, 1fr);
  }

  caption {
    width: 100%;
    grid-column: 1 / -1;
  }
}

.gallery-4-col-unjustified {
  display: grid;
  grid-gap: 0.5em;
  align-items: stretch;

  @include breakpoint($small) {
    grid-template-columns: repeat(4, 1fr);
  }

  caption {
    width: 100%;
    grid-column: 1 / -1;
  }
}

.gallery-3-col-unjustified {
  display: grid;
  grid-gap: 0.5em;
  align-items: stretch;

  @include breakpoint($small) {
    grid-template-columns: repeat(3, 1fr);
  }

  caption {
    width: 100%;
    grid-column: 1 / -1;
  }
}

.grid,
.grid-sizer {
  width: 25%;
}

.grid {

  max-width: 1200px;

  .grid-item {
    float: left;
    width: 320px;
    padding: 3px;

    // hack required if no padding
    .thumb {
      width: 100.1%;
      width: calc( 100% + 1px );
      height: 100%;
    }
  }

  &:after {
    content: '';
    display: block;
    clear: both;
  }
}

.list-unstyled {
  padding: 0px!important;
  margin: 0px!important;
  list-style: none;
}

.gallery-2-col {
  display: grid;
  grid-gap: 0.5em;
  align-items: stretch;
  justify-items: center;

  @include breakpoint($small) {
    grid-template-columns: repeat(2, 1fr);
  }

  caption {
    width: 100%;
    grid-column: 1 / -1;
  }
}

.gallery-2-col-unjustified {
  display: grid;
  grid-gap: 0.5em;
  align-items: stretch;

  @include breakpoint($small) {
    grid-template-columns: repeat(2, 1fr);
  }

  caption {
    width: 100%;
    grid-column: 1 / -1;
  }
}
// Vertical Gallery

.gallery-vertical {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;

  @include breakpoint($large) {
    flex-wrap: wrap;
    overflow-x: inherit;
  }

  .gallery-image {
    padding: 0 1em 1em 1em;
    max-width: ($small - ($small * 0.25 + 0px));
    flex-shrink: 0;

    @include breakpoint($medium) {
      max-width: ($medium - ($medium * 0.45 + 0px));
    }

    @include breakpoint($large) {
      max-width: ($large - ($large * 0.5 + 0px));
      flex-shrink: 1;
      flex-basis: calc(100% / 3);
    }

    img {
      display: block;
      width: 100%;
      border-radius: 3px;
    }
  }
}

// Thumbnail Gallery

.gallery-thumbnails {
  display: grid;
  grid-gap: 0.5em;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  padding-left: 0; // reset

  li {
    float: left;
    width: 100px;
    margin: 0.25em;
    list-style: none;

    @supports (display: grid) {
      margin: 0;
    }

    a {
      display: block;
    }

    img {
      width: 100%;
      height: auto;
      min-height: 100px;
      border-radius: 3px;
    }
  }
}

.gallery-image{
  width: 219px!important;
  height: 165px!important;
}