@mixin root() { ... }@mixin root() { 
  // Container for the navigation tile carousel
 }

@mixin content() { ... }@mixin content() { 
  display: flex;
  flex-direction: column;
  gap: settings.$gap-small;
 }

@mixin carousel-content-override() { ... }@mixin carousel-content-override() { 
  // Default: Single row
  display: flex;
  flex-direction: row;
  gap: spacing.get('s2');

  // Responsive: Switch to dual rows when BOTH conditions are met:
  // 1. Mobile screen (max-sm)
  // 2. 6+ items (detected by :has() selector)
  @include media.query('max-sm') {
    // Switch to dual layout when there are 6+ items (2 rows present)
    /* stylelint-disable-next-line plugin/use-baseline -- Progressive enhancement: :has() selector is non-critical, gracefully ignored in unsupported browsers */
    &:has(.kib-navigation-tile-carousel__row:nth-child(2)) {
      @include content;
    }
  }
 }

@mixin row() { ... }@mixin row() { 
  display: flex;
  flex-direction: row;
  gap: spacing.get('s2');
  flex-shrink: 0;
 }

@mixin tile() { ... }@mixin tile() { 
  height: 100%;
 }

$gap-small: spacing.get('s2') !default;