@import 'nib'

.item-grid
  background #F5F8F9
  padding 80px 20px
  text-align center

  h2
    font-size 24px
    font-weight 900
    margin-bottom 40px

  .items
    display flex
    flex-flow row
    flex-wrap wrap
    justify-content center

  .item
    background-position center center
    background-size cover

    font-size 20px
    font-weight 100
    height 198px
    margin 2px
    position relative
    vertical-align top
    width 352px

    @media (hover)
      opacity .9
      &:hover
        opacity 1

  .item .overlay
    background rgba(black, .85)
    bottom 0
    left 0
    position absolute
    right 0
    top 0
    z-index 10

  .item .details
    align-items center
    bottom 0
    display flex
    flex-direction column
    justify-content center
    left 0
    padding 20px
    position absolute
    right 0
    top 0
    z-index 20

  .item .intro
    border 1px solid #646a6e
    color #fff
    display inline-block
    font-size 12px
    padding 8px 16px
    text-transform uppercase

  .item .title
    color #fff
    font-size 22px
    letter-spacing 0.8px
    line-height 32px
    margin 15px 0 10px

  .item .subtitle
    color #a1abba
    font-size 14px
    line-height 18px
    padding-bottom 10px