/* API products are ordinary grid items. No slots, line clamps or scrollbox;
   names, optional images and extra rows contribute to the section's height. */
.landing-related-products { margin: 0; min-width: 0; }
.landing-related-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(9.5rem, 11vw)), 1fr));
  grid-auto-rows: auto;
  align-items: stretch;
  gap: max(14px, 1.8vw);
}
.landing-related-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  gap: .4em .5em;
  min-width: 0;
  min-height: max(92px, 8vw);
  padding: 1.25em 1.35em;
  border-radius: 999px;
  color: #fff;
  font-size: max(1rem, 1.3vw);
  text-align: left;
  overflow-wrap: anywhere;
}
/* The original text-free capsule is the only positioned layer. */
.original-related-art { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.landing-related-name { grid-column: 1; grid-row: 1; min-width: 0; font-weight: 600; line-height: 1.45; }
.original-related-caption { grid-column: 1; grid-row: 2; display: flex; align-items: center; gap: .3em; font-size: max(.75rem, .9vw); line-height: 1.5; }
.original-related-caption img { width: 1.2em; height: 1.2em; flex-shrink: 0; }
.landing-related-image { grid-column: 2; grid-row: 1 / 3; width: max(36px, 3.2vw); height: max(36px, 3.2vw); object-fit: contain; border-radius: .3em; }
@media (max-width:1100px) {
  .landing-related-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(9rem, calc((100% - max(12px, 2vw)) / 2))), 1fr)); gap: max(12px, 2vw); }
  .landing-related-card { font-size: max(1rem, 2.5vw); min-height: max(92px, 12vw); padding: 1.1em; }
  .original-related-caption { font-size: max(.75rem, 1.8vw); }
}
/* Crop the texture proportionally when names grow; do not stretch it into a
   vertical stripe. The outline and gradient match the original capsule. */
.landing-related-card { border: 1px solid #b86d24; border-radius: clamp(36px,8vw,90px); background: linear-gradient(110deg,#361407,#873907); }
.original-related-art { object-fit: cover; border-radius: inherit; }
/* PC Figma cards alternate between y=2229 and y=2141 at 1920px.
   Matching flow margins reserve the 88px step in each row, including rows
   added by API data or enlarged text. A lone product needs no stagger. */
@media (min-width:901px) {
  .artboard-pc .landing-related-list { --related-stagger: 4.583333vw; }
  .artboard-pc .landing-related-card:nth-child(odd):not(:only-child) { margin-block-start: var(--related-stagger); }
  .artboard-pc .landing-related-card:nth-child(even) { margin-block-end: var(--related-stagger); }
}