.northStreamHubModern{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:22px;margin-top:22px}
.northStreamHubModernCard{overflow:hidden;border-radius:17px;border:1px solid var(--wcfContentBorder,#d6dce2);background:var(--wcfContentBackground,#fff);box-shadow:0 7px 24px rgba(11,23,38,.09);transition:transform .18s ease,box-shadow .18s ease}
.northStreamHubModernCard:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(11,23,38,.16)}
.northStreamHubModernVisual{width:100%;aspect-ratio:16/9;position:relative;overflow:hidden;background:linear-gradient(120deg,#112e49,#28698a)}
.northStreamHubModernVisual img{width:100%;height:100%;position:absolute;inset:0;object-fit:contain;object-position:center;display:block;transition:none;background:#112333}
.northStreamHubModernCard:hover .northStreamHubModernVisual img{transform:none}
.northStreamHubEmptyVisual{display:flex;align-items:center;justify-content:center;height:100%;color:#fff;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.northStreamHubModernVisual .northStreamHubLive,.northStreamHubModernVisual .northStreamHubSponsor{position:absolute;top:12px;padding:5px 10px;border-radius:7px;font-size:12px;font-weight:750;color:white;background:#dc264a;box-shadow:0 2px 10px #0005}
.northStreamHubModernVisual .northStreamHubLive{left:12px}.northStreamHubModernVisual .northStreamHubSponsor{right:12px;background:#ad7a27}
.northStreamHubModernCard .northStreamHubBody{padding:17px;display:flex;flex-direction:column;gap:9px}.northStreamHubModernCard h2{font-size:1.15rem;margin:0;line-height:1.3}.northStreamHubModernCard p{margin:0;line-height:1.5}.northStreamHubCardMeta{display:flex;justify-content:space-between;gap:8px;color:var(--wcfContentDimmedText,#6b7280);font-size:.83rem;text-transform:capitalize}.northStreamHubModernCard .button{margin-top:4px}
@media(prefers-reduced-motion:reduce){.northStreamHubModernCard,.northStreamHubModernVisual img{transition:none}}

/* Preserve entire streamed preview within its 16:9 frame. */
.northStreamHubModernVisual>img{object-fit:contain!important;object-position:center!important;max-width:100%;max-height:100%;}

/* Stream preview sizes follow the ACP selection and never crop images. */
.northStreamHubModern.northStreamHubSize-small{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}
.northStreamHubModern.northStreamHubSize-medium{grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
.northStreamHubModern.northStreamHubSize-large{grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr))}
.northStreamHubModern.northStreamHubSize-xlarge{grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr))}
.northStreamHubModern .northStreamHubModernVisual{aspect-ratio:16/9}
.northStreamHubModern .northStreamHubModernVisual img{object-fit:contain;object-position:center}