/* Converted from src/components/site/blog/RelatedPosts.module.css (CSS Module): local classes are prefixed "blog-related-posts__". */
/* "Related Posts" section under a post (original: 1144px box, 3 cards, no entrance animation). */

/* The theme's bottom spacing: 8vh (5vh up to 1180px), like the archives' bottom offset. */
.blog-related-posts__related {
  padding-bottom: 8vh;
}

.blog-related-posts__container {
  max-width: 1144px;
  margin-inline: auto;
  padding-inline: 16px;
}

.blog-related-posts__heading {
  margin: 0 0 20px;
  font-family: var(--font-heading);
  font-size: calc(var(--text-base) * 1.5); /* 24.6px */
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--color-heading);
}

/* Stacked cards (one or two columns) were 1rem apart here, unlike the archives. */
.blog-related-posts__related .blog-related-posts__grid {
  row-gap: 1rem;
}

@media (max-width: 1180px) {
  .blog-related-posts__related {
    padding-bottom: 5vh;
  }
}

/* Tablets: the post's container had 5% side padding (51.2px at 1024px), 16px again on phones. */
@media (min-width: 769px) and (max-width: 1180px) {
  .blog-related-posts__container {
    padding-inline: 5%;
  }
}

/*
 * Two columns: the original cards were floats (vc_col-md-6, 16px padding), not grid rows. The
 * third card sits right under the second one, beside the first when that one is taller.
 */
@media (min-width: 769px) and (max-width: 1199px) {
  .blog-related-posts__related .blog-related-posts__grid {
    display: flow-root;
    margin: 0 -1rem -1rem;
  }

  .blog-related-posts__related .blog-related-posts__grid > li {
    float: left;
    width: 50%;
    padding: 0 1rem 1rem;
  }
}

/* On phones the gap above this section is the in-flow, invisible "Next Post" card (NextPostNav). */
@media (max-width: 768px) {
  .blog-related-posts__heading {
    font-size: 1.35rem; /* 21.6px */
    line-height: 1.3;
  }
}