main:has(.related) {
  padding-bottom: 0;
}

.related {
  background-color: var(--color-iron-300);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
  z-index: 0;
  position: relative;

  >.container {
    position: static;

    >.background {
      z-index: 1;

      >div {
        border-left: 1px solid var(--color-iron-400);
        display: none;
        flex: 1 1 0%;
      }

      @media (min-width: 64rem) {
        >div:nth-child(-n+2) {
          display: block;
        }
      }

      @media (min-width: 75rem) {
        >div:nth-child(-n+3) {
          display: block;
        }
      }
    }

    >div:nth-child(2) {
      >h2 {
        margin-bottom: var(--baseline);
      }

      @media (min-width: 64rem) {
        .blog-card-list {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      @media (min-width: 75rem) {
        .blog-card-list {
          grid-template-columns: repeat(3, 1fr);
        }
      }
    }
  }
}