<div class="masonry">
  <div class="column">
    <div class="item">
      <div class="item__content">
      </div>
    </div>
    <div class="item">
      <div class="item__content item__content--small">
      </div>
    </div>
    <div class="item">
      <div class="item__content item__content--medium">
      </div>
    </div>
    <div class="item">
      <div class="item__content item__content--small">
      </div>
    </div>
  </div>
  <div class="column">
    <div class="item">
      <div class="item__content item__content--medium">
      </div>
    </div>
    <div class="item">
      <div class="item__content">
      </div>
    </div>
    <div class="item">
      <div class="item__content item__content--large">
      </div>
    </div>
    <div class="item">
      <div class="item__content item__content--medium">
      </div>
    </div>
  </div>
  <div class="column">
    <div class="item">
      <div class="item__content item__content--small">
      </div>
    </div>
    <div class="item">
      <div class="item__content">
      </div>
    </div>
    <div class="item">
      <div class="item__content item__content--large">
      </div>
    </div>
    <div class="item">
      <div class="item__content">
      </div>
    </div>
  </div>
  <div class="column">
    <div class="item">
      <div class="item__content item__content--small">
      </div>
    </div>
    <div class="item">
      <div class="item__content item__content--large">
      </div>
    </div>
    <div class="item">
      <div class="item__content item__content--medium">
      </div>
    </div>
  </div>
  <div class="column">
    <div class="item">
      <div class="item__content item__content--small">
      </div>
    </div>
    <div class="item">
      <div class="item__content item__content--medium">
      </div>
    </div>
    <div class="item">
      <div class="item__content">
      </div>
    </div>
    <div class="item">
      <div class="item__content item__content--small">
      </div>
    </div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css?family=PT+Mono');

@function set-counter-bg-color($color) {
  @if (lightness($color) > 50) {
    @return darken($color, 60%);
  } @else {
    @return lighten($color, 50%);
  }
}

$bg: #0D0630;
$itemBg1: #18314F;
$itemBg2: #8BBEB2;
$itemBg3: #E6F9AF;
$itemBg4: #384E77;

@mixin setColorAndHover($baseColor) {
  color: $baseColor;
  &:hover {
    background: lighten($baseColor, 8%);
  }
}

body,
html {
  position: relative;
  width: 100%;
  height: 100%;
  background: $bg;
  font-family: "PT Mono", monospace;
}

.masonry {
  display: flex;
  flex-direction: column;
  
  @media only screen and (min-width: 500px) {
    flex-direction: row;
  }
}

.column {
  display: flex;
  flex-flow: column wrap;
  width: 100%;
  
  @media only screen and (min-width: 500px) {
    width: calc(100%/5);
  }
}

.item {
  box-sizing: border-box;
  padding: 10px;
  counter-increment: item-counter;

  &__content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 220px;
    font-size: 40px;
    color: darken($bg, 5%);
    background: currentColor;
    box-sizing: border-box;
    @include setColorAndHover($itemBg1);

    &:before {
      position: absolute;
      top: 0;
      left: 0;
      font-size: 13px;
      width: 2em;
      height: 2em;
      line-height: 2em;
      text-align: center;
      font-weight: bold;
      background-color: set-counter-bg-color($itemBg1);
      content: counter(item-counter);
    }

    &:after {
      color: darken($bg, 10%);
      content: 'ಠ‿ಠ';
    }

    &--small {
      @include setColorAndHover($itemBg2);
      height: 100px;

      &:before {    
        background: set-counter-bg-color($itemBg2);
      }

      &:after {
        content: '♥◡♥';
      }
    }

    &--medium {
      @include setColorAndHover($itemBg3);
      height: 175px;

      &:before {    
        background: set-counter-bg-color($itemBg3);
      }

      &:after {
        content: '◔ᴗ◔';
      }
    }

    &--large {
      @include setColorAndHover($itemBg4);
      height: 280px;

      &:before {    
        background: set-counter-bg-color($itemBg4);
      }

      &:after {
        content: 'ಠ_๏';
      }
    }
  }
}