@import"https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&display=swap";.svelte-pcgmxy{color:#fff;font-family:Roboto Slab,serif}.container.svelte-pcgmxy{display:grid;place-items:center;position:relative;overflow:hidden;padding:2em}article.svelte-pcgmxy{aspect-ratio:17/9;margin-top:4em;height:20vw;display:grid;place-items:center;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;position:relative;overflow:hidden;transition:transform .5s ease-in-out,box-shadow .2s ease;transform-style:preserve-3d;cursor:pointer;z-index:1}.fly-away.svelte-pcgmxy{animation:svelte-pcgmxy-flyAway 3s forwards ease-in}.fly-back.svelte-pcgmxy{animation:svelte-pcgmxy-flyBack 3s forwards ease-out}@keyframes svelte-pcgmxy-flyAway{0%{transform:scale(1) translate(0) rotate(0);opacity:1}30%{transform:scale(1.2) translate(50px,-100px) rotate(10deg)}to{transform:scale(.5) translate(600px,-1200px) rotate(45deg);opacity:0}}@keyframes svelte-pcgmxy-flyBack{0%{transform:scale(.5) translate(600px,-1200px) rotate(45deg);opacity:0}30%{transform:scale(1.2) translate(50px,-100px) rotate(10deg);opacity:1}to{transform:scale(1) translate(0) rotate(0);opacity:1}}h1.svelte-pcgmxy{font-size:clamp(1.3em,1.5em,2em);text-shadow:1px 1px 2px rgba(0,0,0,.6);grid-row:1/2;grid-column:2/3;align-self:end;z-index:2}p.svelte-pcgmxy{font-size:clamp(1.1em,1.3em,2em);text-shadow:1px 1px 2px rgba(0,0,0,.6);grid-row:2/3;grid-column:2/3;z-index:2}img.svelte-pcgmxy{grid-row:1/3;grid-column:1/2;height:100%;width:auto;position:relative;z-index:2}article.svelte-pcgmxy:after{content:"";position:absolute;inset:0;background:linear-gradient(45deg,#fff3,#fffc,#fff3);background-size:300% 300%;opacity:0;transition:opacity .5s ease;mix-blend-mode:screen;z-index:3}article.svelte-pcgmxy:hover:after{opacity:1;animation:svelte-pcgmxy-silverShine 2s linear 2}article.svelte-pcgmxy:hover h1:where(.svelte-pcgmxy),article.svelte-pcgmxy:hover p:where(.svelte-pcgmxy){filter:brightness(1.1)}article.svelte-pcgmxy:hover{box-shadow:0 0 20px 5px #ffffff80;transform:scale(1.05) perspective(1000px) rotateX(5deg) rotateY(-5deg)}@keyframes svelte-pcgmxy-silverShine{0%{background-position:-100% 50%}to{background-position:200% 50%}}@media (width < 1350px){article.svelte-pcgmxy{height:30vw}}@media (width < 1050px){article.svelte-pcgmxy{height:35vw}}@media (width < 750px){article.svelte-pcgmxy{height:45vw}}@media (width < 550px){article.svelte-pcgmxy{height:50vw}img.svelte-pcgmxy{height:50vw}}