@import "mixins/tools.mixins";

.c-package--visual-top {
  background: none;
  border: none;
  .u-wrapper {
    border-width: 0;
    margin-bottom: rem(10);
  }

  .u-wrapper:first-of-type {
    .c-card {
      padding: 0;
    }
    .c-card__grid {
      @include grid-template-columns(0, 1fr);
      @include grid-template-rows(rem(10), grid-repeat(2, auto));
    }

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

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

    .c-card__dek {
      display: block;
      @include font-hed(15, 18, normal);
    }

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

  // Visual Top Packages always show the featured image, not the author photo
  .c-card--opinion,
  .c-card--column {
    .c-card__media {
      >.c-image {
        display: none;
      }
      .c-image-container {
        display: block;
      }
    }
  }

  .c-card {
    border: 1px solid $color-stone-200;
    .c-card__media {
      display: block;
      width: rem(110);
    }
  }

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