@media (min-width:68rem) { .home .hero, .studio-hero { position:relative; isolation:isolate; } .home .hero::after, .studio-hero::after { content:""; position:absolute; pointer-events:none; z-index:-1; background-repeat:no-repeat; background-size:contain; background-position:center; mask-image:linear-gradient(to right,transparent,#000 25%,#000 95%,transparent); } .home .hero::after { right:-.6rem; top:7.4rem; width:44%; aspect-ratio:3/2; background-image:url("balcones-relief-v2-960.avif"); opacity:.42; } .studio-hero::after { right:-1rem; top:8.4rem; width:47%; aspect-ratio:3/2; background-image:url("studio-assembly-v2-960.avif"); opacity:.32; } } @media (min-width:74rem) { footer.site::after { content:""; position:absolute; pointer-events:none; left:clamp(10rem,18vw,18rem); bottom:1.25rem; width:13rem; height:8.66rem; z-index:-1; background:url("balcones-relief-v2-960.avif") center/contain no-repeat; opacity:.32; mask-image:linear-gradient(to right,transparent,#000 30%); } } @media (max-width:34rem) { footer.site::after { content:""; position:absolute; pointer-events:none; right:1rem; top:-.5rem; width:10rem; height:6.66rem; z-index:-1; background:url("balcones-relief-v2-960.avif") center/contain no-repeat; opacity:.4; } } @media print, (forced-colors:active) { .home .hero::after, .studio-hero::after, footer.site::after { display:none; } }