.utility-front{--uf-cols:3;--uf-cols-tablet:2;--uf-cols-mobile:1;--uf-gap:28px;--uf-radius:12px;--uf-max:1320px;--uf-ratio:3/2;--uf-accent:#005ea8;max-width:var(--uf-max);margin-inline:auto;padding:clamp(12px,2vw,24px)}
.utility-front__heading{margin:0 0 clamp(16px,2vw,28px);font-size:clamp(1.5rem,2vw,2.1rem);line-height:1.15}
.utility-front__grid{display:grid;grid-template-columns:repeat(var(--uf-cols),minmax(0,1fr));gap:var(--uf-gap)}
.utility-front__card{min-width:0;margin:0}
.utility-front__link{display:block;position:relative;text-decoration:none;color:inherit;border-radius:var(--uf-radius);outline:none;-webkit-tap-highlight-color:transparent}
.utility-front__media{position:relative;display:block;overflow:hidden;aspect-ratio:var(--uf-ratio);border-radius:var(--uf-radius);background:#e7edf2;box-shadow:0 8px 22px rgba(10,33,51,.14),0 2px 6px rgba(10,33,51,.08)}
.utility-front__image-backup{position:absolute;inset:0;display:block;background-position:center;background-size:cover;background-repeat:no-repeat;transition:transform .28s ease,filter .28s ease}
.utility-front__fallback{display:grid;width:100%;height:100%;place-items:center;background:linear-gradient(145deg,#eef4f8,#d6e4ed);color:var(--uf-accent)}
.utility-front__fallback-mark{display:grid;place-items:center;width:58px;height:58px;border:2px solid currentColor;border-radius:16px;font:800 18px/1 system-ui,sans-serif;letter-spacing:.08em}
.utility-front__title{display:flex;align-items:center;justify-content:center;gap:.45em;margin-top:10px;padding:0 8px;text-align:center;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(.82rem,1vw,.98rem);font-weight:800;line-height:1.25;color:var(--uf-accent)}
.utility-front__arrow{display:inline-block;opacity:0;transform:translateX(-4px);transition:opacity .2s ease,transform .2s ease}
.utility-front__shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(4,18,28,.78),rgba(4,18,28,.04) 58%);pointer-events:none}
.utility-front--titles-overlay .utility-front__title{position:absolute;left:0;right:0;bottom:0;z-index:2;justify-content:flex-start;margin:0;padding:20px 22px;text-align:left;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.utility-front__link:hover .utility-front__image-backup{transform:scale(1.035);filter:saturate(1.04) contrast(1.02)}
.utility-front__link:hover .utility-front__arrow,.utility-front__link:focus-visible .utility-front__arrow{opacity:1;transform:translateX(0)}
.utility-front__link:focus-visible{box-shadow:0 0 0 4px #fff,0 0 0 7px var(--uf-accent)}
.utility-front__link:focus-visible .utility-front__media{box-shadow:0 10px 26px rgba(10,33,51,.2)}
@media (max-width:900px){.utility-front__grid{grid-template-columns:repeat(var(--uf-cols-tablet),minmax(0,1fr))}}
@media (max-width:600px){.utility-front__grid{grid-template-columns:repeat(var(--uf-cols-mobile),minmax(0,1fr));gap:max(18px,calc(var(--uf-gap) * .72))}.utility-front{padding-inline:12px}}
@media (prefers-reduced-motion:reduce){.utility-front__image-backup,.utility-front__arrow{transition:none}.utility-front__link:hover .utility-front__image-backup{transform:none}}