/* ==========================================================================

ARCHIVE
========================================================================== */

.archive {

margin-bottom: 2em;

@include breakpoint($medium) {
  @include span(12 of 12);
}

@include breakpoint($large) {
  @include span(10 of 12 last);
  @include prefix(0.5 of 12);
}

a {
  color: inherit;
  text-decoration: none;
}

}

.archive__subtitle {

margin: 1.414em 0 0;
padding-bottom: 0.5em;
font-size: $type-size-5;
color: mix(#fff, $gray, 25%);
border-bottom: 1px solid $border-color;

+ .list__item .archive__item-title {
  margin-top: 0.5em;
}

}

.archive__item-title {

margin-bottom: 0.25em;
font-family: $sans-serif-narrow;

a + a {
  opacity: 0.5;
}

}

/* remove border*/ .page__content {

.archive__item-title {
  margin-top: 1em;
  border-bottom: none;
}

}

.archive__item-excerpt {

margin-top: 0;
font-size: $type-size-6;

& + p {
  text-indent: 0;
}

}

.archive__item-teaser {

border-radius: $border-radius;
overflow: hidden;
img {
  width: 100%;
}

}

.archive__item:hover {

.archive__item-teaser {
  box-shadow: 0 0 10px rgba(#000, 0.25);
}

.archive__item-title {
  text-decoration: underline;
}

}

/*

List view
========================================================================== */

.list__item {

@include breakpoint($medium) {
  padding-right: $right-sidebar-width-narrow;
}

@include breakpoint($large) {
  padding-right: $right-sidebar-width;
}

@include breakpoint($x-large) {
  padding-right: $right-sidebar-width-wide;
}

.page__meta {
  margin: 0 0 4px;
}

}

/*

Grid view
========================================================================== */

.grid__item {

margin-bottom: 2em;

.page__meta {
  margin: 0 0 4px;
}

.archive__item-title {
  margin-top: 0.5em;
  font-size: $type-size-5;
}

.archive__item-excerpt {
  display: none;
}

@include breakpoint($small) {
  @include gallery(5 of 10);
  .archive__item-teaser {
    max-height: 200px;
  }
}

@include breakpoint($medium) {
  margin-left: 0; /* reset before mixin does its thing*/
  margin-right: 0; /* reset before mixin does its thing*/
  @include gallery(2.5 of 10);

  .archive__item-teaser {
    max-height: 120px;
  }

  .archive__item-excerpt {
    display: block;
    font-size: $type-size-6;
  }
}

}

/*

Features
========================================================================== */

.feature__wrapper {

@include clearfix();
margin-bottom: 2em;
border-bottom: 1px solid $border-color;

}

.feature__item {

margin-bottom: 2em;
font-size: 1.25rem;

@include breakpoint($small) {
  margin-bottom: 0;
  @include gallery(4 of 12);

  .feature__item-teaser {
    max-height: 200px;
    overflow: hidden;
  }
}

&--left {
  @include full();
  font-size: 1.25rem;

  .archive__item-teaser {
    margin-bottom: 2em;
  }

  @include breakpoint($small) {
    .archive__item-teaser {
      @include span(5 of 12);
    }

    .archive__item-body {
      @include span(7 of 12 last);
      @include prefix(0.5 of 12);
      @include suffix(1 of 12);
    }
  }
}

&--right {
  @include full();
  font-size: 1.25rem;

  .archive__item-teaser {
    margin-bottom: 2em;
  }

  @include breakpoint($small) {
    text-align: right;

    .archive__item-teaser {
      @include span(5 of 12 rtl);
    }

    .archive__item-body {
      @include span(7 of 12 last rtl);
      @include prefix(0.5 of 12);
      @include suffix(1 of 12);
    }
  }
}

&--center {
  @include full();
  font-size: 1.25rem;

  .archive__item-teaser {
    margin-bottom: 2em;
  }

  @include breakpoint($small) {
    text-align: center;

    .archive__item-teaser {
      margin: 0 auto;
      width: span(5 of 12);
    }

    .archive__item-body {
      margin: 0 auto;
      width: span(7 of 12);
    }
  }
}

}