.articleCard {
  .articleCollectionAlpha &:first-of-type {
    display: flex;
    margin-bottom: 1rem;
    grid-column: 1 / 3;
    flex-direction: column;
    align-items: flex-start;

    @include media(m-up) {
      display: grid;
      margin-bottom: 2rem;
      grid-column: 1 / 3;
      grid-template-columns: 48.5% 48.5%;
      grid-column-gap: 3%;
      grid-template-rows: 33% 33% 33%;
    }

    @include media(xxm-up) {
      grid-column: 1 / 5;
    }
  }

  .articleCollectionAlpha &:nth-of-type(n + 2) {
    display: grid;
    margin-bottom: 3rem;
    padding-top: 0.75rem;
    border-top: 1px solid c(black);
    grid-template-columns: 48.5% 48.5%;
    grid-column-gap: 5%;
    grid-template-rows: 33% 33% 33%;
    grid-row-gap: 0.25rem;

    @include media(m-up) {
      display: flex;
      padding-left: 0.75rem;
      border-top: 0;
      padding-top: 0;
      border-left: 1px solid c(gray-2);
      flex-direction: column;
      justify-content: flex-start;
      flex-wrap: no-wrap;
    }
  }

  .articleCollectionBeta & {
    display: grid;
    margin-bottom: 3rem;
    padding-top: 0.75rem;
    border-top: 1px solid c(black);
    grid-template-columns: 48.5% 48.5%;
    grid-column-gap: 5%;
    grid-template-rows: 33% 33% 33%;
    grid-row-gap: 0.25rem;

    @include media(m-up) {
      display: flex;
      padding-left: 0.75rem;
      padding-top: 0;
      border-top: 0;
      border-left: 1px solid c(gray-2);
      flex-direction: column;
      justify-content: flex-start;
      flex-wrap: no-wrap;
    }
  }
}

.articleCard__title {
  margin-bottom: 1rem;

  .articleCollectionAlpha .articleCard:first-of-type & {
    @include media(m-up) {
      grid-column: 2 / 2;
      grid-row: 1 / 1;
    }
  }

  .articleCollectionAlpha .articleCard:nth-of-type(n + 2) &,
  .articleCollectionBeta & {
    grid-column: 2 / 2;
    grid-row: 1 / 1;
  }

  h3 {
    .articleCollectionAlpha .articleCard:first-of-type & {
      @include headerTwo;
    }

    .articleCollectionBeta & {
      @include headerThree;
    }
  }
}

.articleCard__picture {
  .articleCollectionAlpha .articleCard:first-of-type & {
    width: 100%;
    margin-bottom: 1rem;
    order: -1;

    @include media(m-up) {
      position: relative;
      width: auto;
      margin-bottom: 1rem;
      grid-column: 1 / 1;
      grid-row: 1 / 5;
    }

    @include media(xxm-up) {
      margin-bottom: 0;
    }
  }

  .articleCollectionAlpha .articleCard:nth-of-type(n + 2) &,
  .articleCollectionBeta & {
    position: relative;
    grid-column: 1 / 1;
    grid-row: 1 / 4;

    @include media(m-up) {
      margin-bottom: 1rem;
    }
  }

  img {
    .articleCollectionAlpha .articleCard:first-of-type & {
      margin: 0 auto;
    }

    .articleCollectionAlpha .articleCard:nth-of-type(n + 2) &,
    .articleCollectionBeta & {
      position: relative;
      margin: 0 auto;
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;

      @include media(m-up) {
        margin: 0 0;
      }
    }
  }
}

.articleCard__summary {
  margin-bottom: 1rem;

  .articleCollectionAlpha .articleCard:first-of-type & {
    position: relative;
    grid-column: 2 / 2;
    grid-row: 2 / 2;
  }

  .articleCollectionBeta & {
    display: none;

    @include media(m-up) {
      display: block;
      margin-bottom: 1rem;
    }
  }

  p {
    .articleCollectionAlpha .articleCard:nth-of-type(n + 2) &,
    .articleCollectionBeta & {
      @include leadTwo;
    }
  }
}

.articleCard__metadata {
  .articleCollectionAlpha .articleCard:first-of-type & {
    position: relative;
    grid-column: 2 / 3;
    grid-row: 3 / 3;
  }

  .articleCollectionAlpha .articleCard:nth-of-type(n + 2) &,
  .articleCollectionBeta & {
    margin-bottom: 1rem;
    grid-column: 2 / 2;
    grid-row: 2 / 2;

    @include media(m-up) {
      display: flex;
      padding-left: 0;
      margin-bottom: 0;
      flex-grow: 1;
      flex-direction: row;
      align-items: flex-end;
    }
  }

  .articleCollectionAlpha .articleCard:nth-of-type(n + 2) & {
    grid-row: 3 / 3;
  }

  li {
    margin-bottom: 0.3125rem;
  }

  a {
    .articleCollectionAlpha .articleCard:nth-of-type(n + 1) &,
    .articleCollectionBeta & {
      @include metaOne;
    }
  }
}