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

@import "mixins/settings.fonts";
@import "mixins/tools.mixins";

.c-package {
  border: 1px solid $color-stone-200;
  background-color: $color-white;

  .c-package__stories > .u-wrapper:last-of-type {
    border-width: 0;
  }
  .u-wrapper {
    border-style: solid;
    border-color: $color-stone-200;
    border-width: 0 0 1px;
  }
  .c-card {
    border-width: 0;
    height: 100%;
  }
  // The first card in each of the top package types
  .c-card--first,
  .c-card--hero-lede,
  .c-card--g2-lede,
  .c-card--g3-centre-lede,
  .c-card--g3-left-lede {
    padding: 0;
    .c-card__content {
      padding: 0 rem(10) rem(10);
    }
  }
}

.c-package__label,
.c-package__stories {
  display: block;
}

.c-package__label {
  @include font-gm-sans-bold;
  color: $color-grey-660;
  text-transform: uppercase;
  letter-spacing: rem(1);
  font-size: rem(12);
  line-height: 1;
  padding: rem(10);
}

.c-package__label-link {
  color: $color-grey-660;
  text-decoration: none;
  display: inline-block;
  &:hover,
  &:focus {
    text-decoration: underline;
  }
}

.c-package__label-link__icon {
  width: rem(10);
  height: rem(10);
  margin-left: rem(1.5);
  margin-top: rem(1);
  fill: $color-grey-300;
  display: inline-block;
  vertical-align: top;
}

.c-package__col {
  display: block;
  &:last-of-type {
    .u-wrapper:last-of-type {
      border-width: 0;
    }
  }
}
