=grid-item-columns($columns)
  width: 100% / 12 * $columns

.grid-items
  ///////////////////////////////////////////////////////////////////////////////////
  $base-accent-color: #0277BD !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
  +clearfix
  .grid-item
    +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%
    +media($large-screen)
      +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
        &: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: 1.5em
    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)
    +media($medium-screen)
      max-width: 70%
  .grid-item-big
    +media($large-screen)
      +grid-item-columns($grid-item-big-columns)

    p
      +media($medium-screen)
        max-width: 60%
  .grid-item-image
    background: url("https://s3.amazonaws.com/FutureGov/sampleimage.jpg")
    background-color: $grid-item-background
    background-position: top
    background-repeat: no-repeat
    background-size: cover