@import "tools.mixins";

@mixin c-package-visual-top-sm {
  .c-package--visual-top {
    .c-package__stories {
      @include display-grid;
      @include grid-template-columns(rem(20), grid-repeat(4, 1fr));
      @include grid-template-rows(rem(20), grid-repeat(2, auto));
    }

    .u-wrapper {
      @include display-grid;
      margin-bottom: 0;
      .c-card {
        padding: 0;
      }

      .c-card__grid {
        @include grid-template-columns(0, 1fr);
        @include grid-template-rows(rem(10), auto 1fr);
        align-items: center;
      }

      .c-card__content {
        @include grid-column(1, 2);
        @include grid-row(2, 3, true);
        text-align: left;
        padding: 0 rem(10) rem(10);
      }

      .c-card__media {
        @include grid-column(1, 2);
        @include grid-row(1, 2, true);
        width: 100%;
      }
    }

    .u-wrapper:first-of-type {
      @include grid-column(1, 5, true);
      @include grid-row(1, 2, true);
      .c-card {
        margin-left: 0;
        margin-right: 0;
      }
      .c-card__grid {
        @include grid-template-columns(rem(20), auto 1fr);
        @include grid-template-rows(0, 1fr);
        align-items: center;
      }

      .c-card__content {
        @include grid-column(2, 3, true);
        @include grid-row(1, 2);
        text-align: center;
        @include grid-align-self(center);
        padding: rem(10) rem(20) rem(10) 0;
      }

      .c-card__hed {
        @include font-hed(22, 25);
      }

      .c-card__dek {
        @include font-hed(17, 20, normal);
      }

      .c-card__media {
        @include grid-column(1, 2, true);
        @include grid-row(1, 2);
        width: rem(339);
      }
    }

    .u-wrapper:nth-of-type(n+2) {
      @include grid-row(2, 3, true);
    }

    .u-wrapper:nth-of-type(2) {
      @include grid-column(1, 2, true);
      .c-card {
        margin-left: 0;
      }
    }

    .u-wrapper:nth-of-type(3) {
      @include grid-column(2, 3, true);
    }

    .u-wrapper:nth-of-type(4) {
      @include grid-column(3, 4, true);
    }

    .u-wrapper:nth-of-type(5) {
      @include grid-column(4, 5, true);
      .c-card {
        margin-right: 0;
      }
    }
  }
}

@mixin c-package-visual-top-md {
  .c-package--visual-top {
    .u-wrapper {
      .c-card__hed {
        @include font-hed(19, 22);
      }
    }
    .u-wrapper:first-of-type {

      .c-card__grid {
        @include grid-template-columns(rem(30), auto 1fr);
      }

      .c-card__content {
        padding: rem(10) rem(30) rem(10) 0;
      }

      .c-card__hed {
        @include font-hed(28, 31);
      }

      .c-card__media {
        width: rem(539);
      }
    }
  }
}

@mixin c-package-visual-top-lg {
  .c-package--visual-top {
    .u-wrapper:first-of-type {

      .c-card__grid {
        @include grid-template-columns(rem(40), auto 1fr);
      }

      .c-card__content {
        padding: rem(10) rem(40) rem(10) 0;
      }

      .c-card__hed {
        @include font-hed(38, 41);
      }

      .c-card__dek {
        @include font-hed(24, 26, normal);
      }

      .c-card__media {
        width: rem(780);
      }
    }
  }
}
