Create a responsive “gallery” of blocks

rowMachine.scss

* {
  box-sizing: border-box; 
}

body {
  background: #222;
}

@mixin rowMachine($numPerRow, $margin) {
  width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);
  &:nth-child(n) {
    margin-bottom: $margin;
    margin-right: $margin;
  }
  &:nth-child(#{$numPerRow}n) {
    margin-right: 0;
    margin-bottom: 0;
  }
}

.person {
  @include rowMachine(5, 2%);
  background: white;
  padding: 10px;
  float: left;
  
  @media (max-width: 1200px) {
    @include rowMachine(4, 2%);
  }
  
  @media (max-width: 900px) {
    @include rowMachine(3, 4%);
  }
  
  img {
    max-width: 100%; 
  }
}