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

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

.c-card--appointment {
  .c-card__grid {
    @include grid-template-columns(0, 1fr);
    @include grid-template-rows(rem(5), 1fr auto);
  }
  .c-card__content {
    @include grid-column(1, 2);
    @include grid-row(2, 3, true);
  }
  .c-card__media {
    @include grid-column(1, 2);
    @include grid-row(1, 2, true);
    width: 100%;
  }
  .c-image {
    width: 100%;
  }

  .c-card__link {
    &:visited {
      .c-card__hed,
      .c-card__dek {
        color: $color-grey-660;
        text-decoration: underline;
      }
    }
    &:hover,
    &:focus {
      .c-card__hed,
      .c-card__dek {
        text-decoration: underline;
      }
    }

    &:active {
      .c-card__hed,
      .c-card__dek {
        color: $color-grey-300;
        text-decoration: underline;
      }
    }
  }

  .c-card__hed {
    margin-bottom: 0;
    font-family: $font-sans-stack;
    font-weight: bold;
    color: $color-grey-900;
    letter-spacing: 0;
    font-size: rem(15);
    line-height: line-height(15, 18);
  }

  .c-card__dek {
    display: block;
    margin-top: rem(5);
    margin-bottom: 0;
    font-family: $font-sans-stack;
    color: $color-grey-900;
    letter-spacing: 0;
    font-size: rem(14);
    line-height: line-height(14, 17);
    padding: 0;
  }
}
