/*
This applies to both Related Posts and Related Products blocks. Both use a Card Group variation as their outer wrapper.

In Support Article template this is presented as a list of links, but in other templates it's a grid of cards.

This block is dynamically hidden on Tutorial Access product pages.
*/

/* If empty, hide the whole container */
#related-posts,
#related-products {
  &:not(:has(ul)) {
    display: none;
  }
}

/* Tweak the sizing for this one, which appears on Tutorial CPT pages  */
#related-posts {
  ul {
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(max(150px, calc(25% - 0.9375em)), 1fr)
      );
    row-gap: 1rem;
    li {
      margin-bottom: 0 !important;
      a {
        margin-bottom: 0;
      }
    }
  }
  /*  This variant is used on Support Article template */
  &.list {
    ul {
      display: flex !important;
      flex-direction: column;
      gap: 1em;
      padding: 0 1.75em;
      text-align: left;
      list-style-type: disc;
      li {
        display: list-item;
      }
    }
  }
}