config/themes/default/grunt/scss/modules/content/_gallery.scss
/* @group Gallery */
/* --------------------------------------------------------------
   MODULES: CONTENT / GALLERY
-------------------------------------------------------------- */

$inner_padding:20px;
$inner_padding_mobile:10px;

.gallery {
  display: inline-block;
  position: relative;
}

.gallery {
  display:block;

  ul {
    list-style: none;
    padding: 0 1px 1px 0;
    overflow: hidden;
    margin:0 auto;
  }

  li {
    float: left;

    a {
      display: block;
      margin: 0 -1px -1px 0;
      padding: $inner_padding;
      border-width:1px;
      border-color:$color-border-light;
      background:white;

      @include breakpoint(xsmall) {
        padding: $inner_padding_mobile;
      }

      p { color: inherit; }

      div.gallery_thumbnail {
        min-height:240px;
        display:table;
        background-color: inherit;
        width:100%;
      }

      div.gallery__inner {
        display:table-cell;
        vertical-align:middle;
      }

      div.custom { height: auto; }

      img {
        border:none;
        overflow:hidden;
        display:block;
        max-width:100%;
        height:auto;
        margin-left:auto;
        margin-right:auto;
      }
    }

    a:hover,
    a:focus {
      background-color:$color-hover;
    }

    a p {
      text-align:center;
      margin: 0;
      padding: 10px 0 0;
      @include ellipsis();

      @include breakpoint(small-and-down) {
        padding-bottom: 5px;
      }
    }
  }
}

.gallery {
  li {
    width:14.2857%;

    @include breakpoint(xxxlarge) {
      width:14.2857%;
    }

    @include breakpoint(xxlarge) {
      width:16.6666667%;
    }

    @include breakpoint(xlarge) {
      width:20%;
    }

    @include breakpoint(large) {
      width:25%;
    }

    @include breakpoint(medium) {
      width:33.333%;
    }

    @include breakpoint(small-and-down) {
      width:50%;
    }
  }
}

.gallery--fit {
  li {
    width:auto;

    @include breakpoint(xxxlarge) {
      width:auto;
    }

    @include breakpoint(xxlarge) {
      width:auto;
    }

    @include breakpoint(xlarge) {
      width:auto;
    }

    @include breakpoint(large) {
      width:auto;
    }

    @include breakpoint(medium) {
      width:auto;
    }

    @include breakpoint(small-and-down) {
      width:auto;
    }

    @include breakpoint(xsmall) {
      width:50%;
    }
  }
}

.gallery--masonry {
  display:block;
  padding: 0;
  overflow:hidden;

  ul {
    opacity:0;
    display:block;
    width:100%;
    overflow:visible;
    padding:0;
    margin:0 auto;
    padding-left:1px;
    padding-top:1px;
  }

  li {
    width:calc(14.2857% - 1px);

    @include breakpoint(xxxlarge) {
      width:calc(14.2857% - 1px);
    }

    @include breakpoint(xxlarge) {
      width:calc(16.6666667% - 1px);
    }

    @include breakpoint(xlarge) {
      width:calc(20% - 1px);
    }

    @include breakpoint(large) {
      width:calc(25% - 1px);
    }

    @include breakpoint(medium) {
      width:calc(33.333% - 1px);
    }

    @include breakpoint(small-and-down) {
      width:calc(50% - 1px);
    }

    a {
      margin:-1px 0 0 -1px;

      div.gallery_thumbnail {
        display:block;
        min-height:0;
      }

      img {
        width:100%;
      }

      div.gallery__inner {
        display:block;
      }
    }
  }

  ul.masoned__finished {
    opacity:1;
  }
}

/* @end */