@scope(.banner-with-image) to ([class*=loam-]){@layer loamui.components{:scope{background:var(--loam-color-surface);border:1px solid var(--loam-color-line);border-radius:var(--loam-radius-xl);grid-template-columns:minmax(0,2fr) minmax(0,3fr);display:grid;container:banner-with-image/inline-size}img{object-fit:cover;inline-size:100%}.copy{font-size:var(--loam-text-md);align-content:center;gap:var(--loam-space-xs);overflow-wrap:anywhere;padding:var(--loam-space-l);grid-template-columns:minmax(0,1fr);display:grid}h2,p{margin-block:0}p.eyebrow{--loam-context:primary;color:var(--loam-color-fg-muted);font-size:var(--loam-text-sm);align-items:center;gap:var(--loam-space-2xs);flex-wrap:wrap;display:flex}h2{max-inline-size:22ch}p.description{color:var(--loam-color-fg-muted);max-inline-size:var(--loam-measure)}div.actions{gap:var(--loam-space-xs);flex-wrap:wrap;display:flex}@container banner-with-image not (min-inline-size:44rem){img,.copy{grid-column:1/-1}img{aspect-ratio:16/9;border-start-start-radius:var(--loam-radius-xl);border-start-end-radius:var(--loam-radius-xl);block-size:auto}}@container banner-with-image (min-inline-size:44rem){img{aspect-ratio:auto;border-start-start-radius:var(--loam-radius-xl);border-end-start-radius:var(--loam-radius-xl);block-size:100%;min-block-size:0}}}}
@scope(.banner-background-image) to ([class*=loam-]){@layer loamui.components{:scope{background:var(--loam-color-bg);border:1px solid var(--loam-color-line);border-radius:var(--loam-radius-xl);color:var(--loam-color-fg);isolation:isolate;grid-template-columns:minmax(0,3fr) minmax(0,2fr);display:grid;position:relative;container:banner-background-image/inline-size}:scope:before{background:color-mix(in oklch, var(--loam-color-bg) 88%, transparent);border-radius:inherit;content:"";z-index:-1;position:absolute;inset:0}img{border-radius:inherit;object-fit:cover;z-index:-2;block-size:100%;inline-size:100%;position:absolute;inset:0}.copy{font-size:var(--loam-text-md);align-content:center;gap:var(--loam-space-xs);overflow-wrap:anywhere;padding:var(--loam-space-l);grid-template-columns:minmax(0,1fr);display:grid}h2,p{margin-block:0}p.eyebrow{--loam-context:primary;font-size:var(--loam-text-sm);align-items:center;gap:var(--loam-space-2xs);flex-wrap:wrap;display:flex}h2{max-inline-size:22ch}p.description{max-inline-size:var(--loam-measure)}div.actions{gap:var(--loam-space-xs);flex-wrap:wrap;display:flex}@container banner-background-image not (min-inline-size:44rem){.copy{grid-column:1/-1}}@media (forced-colors:active){:scope{border-color:canvastext}img,:scope:before{display:none}}}}