:root {
  /* Safe defaults when JS (layout.js) is not running */
  --cols-xs: 1;
  --cols-sm: 1;
  --cols-md: 2;
  --cols-lg: 3;
  --cols-xl: 3;
  --cols-xxl: 3;
}

/* Base grid for RSL layouts */
.slot-layout,
.nested-slot-layout {
  display: grid;
  gap: 1rem;
  /* Mobile-first: XS (fallback if JS never sets --dynamic-cols) */
  grid-template-columns: repeat(var(--dynamic-cols, var(--cols-xs)), 1fr);
}

/* ≥ 480px (SM) */
@media (min-width: 480px) {
  .slot-layout,
  .nested-slot-layout {
    grid-template-columns: repeat(var(--dynamic-cols, var(--cols-sm)), 1fr);
  }
}

/* ≥ 768px (MD) */
@media (min-width: 768px) {
  .slot-layout,
  .nested-slot-layout {
    grid-template-columns: repeat(var(--dynamic-cols, var(--cols-md)), 1fr);
  }
}

/* ≥ 1024px (LG) */
@media (min-width: 1024px) {
  .slot-layout,
  .nested-slot-layout {
    grid-template-columns: repeat(var(--dynamic-cols, var(--cols-lg)), 1fr);
  }
}

/* ≥ 1280px (XL) */
@media (min-width: 1280px) {
  .slot-layout,
  .nested-slot-layout {
    grid-template-columns: repeat(var(--dynamic-cols, var(--cols-xl)), 1fr);
  }
}

/* ≥ 1600px (XXL) */
@media (min-width: 1600px) {
  .slot-layout,
  .nested-slot-layout {
    grid-template-columns: repeat(var(--dynamic-cols, var(--cols-xxl)), 1fr);
  }
}

/* Individual slot items */
.slot-item {
  grid-row-start: var(--row-start, auto);
  grid-column-start: var(--column-start, auto);

  /* Allow explicit spans / end positions via CSS vars */
  grid-row-end: var(--row-end, auto);
  grid-column-end: var(--column-end, auto);
}

/* Optional helper: force an item to span all columns */
.slot-span-all {
  grid-column: 1 / -1;
}

/* Wrapper for nested grids inside a slot */
.slot-item-wrapper {
  display: grid;
  gap: 1rem;
}

/* Nested slot items (same positioning API) */
.nested-slot-item {
  grid-row-start: var(--row-start, auto);
  grid-column-start: var(--column-start, auto);
}

/* Container utilities */
.container {
  margin: 0 auto;
  width: 80%;
  max-width: 1200px;
}

.container-full {
  width: 100%;
  max-width: none;
}

.container-flex {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: none;
}

.container-fluid {
  width: 90%;
  margin: 0 auto;
}

/* Basic responsive images inside slots */
img {
  width: 100%;
}

/* Wrap for the float-based sidebar pattern */
.rsl-sidebar-layout {
  /* Contain the float so the parent’s height matches the taller of the two */
  overflow: hidden; /* establishes a BFC */
}

/* Sidebar floats left with fixed width */
.rsl-sidebar {
  float: left;
  width: 220px;          /* tweak as needed or make a CSS variable */
  margin: 0 1.5rem 1.5rem 0;
}

/* Content creates its own BFC so it sits next to the float,
   then full width below it */
.rsl-sidebar-content {
  overflow: hidden;
}

/* Mobile: stack sidebar over content */
@media (max-width: 768px) {
  .rsl-sidebar {
    float: none;
    width: auto;
    margin: 0 0 1rem 0;
  }

  .rsl-sidebar-content {
    overflow: visible;
  }
}

  
/*.slot-item {
    padding: 1rem 0;
}*/
 /* .slot-layout {
    display: grid;
    grid-template-columns: repeat(var(--dynamic-cols, var(--cols-lg)), 1fr);
    gap: 1rem;
} */

/*.slot-layout img.responsive-img{width:100%;height:auto}.slot-layout img.min-width-100{min-width:100px}.slot-layout img.min-width-200{min-width:200px}.slot-layout img.min-width-300{min-width:300px}.slot-layout img.max-width-100{max-width:100px}.slot-layout img.max-width-200{max-width:200px}.slot-layout img.max-width-300{max-width:300px} */