// `Basic HTML
//----------------------------------------------------------------------------------------------------

body
  background: #eee
  color: #333

hr
  +box-shadow(#fff 0 1px 0 0)

a
  color: blue

  &:hover
    color: dodgerblue

// `Wrapper, for spacing
//----------------------------------------------------------------------------------------------------

#wrapper
  padding: 20px 20px 0

// `Tiles
//----------------------------------------------------------------------------------------------------

.tile
  @extend .clearfix
  +border-radius(4px)
  +box-shadow(rgba(#000, 0.5) 0 2px 5px 0)
  background: #fff
  padding: 20px 20px 0
  margin-bottom: 20px

// `1/3 floated list
//----------------------------------------------------------------------------------------------------

.thirds,
.thirds > li
  margin: 0
  padding: 0
  list-style: none

.thirds
  @extend .clearfix
  margin-left: -20px
  position: relative

.thirds > li
  $one-third: 100%/3

  +box-sizing(border-box)
  float: left
  padding-top: 20px
  padding-left: 20px
  width: $one-third

  &:nth-child(3n + 1)
    clear: left

    &:before
      +pseudo
      +box-shadow(#fff 0 1px 0 0)
      background: #ccc
      height: 1px
      margin-top: -20px
      left: 20px
      right: 0