/* Grid (not flex) on purpose: each CategoryShowcaseItem renders through
   IkasComponentRenderer's nested display:contents wrappers (one for the
   whole list, one per-instance for the child's own CSS scope) — relying
   on the ITEM to size itself via a flex-basis percentage through that
   chain has proven unreliable on some mobile browsers elsewhere in this
   project (see Footer/styles.css's trust badges section). Grid sidesteps
   that: grid-template-columns is declared entirely on this container,
   and a grid item defaults to stretching to fill its assigned column
   without needing to declare its own width at all. Row height isn't
   fixed here — each item sets its own aspect-ratio (CategoryShowcaseItem/
   styles.css), driven by the aspectRatio/objectFit props below via
   inherited CSS custom properties (inheritance crosses display:contents
   boundaries reliably, unlike flex-basis resolution — same reasoning). */
.cc_llcvgyda_FvfvX4tYDJ .nisa-category-showcase {
  display: grid;
  grid-template-columns: repeat(var(--nisa-showcase-columns, 2), 1fr);
  gap: var(--nisa-showcase-gap, 0px);
}

/* Matches Navbar's side padding (--nisa-nav-side) so a non-full-width
   showcase lines up with the header's content edges. */
.cc_llcvgyda_FvfvX4tYDJ .nisa-category-showcase--inset {
  padding-inline: clamp(16px, 4.83vw, 32px);
}

@media (max-width: 1023px) {
  .cc_llcvgyda_FvfvX4tYDJ .nisa-category-showcase {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc_llcvgyda_FvfvX4tYDJ .nisa-category-showcase * {
    transition: none !important;
  }
}