.hero-title,.hero-content,.hero-title{font-family:var(--display-font);letter-spacing:var(--letter-spacing)}.hero-landing{place-items:center;min-height:100vh;padding:2rem 1rem;display:grid}.hero{aspect-ratio:1;background:var(--frame-color);border-image-source:linear-gradient(135deg, var(--frame-color), var(--frame-color), #00000040);border-width:1px;border-bottom:1px solid var(--bg-light);border-right:1px solid var(--bg-light);min-block-size:0;inline-size:min(100%,380px);min-inline-size:0;max-inline-size:380px;box-shadow:var(--shadow);cursor:pointer;z-index:20;transform-origin:50%;transform-style:preserve-3d;border-image-slice:1;margin:0 auto;transition:transform .33s ease-out;position:relative;transform:rotate(3deg);container-type:inline-size;&:hover{transition:transform .25s ease-out;transform:rotate(0);&:before{transform:rotate(4.5deg)translateZ(-1px)}&:after{transform:rotate(-1.5deg)translateZ(-2px)}}&:before,&:after{content:"";background:inherit;border-image:inherit;border-bottom:inherit;border-right:inherit;box-shadow:inherit;transition:inherit;position:absolute;inset:0}&:before{transform:rotate(2.5deg)translateZ(-1px)}&:after{transform:rotate(-4deg)translateZ(-2px)}& .hero-content{inline-size:min(100%,320px);height:auto;margin:1.5rem auto;display:block;position:relative;&:after{content:"";aspect-ratio:4/3;pointer-events:none;z-index:2;width:100%;height:auto;position:absolute;top:0;left:0;box-shadow:inset 0 -2px 4px #00000080}& img{aspect-ratio:4/3;object-fit:cover;filter:saturate(180%)sepia(50%);width:100%;height:auto;display:block}& .hero-title{color:var(--text-color);letter-spacing:.1rem;text-align:center;margin:0 0 .5rem;font-size:2.25rem;transform:rotate(-3deg)}}}@media (width<=48rem){.hero-landing{padding:1.25rem .75rem}}@media (width<=26.25rem){.hero{inline-size:min(100%,20rem);transform:rotate(2deg)}.hero .hero-content{inline-size:min(100% - 2.5rem,16.5rem);margin:1.2rem auto 0}.hero .hero-content .hero-title{font-size:1.9rem}}