@import "import";

.articleCard {
  display: grid;
  grid-gap: spacer(6);
  cursor: pointer;

  .content {
    @include flex(column, flex-start, flex-start);
    gap: spacer(2);
  }

  .title {
    font-family: font-family(serif);
    font-weight: font-weight(regular);
  }

  .date,
  .publication {
    color: color(text-faint-light);
    font-size: 1.6rem;
  }

  .tags {
    margin-top: spacer(4);
    z-index: z(1);
    ul {
      flex-wrap: wrap;
    }
  }

  .icon {
    height: 0.65em;
    margin-left: spacer(1);
  }

  &.news {
    gap: spacer(3);
  }

  &:hover {
    .title {
      text-decoration: underline;
      text-decoration-thickness: from-font;
      text-underline-offset: 0.15em;
    }
  }
}

.articleCard.featured {
  @include breakpoint(medium) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .title {
    @include type-item(heading-1);
  }

  .coverImageContainer {
    position: relative;
    height: 60vh;
    width: 100%;
  }
}

.articleCard.standard {
  width: 100%;
  height: 100%;

  @include breakpoint(medium) {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .image {
    @include breakpoint(medium) {
      grid-column: 1 / span 2;
    }
  }

  .content {
    @include breakpoint(medium) {
      grid-column: 3 / span 2;
    }
  }

  .title {
    font-size: 2.6rem;

    @include breakpoint(medium) {
      font-size: 3rem;
    }
  }

  .coverImageContainer {
    position: relative;
    height: 100%;
    width: 100%;
  }
}