s only (the FotAi * circuit is a different element type, so it doesn't shift the count). */ .mirror-root .home-collage__col:nth-of-type(even) { margin-top: 40px; } .mirror-root .home-collage__img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 0 35px 10px #000c; object-fit: cover; } /* Mid widths: trim the max column so 4 FotAi columns keep breathing room * before the flex-wrap kicks them onto a second line. */ @media (max-width: 1100px) { .mirror-root .home-collage__col { max-width: 155px; } } /* Mobile: collage spans the full width of its (stacked) section column and * keeps two staggered columns, tighter gaps. `!important` beats the bundle's * desktop width:50%/45% on block--23-143/-162. */ @media (max-width: 767px) { .mirror-root .block.home-collage { width: 100% !important; padding-left: 0; gap: 10px; justify-content: center; } .mirror-root .home-collage__col { flex: 1 1 42%; max-width: 46%; gap: 10px; } .mirror-root .home-collage__col:nth-of-type(even) { margin-top: 24px; } } /* --- PicBot spotlight row (block--23-157) — desktop proportions ---------- * Owner-tuned split for the #picbot section: even 50/50 columns instead of * the bundle's 55/45, the text column pushed a further 100px off the * collage (padding-left 100px → 200px), and the row's own right padding * dropped so the collage can breathe out to the container edge. * * Bundle values being overridden (all unscoped, so they'd otherwise apply * at every width): * .block--23-157 { width: 100%; padding-right: 100px } * .block--23-158 { width: 55%; padding-left: 100px } * .block--23-162 { width: 45%; padding-top: 80px } * * Scoped ≥1024, not ≥768. A 200px inset on a half-width column needs the * width to pay for it: at 768 the container is 688px, so the text column * would be 344 − 200 = 144px and the copy would wrap two words per line. * Below 1024 the bundle's 55/45 + 100px split stays, and below 768 * _base.css stacks the whole row. Compound `.block.block--23-*` matches * bundle specificity; the override bundle loads later, so equal * specificity is enough (no !important). */ @media (min-width: 1024px) { .mirror-root .block.block--23-157 { width: 100%; padding-right: 0; } .mirror-root .block.block--23-158 { width: 50%; padding-left: 200px; } .mirror-root .block.block--23-162 { width: 50%; padding-top: 80px; } } /* ========================================================================== * Mobile annotation round 8 (#104..#110) * ======================================================================= */ /* --- #104 spotlight collages → two independent columns ------------------ * Round 4 (#80..#84) turned every image container into its own 2-col grid. * That makes each container a ROW, so the two containers of a section * cannot interleave: the lower-left image can only start below the TALLEST * image of the row above, leaving a hole under the shorter one. Owner saw * this as "bottom-left image floating too low" on Mosaix / ChiMind. * * Fix: promote the shared parent to the 2-col grid and let each original * container be one column (flex column). Left images stack directly under * each other, right images likewise — the desktop intent at mobile width. * * Nesting (parent > columns > images): * Mosaix 23-178 > 23-179 [180,181] | 23-182 [184,185] * PixDron 23-192 > 23-193 [204,196] | 23-195 [197] * ChiMind 23-226 > 23-227 [228,229] | 23-230 [231] * Graffit.X 23-241 > 23-242 [243,244] | 23-245 [246] * * Declared after the round-4 block so it wins on source order at equal * specificity. */ @media (max-width: 767px) { .mirror-root .section .block.block--23-178, .mirror-root .section .block.block--23-192, .mirror-root .section .block.block--23-226, .mirror-root .section .block.block--23-241 { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 12px; } .mirror-root .section .block.block--23-179, .mirror-root .section .block.block--23-182, .mirror-root .section .block.block--23-193, .mirror-root .section .block.block--23-195, .mirror-root .section .block.block--23-227, .mirror-root .section .block.block--23-230, .mirror-root .section .block.block--23-242, .mirror-root .section .block.block--23-245 { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: 100%; margin-bottom: 0; padding-left: 0; padding-right: 0; } } /* --- #105 FotAi → PicBot gap --------------------------------------------- * Every spotlight after FotAi carries a bundle rule with FIVE classes — * `.mirror-root .section.product-spotlight--picbot.product-spotlight * .section-container { padding-top: 70px; padding-bottom: 100px }` — so * those sections sit 100 + 70 = 170px apart. FotAi has no such bundle rule, * so it falls back to #54's 30px and the FotAi→PicBot seam is only * 30 + 70 = 100px: visibly tighter than every other seam. Match it. * * NB the compound `.product-spotlight--x.product-spotlight` in the bundle * outranks the 4-class selectors used above (which is why #90's 80px * padding-top never actually applied — measured value is still 70px). * Anything that needs to beat the bundle here has to repeat the compound. */ @media (max-width: 767px) { .mirror-root .section.product-spotlight--fotai .section-container { padding-bottom: 100px; } } /* --- #106 PicBot collage → balanced 2-column masonry -------------------- * `.home-collage` is a flex-wrap row of `__col` columns. FotAi has 4 of * them (wraps 2 + 2, even, fine); PicBot has 3, so the third wraps onto a * row of its own and `justify-content: center` parks it in the middle — * the misalignment the owner flagged. Three columns side by side would * put each image at ~110px on a 375 screen, too small to read. * * Instead flow all 7 images through a 2-column multicol: `display: * contents` dissolves the `__col` wrappers so the images become the * multicol content, and the browser balances the two columns by height. * `break-inside: avoid` keeps an image from splitting across the columns. * Scoped to PicBot — FotAi's even wrap is not broken and stays as it is. */ @media (max-width: 767px) { .mirror-root .block.home-collage--picbot { display: block; columns: 2; column-gap: 12px; } .mirror-root .home-collage--picbot .home-collage__col { display: contents; } .mirror-root .home-collage--picbot .home-collage__img { display: block; width: 100%; margin: 0 0 12px; break-inside: avoid; } } /* --- #107 PixDron right column drops to mid-height ---------------------- * The right column holds a single image; flush with the top of the left * column it reads as a failed 2×2 grid. Owner wants it "between the two * left ones", so offset it by half a column width — percentage margins * resolve against the containing block's inline size, so this scales with * the viewport instead of drifting at 375 vs 767. */ @media (max-width: 767px) { .mirror-root .section .block.block--23-195 { margin-top: 90%; } } /* --- #108 ChiMind left column starts above the right ------------------- * Same single-image right column as PixDron, but the owner wants only a * slight stagger here — enough to break the flush top edge, not enough to * push the right image past the left column's first image. Graffit.X has * the identical 2-left/1-right shape, so it takes the same offset — its * images were the ones the owner called unevenly spaced, and matching the * ChiMind rhythm is what makes the pair read as deliberate. */ @media (max-width: 767px) { .mirror-root .section .block.block--23-230, .mirror-root .section .block.block--23-245 { margin-top: 12%; } }