Sass

gallery.scss

@function gallery_column($width: 1680px)
  @return round($width/$gallery_width)
@function gallery_width($width: 1680px)
  @return ($width - $padding_menu) / $gallery_gutter / gallery_column($width) * 1px
@function image_padding($width: 1680px)
  @return gallery_width($width) - (gallery_width($width) / $gallery_gutter)
$class-slug: gallerySlide !default

.gallery
  @each $media_query in $queries
    @media screen and (max-width: $media_query)
      @for $i from 1 through gallery_column($media_query)/1px
        .#{$class-slug}-#{$i}
          width: gallery_width($media_query) * $i - image_padding()

.galleryWidth
  width: gallery_width()px
  @each $media_query in $queries
    @media screen and (max-width: $media_query)
      width: gallery_width($media_query)

.gallerySlide
  position: relative
  float: left
  width: gallery_width() - image_padding()
  margin: 0 image_padding() image_padding() 0
  img
    width: 100%
    height: 100%
  @each $media_query in $queries
    @media screen and (max-width: $media_query)
      margin: 0 image_padding($media_query) image_padding($media_query) 0
      width: gallery_width($media_query) - image_padding($media_query)