@import "settings.breakpoints";
@import "settings.fonts";
@import "settings.colors";

@import "mixins/settings.fonts";
@import "mixins/tools.mixins";
@import "mixins/base.focus";
@import "mixins/objects.card";
@import "mixins/objects.homepage-cards";
@import "mixins/components.label";

// Packages with special treatments for "lead" cards
@mixin o-package-lead-card {
  .o-card:first-of-type {
    @include o-card--lead;
    @include mq($from: tablet) {
      @include o-card--lead--tablet;
    }
    @include mq($from: tabletMedium) {
      @include o-card--lead--tablet-medium;
    }
    @include mq($from: desktop) {
      @include o-card--lead--desktop;
    }
  }
}

// Packages with lead card treatments and no "o-package__col" columns
.o-package--group,
.o-package--group--display,
.o-package--single-topic {
  .o-package__stories > {
    @include o-package-lead-card;
  }
}
// Packages with lead card treatments and "o-package__col" columns
.o-package--g1,
.o-package--single-topic--inverted {
  .o-package__col:first-of-type {
    @include o-package-lead-card;
  }
}

// Hide decks for all cards except for the lead card,
// for all "package within group" type packages
.o-package--group,
.o-package--group--display {
  // All cards
  .o-package__stories > .o-card,
  .o-package__col .o-card {
    .o-card__dek {
      display: none;
    }
  }
  // Lead card
  .o-package__stories > .o-card,
  .o-package__col:first-of-type .o-card {
    &:first-of-type {
      .o-card__dek {
        display: block;
      }
    }
  }
}

// -----------------------------
// TODO: DELETE ME LATER - START
// -----------------------------
// The following will be replaced by _objects.package-within-group.scss
// when we roll out the post-E9000 features

///////////////////////////
// Package Group
///////////////////////////
.o-package--group, .o-package--group--display {
  background-color: $color-white;
  margin-bottom: rem(20);
  @include flex-display;
  flex: 100%;

  .o-package__label, .o-card {
    flex: 100%;
  }

  .o-package__label {
    font-size: rem(12);
    line-height: line-height(12, 12);
    color: $color-grey-660;
    border-bottom: none;
  }

  .o-card {
    margin-bottom: 0;
    margin-top: 0;
    border-style: solid;
    border-color: $color-stone-200;
    border-width:  0 1px 1px 0;
    flex: 100%;
  }
}

.o-package--group {
  .o-card__hed {
    @include font17b;
  }
  .o-package__stories > .o-card:first-of-type {
    .o-card__hed {
      @include font19b;
    }
  }
  @include mq($from: tablet) {
    .o-card {
      flex: 1;
    }
    .o-card__hed {
      @include font17b;
    }
    .o-package__stories > .o-card:first-of-type {
      flex: 100%;
      .o-card__hed {
        @include font24b;
      }
      .o-card__col {
        display: none;
        &:first-of-type {
          display: block;
        }
      }
    }
    &.o-package--group--g3 {
      .o-card {
        flex: 100%;
        &:nth-last-child(2):nth-child(even) {
          border-bottom: 1px solid $color-stone-200;
        }
        &:nth-of-type(2n+2)::after {
          width: 0;
        }
        .o-card__dek {
          @include font15r;
        }
      }
      .o-package__stories > .o-card:first-of-type {
        .o-card__dek {
          @include font15r;
        }
      }
    }
  }
  @include mq($from: tabletMedium) {
    .o-package__stories > .o-card:first-of-type {
      .o-card__hed {
        @include font32b;
      }
      .o-card__dek {
        @include font19r;
      }
    }
    &.o-package--group--g3 {
      .o-package__stories > .o-card:first-of-type {
        .o-card__hed {
          @include font24b;
        }
        .o-card__dek {
          @include font15r;
        }
      }
    }
  }
  @include mq($from: desktop) {
    .o-card {
      flex: 100%;
    }
  }

}

