.hero{position:relative}.hero__frame{--mw: min(100vw, 600px);--hm: calc(var(--mw) * var(--mr, 1.3333));--name-h: 24px;position:relative;display:block;height:calc(var(--hm) + 136px + var(--name-h));overflow:hidden;background:var(--paper);color:var(--ink)}.hero__frame--long{--name-h: 48px}.hero__slide{position:absolute;top:0;right:0;bottom:0;left:0;display:none;opacity:0;visibility:hidden;z-index:0;background:var(--paper)}.hero__slide.is-active,.hero__slide.is-prev,.hero__slide.is-next{display:block}.hero__slide.is-prev{opacity:1;visibility:visible;z-index:1}.hero__slide.is-active{opacity:1;visibility:visible;z-index:2;transition:opacity var(--dur-fade) var(--ease-fade)}.hero__slide.is-active.is-entering{opacity:0;transition:none}.hero__media{position:absolute;left:0;right:0;top:0;height:var(--hm);display:flex;justify-content:center;overflow:hidden;background:var(--color-image-bg)}.hero__img{--iw: min(var(--mw), calc(var(--hm) * var(--sar, .75) / (1 - var(--crop, 0))));position:absolute;top:calc(var(--iw) / var(--sar, .75) * var(--crop, 0) * -1);left:calc(50% - var(--iw) / 2);width:var(--iw);max-width:none;height:calc(var(--iw) / var(--sar, .75));object-fit:cover;object-position:50% 0}.hero__caption{position:absolute;z-index:3;left:var(--gutter);right:var(--gutter);top:calc(var(--hm) + 12px);display:grid;justify-items:start}.hero__name{max-width:100%;min-width:0;margin:0;font-size:var(--fs-m);line-height:var(--lh-m);font-weight:var(--w-regular);letter-spacing:0}.hero__frame:not(.hero__frame--long) .hero__name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.hero__links{display:flex;flex-wrap:wrap;gap:0 var(--space-5)}.hero__link{flex:none;display:inline-flex;align-items:center;min-height:var(--tap);color:inherit;font-size:var(--fs-s);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}.hero__link:hover{text-decoration-thickness:2px}.hero__link:focus-visible,.hero__bar:focus-visible,.hero__pause:focus-visible{outline:2px solid currentColor;outline-offset:2px}.hero__controls{position:absolute;z-index:4;left:var(--gutter);right:calc(var(--gutter) - 14px);top:calc(var(--hm) + 58px + var(--name-h));height:var(--tap);display:flex;align-items:center;gap:var(--space-3);color:var(--ink)}.hero__bars{flex:1;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px}.hero__bars--two{display:none}.hero__bar{position:relative;height:var(--tap);padding:0;background:none;border:0;color:inherit;cursor:pointer}.hero__bar:before,.hero__fill{position:absolute;left:0;top:50%;width:100%;height:2px;margin-top:-1px}.hero__bar:before{content:"";background:color-mix(in srgb,var(--ink) 45%,var(--paper))}.hero__bar:hover:before{background:var(--ink-2)}.hero__fill{background:var(--ink);transform:scaleX(0);transform-origin:left center}.is-done>.hero__fill,.is-chosen>.hero__fill{transform:scaleX(1)}.is-auto .is-active>.hero__fill,.is-frozen>.hero__fill{animation:hero-fill var(--hero-interval, 6s) linear forwards}.is-held .is-active>.hero__fill,.is-frozen>.hero__fill{animation-play-state:paused}.is-chosen>.hero__fill{animation:none}@keyframes hero-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.hero__slide.is-prev .hero__caption{opacity:0;transition:opacity var(--dur-hover) var(--ease-hover)}.hero__slide.is-active .hero__caption{opacity:1;transition:opacity var(--dur-panel) var(--ease-panel) .6s}.hero__slide.is-active.is-entering .hero__caption{opacity:0;transition:none}.hero__svc{position:absolute;z-index:4;left:var(--gutter);right:var(--gutter);top:calc(var(--hm) + 104px + var(--name-h));margin:0;font-size:var(--fs-xs);line-height:var(--lh-xs);font-weight:var(--w-regular);color:var(--ink-2)}.hero__pause{flex:none;display:grid;place-items:center;width:var(--tap);height:var(--tap);padding:0;background:none;border:0;color:inherit;cursor:pointer}.hero__icon-play{display:none}.hero__frame:not(.is-auto) .hero__icon-pause{display:none}.hero__frame:not(.is-auto) .hero__icon-play{display:block}@media(min-width:761px)and (min-aspect-ratio:5/4){.hero__frame--pair,.hero__frame--single{--hh: max(560px, calc(100svh - var(--header-h)));--top: var(--space-5);--cap: 68px;--ctl: var(--tap);--pb: var(--space-3);--seam: 2px;--fh0: calc(var(--hh) - var(--top) - var(--cap) - var(--ctl) - var(--pb));--fw: min(calc(var(--fh0) * var(--ar, .8)), calc((100vw - 2 * var(--gutter) - var(--seam)) / 2));--fh: calc(var(--fw) / var(--ar, .8));--pw: calc(var(--fw) * 2 + var(--seam));height:var(--hh)}.hero__frame--single{--fw: min(calc(var(--fh0) * var(--ar, .8)), calc(100vw - 2 * var(--gutter)));--pw: var(--fw)}.hero__frame--pair .hero__slide,.hero__frame--single .hero__slide{inset:auto;top:var(--top);left:calc(50% - var(--fw) / 2);width:var(--fw);height:calc(var(--fh) + var(--cap))}.hero__frame--pair .hero__slide[data-side=l]{left:calc(50% - var(--pw) / 2)}.hero__frame--pair .hero__slide[data-side=r]{left:calc(50% + var(--seam) / 2)}.hero__frame--pair .hero__slide.is-active-wide{display:block;opacity:1;visibility:visible;z-index:2}.hero__frame--pair .hero__media,.hero__frame--single .hero__media{height:var(--fh)}.hero__frame--pair .hero__img,.hero__frame--single .hero__img{top:auto;bottom:0;left:0;width:100%;height:calc(100% / (1 - var(--crop, 0)));object-position:50% 100%}.hero__frame--pair .hero__caption,.hero__frame--single .hero__caption{top:var(--fh);left:0;right:var(--space-4);height:var(--cap);padding-top:10px;align-content:start}.hero__frame--pair .hero__links,.hero__frame--single .hero__links{gap:0 var(--space-4)}.hero__frame--pair .hero__link,.hero__frame--single .hero__link{min-height:28px}.hero__frame--pair .hero__controls,.hero__frame--single .hero__controls{top:auto;bottom:var(--pb);left:calc(50% - var(--pw) / 2);right:auto;height:var(--ctl);margin-left:-2px}.hero__frame--pair .hero__bars,.hero__frame--single .hero__bars{flex:none;width:calc(var(--n, 2) * 56px + (var(--n, 2) - 1) * 6px)}.hero__frame--pair .hero__bars--one{display:none}.hero__frame--pair .hero__bars--two{display:grid}.hero__frame--still-wide .hero__controls{display:none}.hero__frame--pair .hero__svc,.hero__frame--single .hero__svc{top:auto;bottom:var(--pb);left:auto;right:calc(50% - var(--pw) / 2);height:var(--ctl);display:flex;align-items:center}.hero__frame--edges{--hh: max(560px, calc(100svh - var(--header-h)));--pw: calc(var(--hh) * var(--ar, .75) / (1 - var(--crop-max, 0)));--cap-gap: clamp(24px, 3.4vw, 48px);--cap-x: calc(50% + var(--pw) / 2 + var(--cap-gap));--cap-w: min(320px, calc(50% - var(--pw) / 2 - var(--cap-gap) - var(--gutter)));height:var(--hh);background:var(--color-image-bg);color:#fff}.hero__frame--edges .hero__media{height:100%;background:linear-gradient(180deg,var(--l1),var(--l2),var(--l3)) left bottom / 50.5% calc(100% / (1 - var(--crop, 0))) no-repeat,linear-gradient(180deg,var(--r1),var(--r2),var(--r3)) right bottom / 50.5% calc(100% / (1 - var(--crop, 0))) no-repeat}.hero__frame--edges .hero__img{position:relative;inset:auto;align-self:flex-end;width:auto;max-width:none;height:calc(100% / (1 - var(--crop, 0)));object-fit:cover;object-position:50% 50%}.hero__frame--edges .hero__slide--feather .hero__img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%)}.hero__frame--edges .hero__caption{top:auto;bottom:104px;left:var(--cap-x);right:auto;width:var(--cap-w);height:auto;display:grid;gap:var(--space-1);justify-items:start;color:#fff}.hero__frame--edges .hero__links{display:grid;justify-items:start}.hero__frame--edges .hero__slide--ink .hero__caption{color:var(--ink)}.hero__frame--edges .hero__name{font-size:var(--fs-l);line-height:1.25;white-space:normal}.hero__frame--edges .hero__controls{top:auto;left:var(--cap-x);right:auto;bottom:40px;width:var(--cap-w);color:#fff}.hero__frame--edges .hero__svc{top:auto;left:var(--cap-x);right:auto;bottom:16px;width:var(--cap-w);color:#fff}.hero__frame--edges[data-ink] .hero__svc,.hero__frame--edges[data-ink] .hero__controls{color:var(--ink)}.hero__frame--edges:not([data-ink]) .hero__fill{background:#fff}.hero__frame--edges{--hh: max(560px, calc(100svh - var(--hd-strip, 34px) - var(--hd-r1, 88px) - var(--hd-r2, 50px)))}}@media(prefers-reduced-motion:reduce){.hero__slide.is-active,.hero__slide .hero__caption{transition:none}.is-auto:not(.is-opted) .is-active>.hero__fill{animation:none}}
/*# sourceMappingURL=/cdn/shop/t/20/assets/masidas-hero.css.map */