.gallery{overflow:hidden;.images{display:flex;gap:var(--space1-2);.column{flex:1;display:flex;flex-direction:column;gap:var(--space1-2);will-change:transform}}.modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:center;background:none;opacity:0;pointer-events:none;transition:all .2s ease-out;&.open{opacity:1;pointer-events:auto}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--navy-darker);opacity:.8}.content{position:relative;max-width:calc(100% - 160px);max-height:calc(100vh - var(--gapSm) * 2);z-index:2}.modal-close{position:absolute;top:0;right:0;width:48px;height:48px;justify-content:center;padding:var(--space1-2);transition:color .2s ease-out;cursor:pointer;&:hover{color:var(--teal)}&:before{font-size:40px;font-variation-settings:"FILL" 0,"wght" 200,"GRAD" 0,"opsz" 40}}figure{position:relative}img{max-height:calc(100vh - var(--gapSm) * 2);width:min(100%,auto);object-fit:contain}.caption{padding:var(--space1-4);color:var(--emphasis);text-align:center;position:absolute;bottom:0;left:0;width:100%;background:var(--navy-opaque);box-sizing:border-box;z-index:3}.controls{div{color:var(--emphasis);width:80px;height:80px;justify-content:center;top:calc(50% - 40px);position:absolute;transition:color .2s ease-out;cursor:pointer;&:hover{color:var(--teal)}&:before{font-size:48px;font-variation-settings:"FILL" 0,"wght" 200,"GRAD" 0,"opsz" 48}}.prev{left:-80px}.next{right:-80px}}}}.mockup{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--gap);.screen{width:720px;padding:20px;position:relative;margin-bottom:40px}.screen,iframe{transition:all .4s ease-out}iframe{border:none;position:absolute;top:50%;left:50%;width:1536px;height:864px;transform:translate(-50%,-50%) scale(calc(720px / 1536px))}.onScreen{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:5px;transition:all .4s ease-out;z-index:3}.frame{top:0;left:0;width:100%;height:100%;border:2px solid var(--navy-50);border-radius:5px;background:var(--navy-80)}.deco,.frame{position:absolute;transition:all .4s ease-out;box-sizing:border-box}.deco{bottom:-38px;right:calc(50% - 80px);width:160px;height:40px;border:2px solid var(--navy-50);border-radius:10px;border-top-left-radius:60px;border-top-right-radius:60px;background:var(--navy-65)}&.desktop{.onScreen{padding-bottom:56.25%}iframe{width:1536px;height:864px;transform:translate(-50%,-50%) scale(calc(720px / 1536px))}.frame{top:0;left:0;width:100%;height:100%;border-radius:5px}.deco{bottom:-38px;right:calc(50% - 80px);width:160px;height:40px;border-radius:10px;border-top-left-radius:60px;border-top-right-radius:60px}.sizes>div:first-child{color:var(--magenta)}}&.mobile{.screen{width:min(80vw,420px);padding:10px 10px 39px;margin:0}.onScreen{padding-bottom:177.777777778%}iframe{width:420px;height:747px;transform:translate(-50%,-50%) scale(calc(min(80vw, 420px) / 420px))}.deco{bottom:17px;width:40px;height:9px;border-radius:999px;right:calc(50% - 20px)}.sizes>div:nth-child(2){color:var(--magenta)}}.sizes{display:flex;gap:var(--gapSm);justify-content:center;.icon{font-size:48px;cursor:pointer;color:var(--navy-80);transition:color .2s ease-out;&:hover{color:var(--navy)}&:before{font-variation-settings:"FILL" 0,"wght" 700,"GRAD" 0,"opsz" 48;font-size:inherit}}}}