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

.grid-items {
  ///////////////////////////////////////////////////////////////////////////////////
  $base-accent-color: #477DCA !default;
  $base-background-color: white !default;
  $medium-screen: em(640) !default;
  $large-screen: em(860) !default;
  
  p {
    line-height: 1.5em;
  }

  a {
    text-decoration: none;
  }
  //////////////////////////////////////////////////////////////////////////////////

  $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);
    background: $grid-item-background;
    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;
    border-top: 0;
    cursor: pointer;
    float: left;
    height: $grid-item-height;
    overflow: hidden;
    outline: none;
    padding: 2em;
    text-align: center;
    width: 100%;

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

    @for $i from 1 through length($grid-item-colors) { // 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%);

        &:focus,
        &: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-bottom: 1em;
      margin: auto;
    }

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

  .grid-item p {
      margin: auto;
      color: transparentize($grid-item-color, 0.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("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png");
    background-color: $grid-item-background;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
  }
}