.nsw-card {
  @include font-stack;
  @include border-radius;
  background-color: $white;
  box-shadow: map-get($shadows, card);
  transition: map-get($transitions, card);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  max-width: rem(400px);
  border: 0;

  &:hover {
    box-shadow: map-get($shadows, card-hover);
  }

  &:focus-within {
    @include nsw-focus;

    .nsw-card__link {
      text-decoration: none;
    }
  }

  &__title {
    @include font-stack('heading');
    @include font-size('md');
    @include nsw-spacing(margin, none none sm none);
  }

  &__content {
    @include font-size('sm');
    @include nsw-spacing(padding, sm);
    border-top: solid 6px $nsw-primary-highlight;
    display: flex;
    flex-direction: column;
    order: 2;


    @include breakpoint('lg') {
      @include nsw-spacing(padding, md);
    }

    p {
      @include nsw-spacing(margin, none none sm none);
    }
  }

  &__tag {
    @include font-stack('heading');
    order: 1;
  }

  &__date {
    order: 2;
  }

  &__tag,
  &__date {
    @include font-size('xs');
  }

  &__title,
  &__copy,
  &__icon {
    order: 3;
  }

  &__icon {
    width: rem(24px);
    height: rem(24px);

    @include breakpoint('md') {
      width: rem(24px);
      height: rem(24px);
    }
  }

  &__link {
    @include pseudo-clickable-block;
    text-decoration: none;
    color: $nsw-primary-blue;

    &:hover {
      text-decoration: underline;
    }

    &:focus {
      outline: none;
      text-decoration: underline;
    }
  }

  &__image-area {
    order: 1;
    height: rem(200px);
  }

  &__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.nsw-card--headline {
  .nsw-card__title {
    @include font-size('xl');
  }
}