Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

// ### imports ###

@import url(https://fonts.googleapis.com/css?family=Lato:400,300italic,300,400italic,700,700italic);

// ### Vars ###

// colors

$default-bg-color     : #F0F0F0;
$default-font-color   : #7C7C7C;
$white                : #FFFFFF;
$voxmedia             : #E77D24;
$voxdotcom            : #6F96A8;
$polygon              : #D10E54;
$theverge             : #FA4B2A;
$default-color        : #60BDAC;

// z-index scale

$z1:   1;
$z2:   2;
$z3:   3;
$z4:   4;
$z5:   5;
$z6:   6;
$z7:   7;
$z8:   8;
$z9:   9;
$z10: 10;

// fonts

$main: 'Lato', sans-serif;

// font size

$default-font-size    : .95rem;
$default-line-height  : (1.5rem/$default-font-size);

// breakpoints

$break-small:     42.5rem;
$break-medium:    67.5rem;
$break-large:     87.5rem;

// margin

$margin: .25%;

// ### Mixins ###

@mixin bp($size) {
  @if $size == big {
    @media (max-width: $break-large) { @content; }
  }
  @else if $size == medium {
    @media (max-width: $break-medium) { @content; }
  }
  @else if $size == small {
    @media (max-width: $break-small + 3)  { @content; }
  }
}

// ### Extends ###

%clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}





// ############## everything under here is what I want ############






.m-projects {
  margin-bottom: 3rem;
  @extend %clearfix;

  a {
    min-height: 195px;
    float: left;
    position: relative;
    margin: $margin;
    overflow: hidden;
    @include bp(small) {
      min-height: 165px;
    }

    @for $i from 1 through 21 {
      $minus: $margin*2;
      &:nth-child(#{$i}) {
        @if ($i == 1) or ($i == 12) or ($i == 18) {
          width: 100% - $minus;
        } @else if ($i == 2) or ($i == 11) or ($i == 17) {
          width: 75% - $minus;
          @include bp(small) {
            width: 100% - $minus;
          }
        } @else if ($i == 6) or ($i == 7) or ($i == 14) or ($i == 20) {
          width: 50% - $minus;
        } @else if $i == 21 {
          width: 25% - $minus;
          @include bp(small) {
            width: 100% - $minus;
          }
        } @else {
          width: 25% - $minus;
          @include bp(small) {
            width: 50% - $minus;
          }
        }

        div {
          background-image: image-url($i + '.jpg');
        }
      }
    }

    div {
      background-color: red;
      transition: opacity .5s;
      background-position: center center; 
      background-size: cover;
      position: absolute;
      height: 100%;
      width: 100%;
      transform-origin: top;
      transform: scale(1.2);

      &:hover {
        opacity: .8;
      }
    }
  }
}

SassMeister-output.css

