/*
 * Banner groups. Desktop: grid of --mkb-cols columns, each banner spans --mkb-span.
 * Mobile (< 768px): .mkb--m-stack (one per row), .mkb--m-grid2 (two columns), .mkb--m-scroll (swipe).
 * Spacing and corners follow the theme variables.
 * @author mahdi kazemzadeh
 */
.mkb { display: grid; grid-template-columns: repeat(var(--mkb-cols, 3), minmax(0, 1fr)); gap: var(--k2-gap, 16px); align-items: start; }
.mkb__item { display: block; grid-column: span var(--mkb-span, 1); border-radius: var(--k2-radius, 14px); overflow: hidden; background: #ececec; }
.mkb__item picture { display: block; }
.mkb__img { display: block; width: 100%; height: auto; transition: transform .4s ease; }
a.mkb__item:hover .mkb__img { transform: scale(1.02); }

@media (max-width: 767.98px) {
  .mkb { gap: 12px; }
  .mkb--m-stack { grid-template-columns: minmax(0, 1fr); }
  .mkb--m-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mkb--m-stack .mkb__item, .mkb--m-grid2 .mkb__item { grid-column: auto; }
  .mkb--m-scroll { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; }
  .mkb--m-scroll::-webkit-scrollbar { display: none; }
  .mkb--m-scroll .mkb__item { flex: 0 0 82%; scroll-snap-align: start; }
  .mkb__item { border-radius: var(--k2-radius-sm, 10px); }
}

@media (prefers-reduced-motion: reduce) {
  .mkb__img { transition: none; }
}