/* the section is exactly one screen: the head sizes itself, the cards take the rest */
@media (min-width:901px){
#solutions.so{height:100svh;min-height:640px;padding-block:clamp(24px,5vh,56px);display:flex;flex-direction:column;align-content:stretch}
#solutions.so>.wrap{flex:1;display:flex;flex-direction:column;width:100%;min-height:0}
#solutions .so-h{flex:none}#solutions .so-h h2{font-size:clamp(34px,4.6vw,64px)!important}
#solutions .g{flex:1;min-height:0;align-content:stretch;grid-auto-rows:1fr}
#solutions .g .card{min-height:0!important;padding:clamp(18px,3vh,32px)!important;align-content:start}
#solutions .g .card h3{font-size:clamp(17px,1.5vw,22px)}#solutions .g .card p{font-size:clamp(14px,1.05vw,16px)}
#solutions .g .card .ic{width:clamp(40px,5vh,56px);height:clamp(40px,5vh,56px)}#solutions .g .card .ic svg{width:clamp(20px,2.6vh,28px);height:clamp(20px,2.6vh,28px)}
}#solutions .sp{flex:1;display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:stretch;min-height:0}#solutions .sp .so-h{align-self:center}#solutions .sp .so-h{margin:0;text-align:left;justify-items:start}#solutions .sp .so-h h2{font-size:clamp(34px,4.2vw,58px)}
#solutions .g2{grid-template-columns:1fr 1fr!important;position:relative}#solutions .g2 .card{min-height:0!important}
#solutions .g2::before{content:"";position:absolute;inset:-10%;z-index:-1;background:radial-gradient(closest-side,rgba(59,108,255,.25),transparent)}
@media (max-width:900px){#solutions .sp{grid-template-columns:1fr;gap:28px}}@media (max-width:560px){#solutions .g2{grid-template-columns:1fr!important}}
@media (min-width:901px){#solutions .sp{grid-template-columns:1.15fr .85fr}#solutions .sp .so-h{order:2}#solutions .sp .g{order:1}}
/* cards a touch smaller: the grid no longer stretches to the full screen height */
@media (min-width:901px){#solutions .sp{align-items:center}#solutions .sp .g{flex:none;grid-auto-rows:auto;align-self:center}#solutions .sp .g .card{padding:clamp(16px,2.4vh,24px)!important}}
#solutions .card .ic{display:none}