@import url(https://fonts.googleapis.com/css?family=Lato:400,300italic,300,400italic,700,700italic);
.m-projects:after {
  content: "";
  display: table;
  clear: both;
}

.m-projects {
  margin-bottom: 3rem;
}

.m-projects a {
  min-height: 195px;
  float: left;
  position: relative;
  margin: 0.25%;
  overflow: hidden;
}

@media (max-width: 45.5rem) {
  .m-projects a {
    min-height: 165px;
  }
}

.m-projects a:nth-child(1) {
  width: 99.5%;
}

.m-projects a:nth-child(1) div {
  background-image: image-url("1.jpg");
}

.m-projects a:nth-child(2) {
  width: 74.5%;
}

@media (max-width: 45.5rem) {
  .m-projects a:nth-child(2) {
    width: 99.5%;
  }
}

.m-projects a:nth-child(2) div {
  background-image: image-url("2.jpg");
}

.m-projects a:nth-child(3) {
  width: 24.5%;
}

@media (max-width: 45.5rem) {
  .m-projects a:nth-child(3) {
    width: 49.5%;
  }
}

.m-projects a:nth-child(3) div {
  background-image: image-url("3.jpg");
}

.m-projects a:nth-child(4) {
  width: 24.5%;
}

@media (max-width: 45.5rem) {
  .m-projects a:nth-child(4) {
    width: 49.5%;
  }
}

.m-projects a:nth-child(4) div {
  background-image: image-url("4.jpg");
}

.m-projects a:nth-child(5) {
  width: 24.5%;
}

@media (max-width: 45.5rem) {
  .m-projects a:nth-child(5) {
    width: 49.5%;
  }
}

.m-projects a:nth-child(5) div {
  background-image: image-url("5.jpg");
}

.m-projects a:nth-child(6) {
  width: 49.5%;
}

.m-projects a:nth-child(6) div {
  background-image: image-url("6.jpg");
}

.m-projects a:nth-child(7) {
  width: 49.5%;
}

.m-projects a:nth-child(7) div {
  background-image: image-url("7.jpg");
}

.m-projects a:nth-child(8) {
  width: 24.5%;
}

@media (max-width: 45.5rem) {
  .m-projects a:nth-child(8) {
    width: 49.5%;
  }
}

.m-projects a:nth-child(8) div {
  background-image: image-url("8.jpg");
}

.m-projects a:nth-child(9) {
  width: 24.5%;
}

@media (max-width: 45.5rem) {
  .m-projects a:nth-child(9) {
    width: 49.5%;
  }
}

.m-projects a:nth-child(9) div {
  background-image: image-url("9.jpg");
}

.m-projects a:nth-child(10) {
  width: 24.5%;
}

@media (max-width: 45.5rem) {
  .m-projects a:nth-child(10) {
    width: 49.5%;
  }
}

.m-projects a:nth-child(10) div {
  background-image: image-url("10.jpg");
}

.m-projects a:nth-child(11) {
  width: 74.5%;
}

@media (max-width: 45.5rem) {
  .m-projects a:nth-child(11) {
    width: 99.5%;
  }
}

.m-projects a:nth-child(11) div {
  background-image: image-url("11.jpg");
}

.m-projects a:nth-child(12) {
  width: 99.5%;
}

.m-projects a:nth-child(12) div {
  background-image: image-url("12.jpg");
}

.m-projects a:nth-child(13) {
  width: 24.5%;
}

@media (max-width: 45.5rem) {
  .m-projects a:nth-child(13) {
    width: 49.5%;
  }
}

.m-projects a:nth-child(13) div {
  background-image: image-url("13.jpg");
}

.m-projects a:nth-child(14) {
  width: 49.5%;
}

.m-projects a:nth-child(14) div {
  background-image: image-url("14.jpg");
}

.m-projects a:nth-child(15) {
  width: 24.5%;
}

@media (max-width: 45.5rem) {
  .m-projects a:nth-child(15) {
    width: 49.5%;
  }
}

.m-projects a:nth-child(15) div {
  background-image: image-url("15.jpg");
}

.m-projects a:nth-child(16) {
  width: 24.5%;
}

@media (max-width: 45.5rem) {
  .m-projects a:nth-child(16) {
    width: 49.5%;
  }
}

.m-projects a:nth-child(16) div {
  background-image: image-url("16.jpg");
}

.m-projects a:nth-child(17) {
  width: 74.5%;
}

@media (max-width: 45.5rem) {
  .m-projects a:nth-child(17) {
    width: 99.5%;
  }
}

.m-projects a:nth-child(17) div {
  background-image: image-url("17.jpg");
}

.m-projects a:nth-child(18) {
  width: 99.5%;
}

.m-projects a:nth-child(18) div {
  background-image: image-url("18.jpg");
}

.m-projects a:nth-child(19) {
  width: 24.5%;
}

@media (max-width: 45.5rem) {
  .m-projects a:nth-child(19) {
    width: 49.5%;
  }
}

.m-projects a:nth-child(19) div {
  background-image: image-url("19.jpg");
}

.m-projects a:nth-child(20) {
  width: 49.5%;
}

.m-projects a:nth-child(20) div {
  background-image: image-url("20.jpg");
}

.m-projects a:nth-child(21) {
  width: 24.5%;
}

@media (max-width: 45.5rem) {
  .m-projects a:nth-child(21) {
    width: 99.5%;
  }
}

.m-projects a:nth-child(21) div {
  background-image: image-url("21.jpg");
}

.m-projects a div {
  background-color: red;
  transition: opacity 0.5s;
  background-position: center center;
  background-size: cover;
  position: absolute;
  height: 100%;
  width: 100%;
  transform-origin: top;
  transform: scale(1.2);
}

.m-projects a div:hover {
  opacity: .8;
}