_item.scss

.item:link, .item:visited {
  text-decoration: none;
  color: $primary;
  @include pad(0 0 default 0);
}

.item:hover h2 {
  text-decoration: underline;
}

.item__thumb {
  margin-bottom: $gutter/2;
}

.item__thumb .ratio-box {
  @include pad-ratio(400, 300);
}

.item__thumb--project .ratio-box {
  @include pad-ratio(329, 247);
}

.item__thumb--report .ratio-box {
  @include pad-ratio(241, 181);
}

.item__thumb--face .ratio-box {
  @include pad-ratio(300, 300);
}

.item__thumb img {
  height: 100%;
  width: 100%;
}

.item__content .title {
  margin: 0;
  padding: 0;
  font-weight: bold;
  font-size: modular-scale(0);
}

.item__content .subtitle {
  margin-bottom: 0;
  font-size: modular-scale(0);
}

.item .date {
  font-size: modular-scale(-1);
  line-height: 1;
  margin: 0;

  @include media($sm) {
    font-size: modular-scale(0);
  }
}

.item--row {
  @include row;
  display: block;
  margin-top: $gutter;
  margin-bottom: $gutter;
}

.item--row .date,
.item--row .byline {
  padding-top: 0;
}

.item--row .item__image {
  margin-top: $small-spacing;
}

@include media($sm) {

  .item__content .title {
    font-size: modular-scale(2);
  }

  .item__content .subtitle {
    font-size: modular-scale(2);
  }

  .item--row {
    margin-bottom: $gutter;
  }
  .item--row .item__date {
    @include span-columns(2);
  }
  .item--row .item__content {
    @include span-columns(6);
  }
  .item--row .item__image {
    @include span-columns(4);
    margin-top: 0;
  }

  .reading-notes .item--row .item__date {
    @include span-columns(3);
  }
  .reading-notes .item--row .item__content {
    @include span-columns(7);
  }
}

@include media($lg) {
  .item--row .item__date {
    @include span-columns(2);
  }
  .item--row .item__content {
    @include span-columns(6);
  }
  .item--row .item__image {
    @include span-columns(3);
    @include shift(1);
  }

  .reading-notes .item--row .item__date {
    @include span-columns(3);
  }
  .reading-notes .item--row .item__content {
    @include span-columns(7);
  }
}