/* Related Posts */
.related-posts {
  margin: 40px 0;
}
.related-posts h3 {
  font-size: 1.5em;
  margin-bottom: 20px;
  color: var(--card-text);
}

.related-posts-grid {
    display: grid;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: flex-start; /* Align posts to the left */
  position: relative;
  grid-template-columns: repeat(3, 1fr);
  }

  .related-post {
    background: var(--card-bg);
    border-radius: 8px;
    overflow: hidden;
    flex: 1 1 calc(33.333% - 20px);
    box-shadow: 0 2px 8px var(--card-shadow);
    transition: transform 0.2s ease;
    max-width: 320px; /* Prevents single post from stretching */
  }  

.related-post:hover {
  transform: translateY(-2px);
}

.related-post img {
    width: 100%;
  display: block;
  object-fit: cover;
  height: 170px;
  }
  
  @media (max-width: 768px) {
    .related-post img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    display: block;
  }
  }

.related-post-title {
  padding: 10px;
  font-size: 1em;
  color: var(--card-text);
}

h4.related-post-title {
    color: var(--accent-color);
  }

  @media (max-width: 768px) {
    .related-posts-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
    }
  }