/* RELATED POSTS, fix left gutter but keep multi column layout */
@media (min-width: 768px) {
  .related-posts__posts {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
  }

  /* remove HubSpot grid offset */
  .related-posts__posts .related-blog-item.widget-span {
    margin-left: 0 !important;
  }

  /* 3 posts per row (span4) */
  .related-posts__posts .related-blog-item.span4 {
    flex: 0 0 calc((100% - 120px) / 3);
    max-width: calc((100% - 120px) / 3);
  }

  /* 2 posts per row (span6) */
  .related-posts__posts .related-blog-item.span6 {
    flex: 0 0 calc((100% - 60px) / 2);
    max-width: calc((100% - 60px) / 2);
  }

  /* 4 posts per row (span3) */
  .related-posts__posts .related-blog-item.span3 {
    flex: 0 0 calc((100% - 180px) / 4);
    max-width: calc((100% - 180px) / 4);
  }
}


/* RELATED POSTS, keep multi column layout */
@media (min-width: 768px) {
  .related-posts__posts {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
  }

  .related-posts__posts .related-blog-item.widget-span {
    margin-left: 0 !important;
  }

  /* 3 per row */
  .related-posts__posts .related-blog-item.span4 {
    flex: 0 0 calc((100% - 120px) / 3);
    max-width: calc((100% - 120px) / 3);
  }

  /* 2 per row */
  .related-posts__posts .related-blog-item.span6 {
    flex: 0 0 calc((100% - 60px) / 2);
    max-width: calc((100% - 60px) / 2);
  }

  /* 4 per row */
  .related-posts__posts .related-blog-item.span3 {
    flex: 0 0 calc((100% - 180px) / 4);
    max-width: calc((100% - 180px) / 4);
  }
}

/* FORCE the aspect ratio crop to work again */
.related-posts__posts .related-blog-item__image {
  width: 100%;
  overflow: hidden;
  aspect-ratio: var(--aspect-ratio, 2 / 1.1) !important;
  border-radius: var(--radius);
}

.related-posts__posts .related-blog-item__image img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
}

.related-posts__posts .related-blog-item__info h3 {
  font: var(--h6-font);
  letter-spacing: var(--h6-letter-spacing);
  color: var(--h6-color);
  margin-top: 0;
}

@media not screen and (min-width: 1024px) {
  .related-posts__posts .related-blog-item__info h6 {
    font-size: var(--h6-mobile-size);
    line-height: var(--h6-mobile-line-height);
  }
}

.related-posts__posts .related-blog-item__info h6,
.related-posts__posts .related-blog-item__info h6 a {
  text-transform: none;
}

/* Push the entire content down from the image */
.related-posts__posts .related-blog-item__info{
  padding-top: 25px padding-bottom: 1000px; 
}

@media (max-width: 767px){
  .related-posts__posts .related-blog-item{
    margin-bottom: 3rem;
  }
}