.blog-articles {
  display: grid;
  grid-gap: 1rem;
  column-gap: var(--grid-mobile-horizontal-spacing);
  row-gap: var(--grid-mobile-vertical-spacing);
}

.blog-articles .card-wrapper {
  width: 100%;
}

@media screen and (min-width: 750px) {
  .blog-articles {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--grid-desktop-horizontal-spacing);
    row-gap: var(--grid-desktop-vertical-spacing);
  }
}

/* Custom Styles ==================================================================================================== */
.main-blog {
  padding-top: 0;

  h1 {
    margin-top: 0;
  }
}

[data-template="blog"] {
  .section-tiles {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .card__content {
    .card__information {
      .link {
        color: var(--color-medium-blue);
      }
    }
  }
}

@media screen and (min-width: 1000px) {
  .blog-articles--collage {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .article-card__info {
    text-align: left;
  }

  /* Large hero cards: #1 and #4 */
  .blog-articles--collage > :nth-child(1),
  .blog-articles--collage > :nth-child(4) {
    grid-column: span 4;
    text-align: center;

    .card__content {
      .card__information {
        padding: 50px 80px 60px 80px;

        h3.card__heading {
          text-align: center;
          font-size: 50px;
          line-height: 60px;
          max-width: 1024px;
          width: 100%;
          margin-left: auto;
          margin-right: auto;
        }

        .link {
          display: inline-block;
          text-align: center;
        }

        .article-card__excerpt,
        .article-card__info {
          text-align: center;
        }
      }
    }
  }

  /* Half-width cards: #2, #3, #5, #6 */
  .blog-articles--collage > :nth-child(2),
  .blog-articles--collage > :nth-child(3),
  .blog-articles--collage > :nth-child(5),
  .blog-articles--collage > :nth-child(6) {
    grid-column: span 2;

    .card__content {
      .card__information {
        padding: 25px 30px 50px 30px;

        h3.card__heading {
          font-size: 35px;
          line-height: 45px;
        }
      }
    }
  }

  /* Everything after #6 = standard 4-up */
  .blog-articles--collage > :nth-child(n + 7) {
    grid-column: span 1;
    text-align: left;
  }
}

.blog-header__description.rte {
  margin-bottom: 50px;

  @media screen and (min-width: 750px) {
    margin-bottom: 70px;
  }
}

.blog-articles {
  margin-bottom: 80px;

  @media screen and (min-width: 750px) {
    margin-bottom: 120px;
  }

  &.blog-articles--paginated {
    margin-bottom: 0;
  }
}