@mixin grid-item-columns($columns) {
  width: (100% / 12) * $columns;
}

.grid-items {
  $grid-items-background: $base-background-color;
  $grid-item-background: desaturate($base-accent-color, 30); 
  $grid-item-colors: 
    desaturate($base-accent-color, 30), 
    #3581A5, 
    #5FBEBE,
    #98C79A,
    #A7A891, 
    #BDCC97,
    #979EA0;
  $grid-item-border-size: 9px;
  $grid-item-columns: 4;
  $grid-item-big-columns: 8;
  $grid-item-color: white;
  $grid-item-height: 14em;

  @include clearfix;
    
  .grid-item {
    @include transition (all 0.2s ease-in-out);
    height: $grid-item-height;
    background: $grid-item-background;
    width: 100%;
    overflow: hidden;
    float: left;
    padding: 2em;
    border-top: 0;
    border-bottom: $grid-item-border-size solid $grid-items-background;
    border-left: $grid-item-border-size /2 solid $grid-items-background;
    border-right: $grid-item-border-size /2 solid $grid-items-background;
    text-align: center;
    cursor: pointer;

    @include media($large-screen) {
      @include grid-item-columns($grid-item-columns);
    }

    @for $i from 1 to 8 { // assign colors from $grid-item-colors list
      &:nth-child(#{$i}) {
        $background-from-list: nth($grid-item-colors, $i);
        background-color: $background-from-list;
        box-shadow: inset 0px 0px 1px 2px darken($background-from-list, 10);
        &:hover {
          background-color: darken($background-from-list, 10);
          background-repeat: no-repeat;
          background-position: top;
          background-size: cover;
        }
      }
    }
  }

  .grid-item img {
      display: block;
      height: 3em;
      margin: auto;
      margin-bottom: 1em;
    }

  .grid-item h1 {
      color: $grid-item-color;
      font-size: 1.3em;
      margin-bottom: .4em;
    }

  .grid-item p {
      margin: auto;
      color: transparentize($grid-item-color, .3);
      @include media($medium-screen) {
        max-width: 70%;
      }
    }

  .grid-item-big {
    @include media($large-screen) {
      @include grid-item-columns($grid-item-big-columns);
    }
    p {
      @include media($medium-screen) {
        max-width: 60%;
      }  
    }
  }

  .grid-item-image {
    background: url(/images/lake-transparent.png);
    background-color: $grid-item-background;
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
  }
}