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

.grid-items-lines {
  ///////////////////////////////////////////////////////////////////////////////////
  $base-background-color: white !default;
  $dark-gray: #333 !default;
  $light-gray: #DDD !default;
  $medium-screen: em(640) !default;
  $large-screen: em(860) !default;
  $base-font-color: $dark-gray !default;

  p {
    line-height: 1.5em;
  }

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

  $grid-items-background: $base-background-color;
  $grid-item-background: $base-background-color;
  $grid-item-border: 1px solid transparentize($base-font-color, 0.8); 
  $grid-item-columns: 4;
  $grid-item-big-columns: 8;
  $grid-item-color: $base-font-color;
  $grid-item-height: 14em;

  @include clearfix;
  position: relative;
    
  .grid-item {
    @include transition (all 0.2s ease-in-out);
    background: $grid-item-background;
    border-bottom: $grid-item-border;
    border-right: $grid-item-border;
    cursor: pointer;
    float: left;
    height: $grid-item-height;
    overflow: hidden;
    outline: none;
    padding: 2em;
    width: 100%;

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

    &:focus,
    &:hover {
      background: transparentize($grid-item-color, 0.95);
    }
  }

  .grid-item img {
      display: block;
      height: 2.5em;
      margin-bottom: 1.2em;
      opacity: 0.2;
    }

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

  .grid-item p {
      color: transparentize($grid-item-color, 0.4);
      
      @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%;
      }  
    }
  }

  // this, below, might not be the most beautiful solution but it removes the outer borders by using the background color.
  .bottom-cover {
    background: $grid-items-background;
    bottom: 0px;
    height: 3px;
    position: absolute;
    width: 100%;
  }

  .right-cover {
    background: $grid-items-background;
    height: 100%;
    position: absolute;
    right: 0px;
    width: 4px;
  }
}