.work-examples-modal-container{width:100%;height:100%;background:var(--color_white);border-radius:var(--border_radius_default);overflow:hidden;position:relative}.work-examples-modal-container .close-button{position:absolute;z-index:1;right:20px;top:20px;border-radius:50%;width:50px;height:50px;display:flex;justify-content:center;align-items:center;color:var(--color_accent);border:1px solid var(--color_accent);transition:all .3s ease}.work-examples-modal-container .close-button:hover{cursor:pointer;color:var(--color_accent2);border:1px solid var(--color_accent2)}@media screen and (max-width:768px){.work-examples-modal-container .close-button{top:5px;right:5px;width:25px;height:25px}.work-examples-modal-container .close-button svg{width:20px;height:20px}}.work-examples-modal-container .body{display:flex;height:100%}.work-examples-modal-container .body.single-image .right-side{width:100%}.work-examples-modal-container .body .left-side{max-width:160px;height:100%;padding:20px;overflow:scroll;width:100%}.work-examples-modal-container .body .left-side .gallery{display:flex;flex-direction:column;gap:20px;height:100%}.work-examples-modal-container .body .left-side .gallery .image-card{border-radius:5px;border:none;transition:all .3s ease;overflow:hidden;display:flex;aspect-ratio:1/1;padding:5px;min-height:min-content}.work-examples-modal-container .body .left-side .gallery .image-card.active{outline:2px solid var(--color_accent)}.work-examples-modal-container .body .left-side .gallery .image-card:hover{cursor:pointer;filter:brightness(.9);outline:2px solid rgba(87,102,61,.4392156863)}.work-examples-modal-container .body .right-side{width:100%;height:100%}.work-examples-modal-container .body .right-side .content{overflow:auto;height:100%;width:100%;padding:50px 15px;background:var(--color_accent4);display:flex;flex-direction:column;justify-content:space-between;gap:40px;position:relative}.work-examples-modal-container .body .right-side .content .main{display:flex;justify-content:space-between;height:100%;width:100%;align-items:center;gap:20px}.work-examples-modal-container .body .right-side .content .main .active-image-container{position:relative;width:100%;height:90%;display:flex;justify-content:center;align-items:center;perspective:1200px}.work-examples-modal-container .body .right-side .content .main .active-image-container .flip-card{width:100%;height:100%;position:relative}.work-examples-modal-container .body .right-side .content .main .active-image-container .flip-card .flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,0,.2,1)}.work-examples-modal-container .body .right-side .content .main .active-image-container .flip-card.flipped .flip-inner{transform:rotateY(180deg)}.work-examples-modal-container .body .right-side .content .main .active-image-container .flip-card .flip-front,.work-examples-modal-container .body .right-side .content .main .active-image-container .flip-card .flip-back{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--border_radius_default)}.work-examples-modal-container .body .right-side .content .main .active-image-container .flip-card .flip-front{transform:rotateY(0);display:flex;flex-direction:column;align-items:center;justify-content:center}.work-examples-modal-container .body .right-side .content .main .active-image-container .flip-card .flip-back{transform:rotateY(180deg);background:var(--color_white);box-shadow:var(--shadow_border_default);border-radius:var(--border_radius_default);overflow:auto}.work-examples-modal-container .body .right-side .content .main .active-image-container .flip-card .flip-back .flip-back-inner{padding:24px;height:100%;display:flex;flex-direction:column;gap:20px}.work-examples-modal-container .body .right-side .content .main .active-image-container .flip-card .flip-back .description-content{flex:1;overflow:auto;font:var(--font_15);line-height:1.5;color:var(--color_text)}.work-examples-modal-container .body .right-side .content .main .active-image-container .flip-card .flip-back .description-content p{margin:0 0 .75em}.work-examples-modal-container .body .right-side .content .main .active-image-container .flip-card .flip-back .description-content p:last-child{margin-bottom:0}.work-examples-modal-container .body .right-side .content .main .active-image-container .flip-card .flip-overlay{position:absolute;inset:0;z-index:2;cursor:pointer;background:transparent;border:none}.work-examples-modal-container .body .right-side .content .main .active-image-container .flip-card .flip-hint{position:absolute;bottom:16px;left:50%;transform:translate(-50%);display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:8px;border:1px solid var(--color_accent);background:#ffffffe6;color:var(--color_accent);font:var(--font_14);cursor:pointer;transition:all .2s;z-index:3}.work-examples-modal-container .body .right-side .content .main .active-image-container .flip-card .flip-hint:hover{background:var(--color_white);color:var(--color_accent2);border-color:var(--color_accent2)}@media screen and (max-width:768px){.work-examples-modal-container .body .right-side .content .main .active-image-container .flip-card .flip-hint{padding:6px 12px;font:var(--font_12)}.work-examples-modal-container .body .right-side .content .main .active-image-container .flip-card .flip-hint span{white-space:nowrap;font:var(--font_12)}.work-examples-modal-container .body .right-side .content .main .active-image-container .flip-card .flip-hint svg{display:none}}.work-examples-modal-container .body .right-side .content .main .active-image-container .zoom-controls{position:absolute;top:12px;right:12px;z-index:4;display:flex;gap:8px}.work-examples-modal-container .body .right-side .content .main .active-image-container .zoom-controls .zoom-btn{min-width:36px;height:36px;padding:0 10px;border-radius:8px;border:1px solid var(--color_accent);background:var(--color_white);color:var(--color_accent);font:var(--font_16);font-weight:700;transition:all .2s ease}.work-examples-modal-container .body .right-side .content .main .active-image-container .zoom-controls .zoom-btn.reset{min-width:44px}.work-examples-modal-container .body .right-side .content .main .active-image-container .zoom-controls .zoom-btn:hover:not(:disabled){cursor:pointer;color:var(--color_accent2);border-color:var(--color_accent2)}.work-examples-modal-container .body .right-side .content .main .active-image-container .zoom-controls .zoom-btn:disabled{opacity:.5;cursor:not-allowed}.work-examples-modal-container .body .right-side .content .main .active-image{display:flex;width:100%;height:100%;align-items:center;justify-content:center;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;cursor:default;background:transparent;border-radius:var(--border_radius_default)}.work-examples-modal-container .body .right-side .content .main .active-image img{object-fit:contain;width:100%;height:100%;transform-origin:center center;transition:none;will-change:transform;pointer-events:none}.work-examples-modal-container .body .right-side .content .main .active-image.zoomed{cursor:grab}.work-examples-modal-container .body .right-side .content .main .active-image.zoomed:active{cursor:grabbing}.work-examples-modal-container .body .right-side .content .main .change-btn{min-width:40px;border-radius:50%;height:40px;display:flex;align-items:center;justify-content:center;color:var(--color_accent);border:1px solid var(--color_accent);cursor:pointer;transition:all .3s ease}.work-examples-modal-container .body .right-side .content .main .change-btn.prev{rotate:180deg}.work-examples-modal-container .body .right-side .content .main .change-btn:hover{color:var(--color_accent2);border:1px solid var(--color_accent2)}@media screen and (max-width:720px){.work-examples-modal-container .body{flex-direction:column-reverse}.work-examples-modal-container .body .left-side{max-width:100%;min-height:15%;height:15%}.work-examples-modal-container .body .left-side .gallery{display:inline-flex;flex-direction:row}.work-examples-modal-container .body .right-side .content{padding-top:12px}.work-examples-modal-container .body .right-side .content .main{gap:10px}.work-examples-modal-container .body .right-side .content .main .active-image-container{height:min(45vh,440px)}.work-examples-modal-container .body .right-side .content .main .active-image-container .zoom-controls{display:none}.work-examples-modal-container .body .right-side .content .main .change-btn{min-width:25px;height:25px}.work-examples-modal-container .body .right-side .content .main .change-btn svg{width:20px;height:20px}}