.hero-mosaic{position:relative;width:100%;max-width:820px;height:clamp(500px,44vw,650px);margin-inline:auto}.hero-mosaic.alternative{position:relative;width:100%;display:block}.mosaic-3d-container{position:relative;width:100%;height:100%}.mosaic-card{--y:0px;--rotate:0deg;position:absolute;border-radius:14px;overflow:hidden;box-shadow:0 18px 45px rgba(15,23,42,.16);transition:transform .3s ease,box-shadow .3s ease;background:#fff;border:3px solid rgba(255,255,255,.95);transform:translateY(var(--y)) rotate(var(--rotate));will-change:transform}.mosaic-card-1{--y:-50%;--rotate:-2.5deg;width:48%;height:78%;left:0;top:50%;z-index:3}.mosaic-card-2{--rotate:1.5deg;width:76%;height:48%;right:1%;top:3%;z-index:4}.mosaic-card-3{--rotate:-2deg;width:34%;height:34%;right:37%;bottom:10%;z-index:5}.mosaic-card-4{--rotate:2deg;width:30%;height:42%;right:3%;bottom:2%;z-index:5}.mosaic-card:hover{transform:translateY(calc(var(--y) - 8px)) rotate(var(--rotate)) scale(1.015);box-shadow:0 24px 55px rgba(15,23,42,.22);z-index:10;border-color:rgba(34,197,94,.8)}.mosaic-card img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform .5s ease}.mosaic-card:hover img{transform:scale(1.05)}@media (max-width:1440px){.hero-mosaic,.hero-mosaic.alternative{max-width:760px;height:clamp(500px,45vw,620px)}}@media (max-width:1280px){.hero-mosaic,.hero-mosaic.alternative{max-width:660px;height:560px}}@media (max-width:1023px){.hero-mosaic,.hero-mosaic.alternative{display:none}}