/* =========================================================================
 * Our Story — block 3, Security Failures: tweaks on top of the component of
 * steps on a shared line (assets/css/why-lmntrix/block5-experience.css — Why
 * LMNTRIX block 5). The grid, the discs, the line, the arcs, the legs, the
 * typography and the appearance are the component's rules unchanged.
 *
 * The page's difference is the length of the descriptions: two paragraphs per
 * item instead of one line. So the descriptions take the full width of their
 * column (widths are not tied to --ms-scale — otherwise the fitting squeezes
 * the block for nothing), the sizes have lower readability bounds, and with
 * data-fit="grow" the section grows with its content when there is not enough
 * room: cards at their natural height, with no line-clamp and no inner
 * scrolling.
 * ====================================================================== */

.lmx-os-failures .lmx-ex-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.45fr);align-items:start;gap:max(24px,calc(56px * var(--ms-scale,1)))}
.lmx-os-failures .lmx-ex-text{padding-top:max(8px,calc(24px * var(--ms-scale,1)))}
.lmx-os-failures .lmx-ex-title{max-width:12ch}
.lmx-os-failures .lmx-ex-desc,
.lmx-os-failures .lmx-ex-note{max-width:min(100%,540px)}
.lmx-os-failures .lmx-ex-desc{font-size:max(15px,calc(17px * var(--ms-scale,1))) !important}

.lmx-os-failures .lmx-ex-steps{gap:0 max(16px,calc(30px * var(--ms-scale,1)))}
.lmx-os-failures .lmx-ex-step-title{max-width:none;font-size:max(18px,calc(21px * var(--ms-scale,1))) !important}
.lmx-os-failures .lmx-ex-step-desc{max-width:none;font-size:max(14.5px,calc(15.5px * var(--ms-scale,1))) !important;line-height:1.55 !important}

@media (max-width:1024px){
.lmx-os-failures .lmx-ex-grid{grid-template-columns:minmax(0,1fr)}
.lmx-os-failures .lmx-ex-title{max-width:none}
.lmx-os-failures .lmx-ex-desc,
.lmx-os-failures .lmx-ex-note{max-width:none}
.lmx-os-failures .lmx-ex-step-desc{font-size:15px !important}
}
@media (min-width:681px) and (max-width:1024px){
/* Three columns on a tablet are too narrow for two paragraphs — the items stack as on a phone, but with a centred disc. */
.lmx-os-failures .lmx-ex-steps{grid-template-columns:1fr;gap:34px 0}
.lmx-os-failures .lmx-ex-step{max-width:640px;margin:0 auto !important}
.lmx-os-failures .lmx-ex-line{display:none}
}