/* ==================================
   KK GRID v1
   Default: stack
   Add only what you need
================================== */

.kk-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--kk-space-8); /* default gap */
}

/* Gap */
.kk-gap-s { gap: var(--kk-space-8); }
.kk-gap-s { gap: var(--kk-space-16); }
.kk-gap-m { gap: var(--kk-space-24); }
.kk-gap-l { gap: var(--kk-space-40); }

/* Medium – first break out of stack */
@media (min-width: 768px) {
  .kk-md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kk-md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

/* Large – desktop layouts */
@media (min-width: 1024px) {
  .kk-lg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kk-lg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kk-lg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Asymmetrical */
  .kk-lg-4-8 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .kk-lg-8-4 { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .kk-lg-3-9 { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }
  .kk-lg-9-3 { grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); }
}

/* Auto grid – content driven */
.kk-auto-grid {
  display: grid;
  gap: var(--kk-space-24);
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}