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

@import "mixins/settings.fonts";
@import "mixins/tools.functions";
@import "mixins/tools.mixins";
@import "mixins/objects.homepage-cards";

// ------------------------------------
// Display
// ------------------------------------
.o-package--single-topic {
  .u-wrapper {
    flex: 100%;
    border-style: solid;
    border-color: $color-stone-200;
    border-width: 0 1px 1px 0;
    > .o-card,
    > .o-card:last-of-type {
      border-width: 0;
    }
  }
  .o-package__stories > .u-wrapper {
    &:first-of-type .o-card {
      padding: 0;
      .o-card__content {
        flex-wrap: wrap;
      }
      .o-card__col:first-of-type {
        flex: 100%;
        order: 2;
        margin-right: 0;
        padding: rem(10);
      }
      .o-card__col:last-of-type {
        flex: 100%;
        order: 1;
      }
      .c-image {
        display: block;
      }
    }
  }
  @include mq($from: tablet) {
    .o-package__stories > .u-wrapper .o-card,
    .o-package__stories > .u-wrapper:first-of-type .o-card {
      .o-card__col {
        order: 2;
        flex: 1;
        &:first-of-type {
          order: 1;
          flex: 3;
        }
      }
      .o-card__hed {
        @include font19b;
      }
    }
    .o-package__stories > .u-wrapper:first-of-type .o-card {
      padding: rem(10);
      .o-card__col {
        padding: 0;
        &:first-of-type {
          margin-right: rem(10);
          padding: 0;
        }
        &:last-of-type {
          flex: 1;
          order: 2;
        }
      }
    }
  }
  @include mq($from: tabletMedium) {
    .o-package__stories > .u-wrapper .o-card,
    .o-package__stories > .u-wrapper:first-of-type .o-card {
      .o-card__col {
        order: 1;
        flex: 100%;
        &:first-of-type {
          order: 2;
          flex: 100%;
          padding: rem(10) 0;
          margin-right: 0;
        }
        &:last-of-type {
          flex: 100%;
          order: 1;
        }
      }
    }
    .o-package__stories > .u-wrapper:first-of-type .o-card {
      .o-card__hed {
        @include font19b;
      }
    }
  }
}

// ------------------------------------
// Inverted
// ------------------------------------
.o-package--single-topic--inverted {
  .u-wrapper {
    flex: 100%;
    border-style: solid;
    border-width: 0 0 1px 0;
    border-color: rgba($color-white, .4);
    > .o-card,
    > .o-card:last-of-type {
      border-width: 0;
    }
  }
  .o-package__col:last-of-type {
    .u-wrapper:last-of-type {
      border-width: 0;
    }
  }
  @include mq($from: tablet) {
    .o-package__col:first-of-type .u-wrapper:first-of-type .o-card {
      border-width: 0;
    }
  }
}
