.split-panel{display:flex;width:100%;height:100dvh;padding-top:100px;position:relative;align-items:flex-end;gap:1rem;justify-content:flex-end;justify-items:flex-end;align-items:center;align-content:center;overflow:hidden;z-index:10}@media(max-width:768px){.split-panel{gap:0}}.panel.hovered{z-index:200}.panel .overlay{position:absolute;width:100%;bottom:40%;transition:opacity .4s ease,transform .4s ease;transform:translateY(10px);opacity:0}.panel .overlay.visible{opacity:1}.panel .overlay .glass-card{position:absolute;top:0;left:70%;transform:translateX(-70%);width:90%;max-width:400px;box-shadow:0 8px 32px rgba(0,0,0,.2);color:var(--on-background);text-align:center;z-index:2}.panel .overlay .glass-card h3{margin-bottom:2rem}@media(max-width:768px){.panel .overlay{top:30%;width:120%;right:-20%;left:10%}.panel .overlay .glass-card{left:0;top:0;transform:translateX(0);z-index:200}.panel.right .overlay,.panel.right .overlay .glass-card{transform:translateX(0)!important;left:-10%}}.panel .image-container{width:100%;transition:scale .4s ease;position:relative;display:flex;height:100%}.panel .image-container img{height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center center;object-position:center center;filter:grayscale(100%);transition:filter .4s ease}@media(min-width:768px){.panel .image-container{height:90%}.panel .image-container img{width:auto;max-height:100%;-o-object-fit:contain;object-fit:contain}}.panel.left .image-container img{-o-object-position:right center;object-position:right center}.panel.right .image-container img{-o-object-position:left center;object-position:left center}.panel .right .image-container{margin-left:-100px}@media(min-width:768px){.panel.left .image-container{justify-content:flex-end;margin-right:4rem}.panel.right .image-container{margin-left:4rem;scale:1.1;justify-content:flex-start}}.expanding-circle{position:fixed;top:50%;left:50%;width:0;height:0;border-radius:50%;background-color:rgba(var(--backgrop-layer),.9);transform:translate(-50%,-50%);z-index:1000;pointer-events:none;opacity:0;transition:all .3s ease}.panel{flex:1;display:flex;flex-grow:1;align-items:flex-end;position:relative;transition:all .4s ease;background:rgba(0,0,0,0);height:100%;z-index:10}@media(max-width:768px){.panel{width:100%}}.panel.left{justify-content:flex-end;justify-items:flex-end}.panel.right .overlay .glass-card{transform:translateX(-100%)}.panel.hovered{flex:1.2}@media(max-width:768px){.panel.hovered{flex:1.8}}.panel.hovered .overlay{opacity:1}.panel.hovered .image-container{scale:1.2}.panel.hovered .image-container img{filter:grayscale(0)}