Using list elements with negative margins

li_block_gallery.scss

img {
  display: block;
  max-width: 100%;
}

.gallery {
  ul {
    @extend .cfx;
    list-style: none;
    margin: -.25em;
    padding: 0;
}

li {
    @include box-sizing(border-box);
    float: left;
    padding: .25em;
    width: 25%;

    @media (min-width: $media-tablet + 1) and (max-width: $media-desktop) {
        width: 33.33%;
    }

    @media (max-width: $media-tablet) {
        width: 50%;
    }

  }
}