.o-package--group--display {
  .o-card__hed {
    @include font17b;
  }
  .o-package__stories > .o-card:first-of-type {
    .o-card__hed {
      @include font19b;
    }
  }
  @include mq($from: tablet) {
    .o-card {
      flex-basis: calc(50% - #{rem(41)});
    }
    .o-package__stories > .o-card:first-of-type {
      flex: 100%;
      padding-bottom: rem(10);
      .o-card__col {
        padding-left: rem(10);
        padding-right: rem(10);
        &:first-of-type {
          padding-top: 0;
        }
      }
      @include col-order (2, 1);
      .o-card__hed {
        @include font24b;
      }
      .o-card__dek {
        @include font17r;
      }
    }

    &.o-package--g1 .o-package__col:first-of-type .o-card:first-of-type {
      padding-bottom: rem(10);
      .o-card__col {
        padding-left: rem(10);
        padding-right: rem(10);
      }
    }

    &.o-package--group--g3 {
      .o-package__stories > .o-card:first-of-type {
        .o-card__dek {
          @include font15r;
        }
      }
    }

  }
  @include mq($from: tabletMedium) {
    .o-package__stories > .o-card:first-of-type {
      .o-card__hed {
        @include font32b;
      }
      .o-card__dek {
        @include font19r;
      }
    }
    &.o-package--group--g3 {
      .o-package__stories > .o-card:first-of-type {
        @include col-order(1, 2);
        .o-card__hed {
          @include font24b;
        }
        .o-card__dek {
          @include font15r;
        }
      }
    }
  }
  @include mq($from: desktop) {
    &.o-package--group--g3 {
      .o-package__stories > .o-card:first-of-type {
        @include col-order(2, 1);
      }
    }
  }
}

.o-package--group--lead {
  &.o-package--group--display {
    @include mq($from: tablet) {
      .o-package__stories > .o-card:first-of-type {
        .o-card__hed {
          @include font28b;
        }
        .o-card__dek {
          @include font17r;
        }
      }
    }
    @include mq($from: tabletMedium) {
      .o-package__stories > .o-card:first-of-type {
        .o-card__hed {
          @include font38b;
        }
        .o-card__dek {
          @include font24r;
        }
      }
    }
    @include mq($from: desktop) {
      .o-package__stories > .o-card:first-of-type {
        @include col-order(1, 2);
      }
    }
    &.o-package--group--g3 {
      @include mq($from: tablet) {
        .o-package__stories > .o-card:first-of-type {
          @include col-order(2, 1);
        }
      }
      @include mq($from: desktop) {
        .o-package__stories > .o-card:first-of-type {
          .o-card__hed {
            @include font28b;
          }
          .o-card__dek {
            @include font17r;
          }
          @include col-order(1, 2);
        }
      }
    }
  }
  &.o-package--group {
    @include mq($from: tablet) {
      .o-card {
        flex-basis: calc(50% - #{rem(30)});
        &:nth-last-child(2):nth-child(even) {
          border-bottom: none;
        }
        &:nth-of-type(2n+2)::after {
          content: "";
          position: absolute;
          right: 0;
          z-index: 1;
          top: 10%;
          width: 1px;
          height: 80%;
          background: $color-stone-200;
        }
      }
      .o-package__stories > .o-card:first-of-type {
        flex: 100%;
        .o-card__hed {
          @include font28b;
        }
        .o-card__dek {
          @include font17r;
        }
      }
    }
    @include mq($from: tabletMedium) {
      .o-package__stories > .o-card:first-of-type {
        .o-card__hed {
          @include font38b;
        }
        .o-card__dek {
          @include font24r;
        }
      }
    }
    @include mq($from: desktop) {
      .o-card {
        flex-basis: 100%;
      }
      .o-package__stories > .o-card:first-of-type {
        .o-card__dek {
          @include font19r;
        }
      }
      &.o-package--group--g3 {
        .o-package__stories > .o-card:first-of-type {
          .o-card__hed {
            @include font32b;
          }
          .o-card__dek {
            @include font15r;
          }
        }
      }
    }
  }
}

@include mq($from: tablet) {
  // If it's not a "display" package and the number of
  // stories is greater than 2, hide the first story's deck

  // TODO: Currently, packages have either an o-package--group or an
  // o-package--group--display class, but never both at the same time.
  // I think it would be better, semantically, if all package groups had the
  // o-package--group class, then additional rules were applied for
  // o-package--group--display, since it's a modifier. With these changes
  // applied, our selector would look like this:
  // .o-package--group:not(.o-package--group--display).o-package--contains-over-2-cards { }
  // But for now, it's safe to assume that if it has the o-package--group class,
  // then it does not have the o-package--group--display class

  .o-package--group.o-package--contains-over-2-cards {
    .o-package__stories > .o-card:first-of-type {
      .o-card__dek {
        display: none;
      }
    }
  }
}

// Group of 1 package
.o-package--g1 {
  .o-package__col {
    flex: 100%;
    &:first-of-type .o-card:first-of-type {
      .o-card__hed {
        @include font19b;
      }
      @include mq($from: tablet) {
        .o-card__hed {
          @include font28b;
        }
      }
      @include mq($from: tabletMedium) {
        .o-card__hed {
          @include font38b;
        }
      }
      @include mq($from: desktop) {
        .o-card__hed {
          @include font38b;
        }
        .o-card__dek {
          @include font24r;
        }
      }
    }
    &:last-of-type .o-card {
      .o-card__hed {
        @include font17b;
      }
    }
    @include mq($from: tablet) {
      &:last-of-type {
        @include flex-display;
        .o-card {
          flex-basis: calc(50% - #{rem(30)});
          position: relative;
          border-width: 0 0 1px;
          &::after {
            content: "";
            position: absolute;
            right: 0;
            z-index: 1;
            top: 10%;
            width: 1px;
            height: 80%;
            background: $color-stone-200;
          }
          &:last-of-type, &:nth-of-type(2n) {
            border-width: 0 1px 1px 0;
            &::after {
              width: 0;
            }
          }
        }
      }
    }
    @include mq($from: desktop) {
      flex: 1;
      &:first-of-type {
        flex: 3;
      }
      &:last-of-type {
        display: block;
        .o-card {
          border-width: 0 0 1px;
          &::after {
            width: 0;
          }
          &:nth-of-type(2n) {
            border-width: 0 0 1px;
          }
          &:last-of-type {
            border-width: 0;
          }
        }
      }
      .o-card {
        border-width: 0 0 1px 0;
        &:last-of-type {
          border-width: 0;
        }
      }
      &:first-of-type .o-card:first-of-type {
        border-width: 0 1px 0 0;
        @include col-order(2, 1);
      }
    }
  }
  @include mq($from: desktop) {
    border-width: 1px;
    .o-package__label {
      border-width: 0;
    }
  }
}

///////////////////////////
// Equal Height Packages
///////////////////////////
.o-package--equal {
  @include mq($from: tablet) {
    align-content: flex-start;
    border-width: 1px;
    .o-package__label {
      border-width: 0;
    }
    .o-card {
      border-width: 0 0 1px;
      position: relative;
      &:nth-last-child(2):nth-child(even) {
        border-bottom: none;
      }
      &:nth-of-type(2n+2)::after {
        content: "";
        position: absolute;
        right: 0;
        z-index: 1;
        top: 10%;
        width: 1px;
        height: 80%;
        background: $color-stone-200;
      }
      &:nth-last-child(1)::after {
        width: 0;
      }
      &:nth-last-child(1) {
        border-bottom: none;
      }
    }
  }
  @include mq($from: desktop) {
    &.o-package--group {
      .o-card {
        border-width: 0 0 1px;
        position: relative;
        &:nth-last-child(2):nth-child(even) {
          border-bottom: 1px solid $color-stone-200;
        }
        &:nth-of-type(2n+2)::after {
          content: "";
          width: 0;
        }
      }
    }
  }
}
// The above will be replaced by _objects.package-within-group.scss
// when we roll out the post-E9000 features
// -----------------------------
// TODO: DELETE ME LATER - END
// -----------------------------

///////////////////////////
// Lists
///////////////////////////

// -----------------------------
// TODO: DELETE ME LATER - START
// -----------------------------
// The following will be replaced by _objects.package-story-list.scss
// when we roll out the post-E9000 features

.o-package--list {
  .o-card__col:nth-of-type(n+2) {
    display: none;
  }
  .o-card {
    margin-bottom: 0;
    margin-top: 0;
    border-width: 0 0 1px;
    border-style: solid;
    border-color: $color-stone-200;
    padding-left: 0;
    padding-right: 0;
    flex: 100%;
    @include mq($from: tablet) {
      flex-basis: calc(50% - #{rem(30)});
      margin-right: rem(20);
      margin-bottom: 0;

      &:nth-of-type(even) {
        margin-right: 0;
      }
    }

    @include mq($from: tabletMedium) {
      flex-basis: calc(25% - #{rem(40)});

      &:nth-of-type(even) {
        margin-right: rem(20);
      }

      &:last-of-type, &:nth-of-type(4n) {
        margin-right: 0;
      }
    }
  }
  .o-package__label {
    padding-left: 0;
    padding-right: 0;
    border-bottom: 1px solid $color-stone-300;
  }

  @include mq($from: tablet) {
    @include flex-display;
    justify-content: space-between;

    .o-package__label {
      flex: 100%;
    }
  }

  @include mq($from: tabletMedium) {
    .c-image {
      display: none;
    }
    .o-card__col:first-of-type {
      flex: 100%;
      margin-right: 0;
    }
  }

  @include mq($from: desktop) {
    .c-image {
      display: block;
    }
    .o-card__col:first-of-type {
      flex: 3;
      margin-right: rem(10);
    }
  }
}

.o-package--list-cards {
  padding-bottom: rem(20);
  .o-card__col:nth-of-type(n+2) {
    display: block;
  }
  .o-card {
    border: none;
    flex: 100%;
    @include mq($from: tablet) {
      flex-basis: calc(50% - #{rem(30)});
      margin-right: rem(20);

      &:nth-of-type(even) {
        margin-right: 0;
      }
    }

    @include mq($from: desktop) {
      flex-basis: calc(25% - #{rem(40)});

      &:nth-of-type(even) {
        margin-right: rem(20);
      }

      &:last-of-type {
        margin-right: 0;
      }
    }
  }

  .o-card__label {
    margin-bottom: rem(5);
  }
  .o-card__meta {
    margin-top: rem(5);
  }
  .o-package__label {
    padding-left: 0;
    padding-bottom: 0;
  }

  @include mq($from: tablet) {
    @include flex-display($flow: row wrap, $wrap: "");
    justify-content: space-between;

    .o-package__label {
      flex: 100%;
    }
  }
}

.o-package--list-numbered {
  @extend .o-package--list;
  counter-reset: number;
  .o-card__content {
    &::before {
      counter-increment: number;
      content: counter(number);
      @include font-pratt;
      font-size: rem(38);
      line-height: line-height(38, 38);
      color: $color-grey-900;
      padding-left: rem(10);
      margin-right: rem(20);
    }
  }
}

.o-package--list--a-stack {
  .o-card__col:nth-of-type(n+2) {
    display: block;
  }
  .o-card {
    &:first-of-type {
      padding-top: 0;
    }
    @include mq($from: tablet, $until: tabletMedium) {
      &:nth-of-type(2) {
        padding-top: 0;
      }
    }
    @include mq($from: tabletMedium) {
      flex: 100%;
      margin-right: 0;
      &:nth-of-type(even) {
        margin-right: 0;
      }
      &:nth-of-type(2) {
        padding-top: rem(10);
      }
      .o-card__hed {
        font-size: rem(19);
      }
    }
  }
}

// The above will be replaced by _objects.package-story-list.scss
// when we roll out the post-E9000 features
// -----------------------------
// TODO: DELETE ME LATER - END
// -----------------------------

///////////////////////////
// Single Section Packages
///////////////////////////

// Hide images in all cards except for the lead card
.o-package--single-section--muted,
.o-package--single-section--muted--stacked,
.o-package--single-section--muted--stacked--bold {
  .o-card:nth-of-type(n+2) .o-card__col:nth-of-type(n+2) {
    display: none;
  }
}

.o-package--single-section--muted--stacked--bold {
  .o-card, .o-package__button {
    flex: 100%;
  }
  @include mq($from: tablet) {
    .o-card__col:first-of-type {
      flex: 2;
    }
    .o-card:last-of-type {
      border-width: 0 1px 0 0;
    }
    .o-package__button {
      display: block;
    }
  }
  @include mq($from: tabletMedium) {
    .o-card:last-of-type {
      border-width: 0 1px 1px 0;
      border-style: solid;
      border-color: $color-stone-200;
    }
    .o-package__button {
      display: none;
    }
  }
  @include mq($from: tabletMedium) {
    .o-card:first-of-type {
      .o-card__hed {
        @include font17b;
      }
    }
  }
}

.o-package--single-section--video {
  border-width: 1px;
  position: relative;
  .o-package__stories {
    margin-top: 0;
  }
  .o-card, .o-card:last-of-type, .o-package__label {
    border-width: 0;
  }
  .o-card__dek {
    display: none;
  }
  @include mq($from: tablet, $until: tabletMedium) {
    .o-package__label {
      position: absolute;
    }
    .o-package__stories {
      margin-top: rem(10);
    }
  }
  @include mq($from: tabletMedium) {
    .o-package__col:first-of-type {
      .o-card__dek {
        display: block;
      }
    }
    .o-package__label {
      position: relative;
    }
    .o-package__stories {
      margin-top: 0;
    }
  }

  .o-package__col {
    flex: 100%;
    &:first-of-type {
      .o-card {
        padding: 0;
      }
      .o-card__content {
        flex-wrap: wrap;
      }
      .o-card__col {
        flex: 100%;
        order: 1;
        &:first-of-type {
          order: 2;
          padding: rem(10);
        }
      }
    }
    &:last-of-type {
      .o-card {
        .o-card__hed {
          @include font-gm-sans;
          font-size: rem(14);
          line-height: line-height(14, 16);
          color: $color-grey-660;
        }
      }
      // Hide play button for every card except for the lead card
      .c-article-media__info {
        display: none;
      }
    }

    @include mq($from: tablet) {
      &:first-of-type {
        flex-grow: 0;
        flex-basis: 80%;
        margin: auto;
        .o-card__hed {
          @include font24b;
        }
      }
      &:last-of-type {
        @include flex-display;
        .o-card {
          flex-basis: 0;
        }
        .o-card__content {
          flex-wrap: wrap;
        }
        .o-card__col {
          flex: 100%;
          order: 1;
          &:first-of-type {
            order: 2;
            padding: rem(10);
          }
        }
      }
    }

    @include mq($from: tabletMedium) {
      flex: 1;
      &:first-of-type {
        flex: 2;
        margin: inherit;
        .o-card {
          padding: rem(10);
        }
        .o-card__dek {
          @include font17r;
        }
      }
      &:last-of-type {
        display: block;
        .o-card__col {
          flex: 1;
          .o-card__hed {
            @include font17r;
            color: $color-grey-900;
          }
          &:first-of-type {
            flex: 3;
            padding: rem(10);
          }
        }
      }
    }

    @include mq($from: desktop) {
      &:last-of-type {
        .o-card__col {
          .o-card__hed {
            @include font19r;
          }
        }
      }
    }
  }
}

///////////////////////////
// Single Topic Packages
///////////////////////////
.o-package--single-topic {
  background-color: $color-white;
  .o-package__label {
    font-size: rem(12);
    line-height: line-height(12, 12);
    color: $color-grey-660;
    border-width: 0 1px 0 0;
  }
  .o-card {
    margin-bottom: 0;
    margin-top: 0;
    border-width: 0 1px 1px 0;
    border-style: solid;
    flex: 100%;

    .c-image {
      display: none;
    }
  }
  .o-package__stories > .o-card {
    &:first-of-type {
      .c-image {
        display: block;
      }
    }
  }

  .o-card__dek {
    display: none;
  }

  @include mq($from: tablet) {
    @include flex-display($flow: row wrap, $wrap: "");
    justify-content: space-between;

    .o-package__label {
      flex: 100%;
      border-width: 0 1px 1px 0;
    }

    .o-card {
      flex-basis: calc(50% - #{rem(22)});
      .c-image {
        display: block;
      }
    }

    .o-package__stories > .o-card,
    .o-package__stories > .o-card:first-of-type {
      .o-card__col {
        order: 2;
        flex: 1;
        &:first-of-type {
          order: 1;
          flex: 3;
        }
      }
      .o-card__hed {
        @include font19b;
      }
    }

    .o-package__stories > .o-card:first-of-type {
      padding: rem(10);
      .o-card__col {
        padding: 0;
        &:first-of-type {
          margin-right: rem(10);
          padding: 0;
        }
      }
    }
  }

  @include mq($from: tabletMedium) {
    .o-card__content {
      flex-wrap: wrap;
    }
    .o-card {
      flex-basis: calc(25% - #{rem(40)});
    }
    .o-package__stories > .o-card,
    .o-package__stories > .o-card:first-of-type {
      .o-card__col {
        order: 1;
        flex: 100%;
        &:first-of-type {
          order: 2;
          flex: 100%;
          padding: rem(10) 0;
          margin-right: 0;
        }
      }
    }
    .o-package__stories > .o-card:first-of-type {
      .o-card__hed {
        @include font19b;
      }
    }
  }

  @include mq($from: desktop) {
    .o-package__stories > .o-card:first-of-type {
      .o-card__hed {
        @include font19b;
      }
    }
  }
}

// Key icon changes opacity when unlimited user
// is logged in and key is on a dark background
.u-user-role--unlimited {
  .o-package--single-topic--inverted {
    .c-indicator-icon__art--key {
      fill: $color-white;
      opacity: 0.5;
    }
  }
}

.o-package--single-topic--inverted {
  .o-card__content-text,
  .o-card__hed,
  .o-card__dek,
  .o-card__meta,
  .o-package__label,
  .o-package__label-link,
  .o-card__hed__duration {
    color: $color-white;
  }
  .c-indicator-icon__art {
    fill: $color-white;
  }

  .o-package__label {
    border-width: 0;
    padding: rem(10) 0 0;
    font-size: rem(12);
  }

  .o-card__label {
    margin-bottom: rem(5);
  }
  .o-card__meta {
    margin-top: rem(5);
  }

  .o-card__link {
    &:visited {
      .o-card__hed-text {
        color: $color-stone-200;
      }
    }
    &:hover,
    &:focus {
      .o-card__hed-text {
        color: $color-white;
      }
    }
    &:focus,
    &:hover:focus {
      @include focus-outline-inverted;
    }
    &:active {
      .o-card__hed-text {
        color: $color-stone-500;
      }
    }
  }


  @include mq($from: desktop) {
    border-width: 1px;
    .o-package__label {
      border-width: 0;
    }
  }

  .o-package__col:first-of-type .o-card:first-of-type {
    @include o-card-hed-single-md;
    background-color: transparent;
    padding: rem(10) 0;
    .o-card__col:first-of-type {
      padding: rem(10) 0 0;
      @include mq($from: tablet) {
        padding: 0 rem(20);
      }
    }
  }
  .o-package__col:last-of-type .o-card {
    .o-card__dek,
    .o-card__col:nth-of-type(n+2) {
      display: none;
    }
  }
  .o-card {
    border-color: rgba($color-white, .4);
    border-width: 0 0 1px;
    border-style: solid;
    padding: rem(10) 0;
    margin: 0;
    flex: 100%;
  }

  @include mq($from: tablet) {
    @include flex-display($flow: row wrap, $wrap: "");
    justify-content: space-between;

    .o-package__label {
      flex: 100%;
    }

    .o-card {
      border-width: 0;
      flex-basis: calc(50% - #{rem(21)});
      margin-right: rem(10);
      padding-right: 0;
      &:nth-of-type(even) {
        border-width: 0 1px 0 0;
        padding-right: rem(10);
      }
      &:last-of-type {
        margin-right: 0;
      }
    }
    .o-package__col:first-of-type .o-card:first-of-type {
      flex: 100%;
      padding-bottom: rem(10);
      border-width: 0 0 1px;
      margin-right: 0;
      margin-bottom: 0;
      .o-card__col:first-of-type {
        padding-top: 0;
      }
    }
  }

  @include mq($from: tabletMedium) {
    .o-package__col:first-of-type .o-card:first-of-type {
      .o-card__hed {
        @include font38b;
      }

      .o-card__dek {
        @include font24r;
      }
    }
  }

  .o-package__col {
    flex: 100%;
    &:last-of-type {
      .o-card:last-of-type {
        border-width: 0;
      }
    }
    @include mq($from: tablet) {
      &:last-of-type {
        @include flex-display;
        .o-card {
          // Two-column card layout
          flex-basis: calc(50% - #{rem(30)});
          position: relative;
          border-width: 0 0 1px;
          margin-right: 0;

          &:nth-of-type(even) {
            padding-left: rem(10);
          }
          // Floating border
          &:nth-of-type(odd)::after {
            content: "";
            position: absolute;
            right: 0;
            z-index: 1;
            top: 10%;
            width: 1px;
            height: 80%;
            background: rgba($color-white, .4);
          }
          &:nth-last-of-type(2) {
            // Second-last item is odd, so it's in the left-hand column, in the bottom row
            // +---+---+
            // |   |   |
            // +---+---+
            // | x |   |
            // +---+---+
            &:nth-of-type(odd) {
              border-width: 0;
            }
            // Second-last item is even, so it's in the right-hand column, but not in the bottom row
            // +---+---+
            // |   | x |
            // +---+---+
            // |       |
            // +---+---+
            &:nth-of-type(even) {
              &::after {
                width: 0;
              }
            }
          }
          &:last-of-type {
            border-width: 0;
            &::after {
              width: 0;
            }
            // Last item is odd, so it spans 2 columns, in the bottom row
            // +---+---+
            // |   |   |
            // +---+---+
            // |   x   |
            // +---+---+
            // &:nth-of-type(odd) {}
            //
            // Last item is even, so it's in the right-hand column, in the bottom row
            // +---+---+
            // |   |   |
            // +---+---+
            // |   | x |
            // +---+---+
            // &:nth-of-type(even) {}
          }
        }
      }
    }
    @include mq($from: desktop) {
      flex: 1;
      &:first-of-type {
        border-right: 1px solid rgba($color-white, .4);
        flex: 3;
      }
      &:last-of-type {
        display: block;
        .o-card {
          border-width: 0 0 1px;
          padding: rem(10) 0 rem(10) rem(10);
          margin-right: 0;
          &:nth-of-type(odd)::after {
            width: 0;
          }
          &:nth-last-of-type(2):nth-of-type(odd) {
            border-width: 0 0 1px;
          }
        }
      }
      &:first-of-type .o-card:first-of-type {
        border-width: 0;
        .o-card__hed {
          @include font38b;
        }
        .o-card__dek {
          @include font24r;
        }
        @include col-order(2, 1);
      }
    }
  }

  &.o-package--single-topic--inverted-red900 {
    background-color: $color-red-900;
  }
  &.o-package--single-topic--inverted-gold {
    background-color: $color-gold-900;
  }
  &.o-package--single-topic--inverted-grey {
    background-color: $color-grey-800;
  }
  &.o-package--single-topic--inverted-red500 {
    background-color: $color-red-500;
  }
  &.o-package--single-topic--inverted-olive {
    background-color: $color-olive-900;
  }
  &.o-package--single-topic--inverted-rust {
    background-color: $color-rust-900;
  }
  // TODO: modify this package to look good with a light background. The text
  // and borders will need to be dark instead of white. Discuss with UX. For
  // the time being, we're forcing "stone" to be the darker "stone999" colour.
  &.o-package--single-topic--inverted-stone, // Should be $color-stone-200
  &.o-package--single-topic--inverted-stone999 {
    background-color: $color-stone-999;
  }
  &.o-package--single-topic--inverted-teal {
    background-color: $color-teal-900;
  }
}
