/* multi.css — minimal hover-to-swap gallery for step images */
.cf-step-gallery .cf-main img { max-width: 100%; height: auto; display:block; }

/* Let each step set --cf-main-w and --cf-thumb-w if desired */
.cf-step-gallery .cf-main {
  max-width: var(--cf-main-w, 720px);
  height: auto;
  display: block;
}

.cf-step-gallery .cf-thumbs {
  display: flex; gap: 6px; flex-wrap: wrap;
}

.cf-step-gallery .cf-thumbs img {
  width: var(--cf-thumb-w, 72px);
  height: auto;
  object-fit: cover;
  opacity: 0.7;
  cursor: pointer;
  border: 1px solid #ccc;
}
.cf-step-gallery .cf-thumbs img.active { opacity: 1; border-color: #111; }

/* Keep a tiny right gutter on narrow screens */
.cf-step-gallery { display:grid; gap:8px; padding-right:12px; }

/* Main image sizing (tunable per step) */
.cf-step-gallery .cf-main {
  max-width: var(--cf-main-w, 720px);
  width: 100%;
  height: auto;
  display: block;
}