(not a direct child). The base rule
`.feature-card:has(.feature-card__icon){grid:52px 1fr}` then mis-seats the
wrapper DIV into the 52px column (squishing icon+title) and overlaps the
`.link-card__inline` "Läs mer →" span. Only priser-taxor uses this exact
markup. Restore a clean vertical card: header row (icon+title) then CTA.
Scoped to the nested-icon + link-inline combo so normal icon cards are
untouched. CSS-only, no DOM change → overrides safe. */
.feature-card:has(> div > .feature-card__icon):has(> .link-card__inline) {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 0.9rem !important;
grid-template-columns: none !important;
}
.feature-card:has(> div > .feature-card__icon):has(> .link-card__inline) > div {
width: 100%;
grid-column: auto !important;
}
.feature-card:has(> div > .feature-card__icon):has(> .link-card__inline) > .link-card__inline {
grid-column: auto !important;
white-space: nowrap !important;
align-self: flex-start !important;
}
/* ---- 24. PATTERN D (flow) — lopsided single-column "list stacks" → balanced 2 cols ----
"Så åtgärdar du problemet" (det-drar-kallt) had 4 h3+list sub-blocks stacked in
the left ~55%, dead right side. CSS multi-column balances them into 2 columns
without splitting a sub-block across the gap. No customer overrides on this page.
The intro
and the .btn-group stay full width (outside .gs-flow-2col). */
.gs-flow-2col {
column-count: 2;
column-gap: clamp(2rem, 4vw, 3.5rem);
margin-top: .25rem;
}
.gs-flow-2col > h3 {
break-inside: avoid;
break-after: avoid;
margin-top: 0 !important; /* first item flush to column top */
}
.gs-flow-2col > h3 ~ h3 { margin-top: 1.4rem !important; }
.gs-flow-2col > p,
.gs-flow-2col > ul { break-inside: avoid; }
/* keep an h3 glued to the p+ul that follow it (don't orphan a heading at column foot) */
.gs-flow-2col > p { break-before: avoid; }
@media (max-width: 720px) { .gs-flow-2col { column-count: 1; } }
/* ════════════════════════════════════════════════════════════════
/hiro 2-COLUMN-EVERYWHERE PASS — 2026-05-31
Owner ask: kill dead single-column right-half space site-wide.
§25 comparison-card → horizontal (image left, text left-aligned right)
§26 KEYSTONE — full-width .check-list (≥4 items) → 2 columns
§27 per-section lopsided fixes (HTML-wrapper assisted, override-safe)
CSS-FIRST, override-safe. No add/remove/reorder.
════════════════════════════════════════════════════════════════ */
/* ---- 25. COMPARISON CARDS — image LEFT, text LEFT-aligned beside it ----
/sotning/sotningstjanster/ "...vad är skillnaden?": .comparison-grid >
.comparison-card (each = ![]()
+ +
). Was text-align:center,
image stacked on top. Owner wants horizontal: image LEFT (rounded),
heading + paragraph to the RIGHT, LEFT-justified.
OVERRIDE-SAFE & sizing rationale: the customer image override lives as an
inline `max-width:25%` on each ![]()
(set against the OLD ~full-width card,
i.e. 25% ≈ 150px — the size they intended). We therefore do NOT use a
fixed-width grid column (that would re-base 25% to a broken ~38px) and we
do NOT set max-width on the img. Instead we FLOAT the image left: a float's
percentage `max-width` resolves against the card content box (~600px), so
the customer's 25% → ~150px exactly as intended, and any future pen resize
(larger/smaller %) keeps working. Text flows right of the float, left-aligned.
CSS-ONLY, no DOM change. */
/* 2026-06-07 REWRITE — clean flex (was a float hack that depended on the pen's
max-width:25% override; that override is now stripped + the image is LOCKED to its
4:3 cover box, so we size the image column ourselves). DOM: .comparison-card >
![]()
+ .comparison-card__body(> h4 + p). Image LEFT (fixed 150px 4:3), text RIGHT,
left-aligned. h4 title, larger font. Image stays a direct child → image override safe. */
.comparison-card {
display: flex !important;
align-items: flex-start;
gap: 1.3rem;
text-align: left !important;
padding: 1.6rem 1.7rem !important;
}
.comparison-card > img {
flex: 0 0 auto;
width: 150px !important;
height: auto !important;
aspect-ratio: 4 / 3;
object-fit: cover;
margin: 0 !important;
border-radius: 12px !important;
align-self: flex-start;
}
.comparison-card__body { flex: 1 1 auto; min-width: 0; text-align: left; }
.comparison-card__body > h4,
.comparison-card > h4 {
text-align: left !important;
font-size: 1.3rem !important;
font-weight: 700;
color: var(--navy);
margin: 0 0 0.5rem !important;
line-height: 1.25;
}
.comparison-card__body > p,
.comparison-card > p {
text-align: left !important;
font-size: 0.92rem;
color: var(--text-muted);
line-height: 1.55;
margin: 0 !important;
}
/* MOBILE: keep image left (compact), just smaller column — avoids long scroll */
@media (max-width: 560px) {
.comparison-card { gap: 1rem; padding: 1.3rem !important; }
.comparison-card > img { width: 38% !important; }
}
/* ---- 26. KEYSTONE — FULL-WIDTH CHECK-LISTS → 2 COLUMNS (≥4 items) ----
The owner's recurring complaint: a narrow left-column checklist with a
big DEAD empty right half (e.g. brandskyddskontroll "Vad kontrolleras",
"Inför brandskyddskontrollen"; dozens more site-wide).
SCOPE — only check-lists that are DIRECT children of a full-width
wrapper (.section-inner / .container). This deliberately EXCLUDES:
• card-nested lists (.content-card/.feature-card/.responsibility-card)
• half-width image-beside lists (.content-block > div, .content-with-image__text)
• accordion (.faq-answer), already-2-col flows (.gs-flow-2col/.gs-ovk-col*)
GATE — :has(> li:nth-child(4)) → only lists with ≥4 items go 2-col, so
short (≤3) lists stay a tidy single column (no sparse 2-col).
NO !important on `columns` → any inline `columns:N` author override wins.
Override-safe: pure CSS, no DOM change. li break-inside:avoid keeps each
item whole; 1 column under 768px. */
.section-inner > .check-list:has(> li:nth-child(4)),
.container > .check-list:has(> li:nth-child(4)) {
columns: 2;
column-gap: 2.75rem;
}
/* keep each item intact across the column break + no orphan icon/line */
.section-inner > .check-list:has(> li:nth-child(4)) > li,
.container > .check-list:has(> li:nth-child(4)) > li {
break-inside: avoid;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
}
/* collapse to 1 column on tablet/mobile */
@media (max-width: 768px) {
.section-inner > .check-list,
.container > .check-list { columns: 1 !important; }
}
/* ════════════════════════════════════════════════════════════════
/hiro UNIVERSAL ICON-LEFT PASS — 2026-05-31
Owner ask: EVERY card/box must have its icon to the LEFT of the
title — per-class rules kept missing new variants. These rules are
BROAD-but-SAFE :has() selectors so future card variants are caught.
§27 KEYSTONE — any feature-card whose media is a bare