.web-composition{aspect-ratio:1.8;isolation:isolate;background:#dfe4ec;border-radius:14px;width:100%;position:relative;overflow:hidden}.web-composition-screen,.web-composition-phone{transition:transform .45s cubic-bezier(.2,.7,.3,1);position:absolute;overflow:hidden;box-shadow:0 24px 60px #18274430}.web-composition-screen{border:1px solid #fffb;border-radius:10px}.web-composition .screen-desktop{width:71%;top:8%;left:14%;transform:rotate(-3deg)}.web-composition-phone{background:#23252a;border:5px solid #23252a;border-radius:18px;width:18%}.web-composition .phone-1{top:26%;left:4%;transform:rotate(-8deg)}.web-composition .phone-2{top:21%;right:4%;transform:rotate(7deg)}.web-composition-screen img,.web-composition-phone img{width:100%;height:auto}.web-screen-bar{color:#545960;min-height:32px;font:400 12px/1.4 var(--font-geist-sans), Arial, sans-serif;background:#f4f5f6;border-bottom:1px solid #d8dce0;align-items:center;gap:5px;padding:8px 12px;display:flex}.web-screen-bar i{background:#b7bec5;border-radius:50%;flex:0 0 5px;width:5px;height:5px}.web-screen-bar>span:first-of-type{text-overflow:ellipsis;white-space:nowrap;text-align:center;flex:1;min-width:0;margin-left:6px;overflow:hidden}.web-composition-label{text-align:center;letter-spacing:.12em;color:#384252;width:100%;font-size:12px;position:absolute;bottom:4%;left:0}.web-composition.is-card{aspect-ratio:auto;border-radius:0;height:100%}.is-card .screen-desktop{width:92%;top:18%;left:5%;transform:rotate(-6deg)}.is-card .web-composition-phone{border-width:3px;border-radius:13px;width:32%}.is-card .phone-1{top:36%;left:3%;transform:rotate(-9deg)}.is-card .phone-2{top:32%;right:4%;transform:rotate(9deg)}.is-card .web-screen-bar{min-height:25px;padding:5px 8px}.project-card:hover .is-card .screen-desktop{transform:rotate(-4deg)scale(1.035)}.project-card:hover .is-card .phone-1{transform:rotate(-6deg)translateY(-5px)}.project-card:hover .is-card .phone-2{transform:rotate(6deg)translateY(-5px)}.website-case-link{margin-top:28px}@media (max-width:700px){.web-composition:not(.is-card){aspect-ratio:1.02}.web-composition:not(.is-card) .screen-desktop{width:91%;top:8%;left:4%}.web-composition:not(.is-card) .web-composition-phone{border-width:3px;border-radius:14px;width:30%}.web-composition:not(.is-card) .phone-1{top:33%;left:10%}.web-composition:not(.is-card) .phone-2{top:29%;right:9%}.web-composition-label{letter-spacing:.04em;padding-inline:20px;font-size:12px;bottom:3%}}
