/**
 * product-related.css
 */

/* Component: ProductRelated */
.related {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 64px;

  .related-title {
    margin: 0;
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
  }

  /* The cards are styled in archive.css, so this only sets the columns. */
  .related-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--grid-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .related-item {
    min-width: 0;
  }
}

/* Tablet: Related Products */
@media (max-width: 1024px) {
  .related .related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile: Related Products */
@media (max-width: 767px) {
  .related {
    margin-bottom: 48px;

    .related-grid {
      gap: 48px 16px;
    }
  }
}