.steam-hero{position:relative;display:grid;place-items:center;overflow:hidden;background:var(--sh-bg, var(--gk-field));color:var(--sh-fg, var(--gk-on-green));padding-block:clamp(3rem,8vw,5rem);padding-inline:var(--container-gutter)}.steam-hero--sm{min-block-size:56svh}.steam-hero--md{min-block-size:72svh}.steam-hero--lg{min-block-size:94svh}.steam-hero__bg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;inline-size:100%;block-size:100%;object-fit:cover;opacity:var(--sh-bg-opacity, .35)}.steam-hero__canvas{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;inline-size:100%;block-size:100%;pointer-events:none}.steam-hero__content{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;gap:1.25rem;align-items:center}.steam-hero__headline{font-family:var(--gk-font-display);font-size:clamp(2.5rem,11vw,5.5rem);font-weight:600;letter-spacing:var(--gk-tracking-display);line-height:1.2;margin:0;color:inherit}.steam-hero__sub{font-family:var(--gk-font-display);font-size:clamp(.9375rem,2.4vw,1.25rem);letter-spacing:.12em;line-height:1.9;margin:0;color:inherit;opacity:.88}.steam-hero__rule{inline-size:3rem;block-size:1px;background:currentcolor;opacity:.4;border:0;margin:0}.steam-hero--animating .steam-hero__headline,.steam-hero--animating .steam-hero__sub,.steam-hero--animating .steam-hero__rule{opacity:0}.steam-hero--animating.is-revealed .steam-hero__headline{opacity:1;transition:opacity .9s ease-out}.steam-hero--animating.is-revealed .steam-hero__rule{opacity:.4;transition:opacity .9s ease-out .15s}.steam-hero--animating.is-revealed .steam-hero__sub{opacity:.88;transition:opacity .9s ease-out .3s}.steam-hero__replay{position:absolute;z-index:3;inset-block-end:1.25rem;inset-inline-end:1.25rem;font-family:var(--gk-font-body);font-size:.75rem;letter-spacing:.08em;color:inherit;background:transparent;border:1px solid currentcolor;border-radius:999px;padding:.4rem .9rem;cursor:pointer;opacity:.45;transition:opacity .25s ease}.steam-hero__replay:hover,.steam-hero__replay:focus-visible{opacity:1}@media(prefers-reduced-motion:reduce){.steam-hero__canvas,.steam-hero__replay{display:none}.steam-hero--animating .steam-hero__headline,.steam-hero--animating .steam-hero__rule,.steam-hero--animating .steam-hero__sub{transition:none}.steam-hero--animating .steam-hero__headline{opacity:1}.steam-hero--animating .steam-hero__sub{opacity:.88}.steam-hero--animating .steam-hero__rule{opacity:.4}}
/*# sourceMappingURL=/cdn/shop/t/90/assets/steam-hero.css.map */