.project_modal{position: fixed;overflow: hidden;visibility: hidden;opacity: 0;transition: opacity 0.3s ease-out, visibility 0.3s;&.is-visible { visibility: visible;opacity: 1;.pmd_main { transform: translate(-50%, 0) rotate(0);}    }    &, .pmd_close,{transition: all 0.3s ease-out;}    &, .pmd_overlay, .pmd_main{left: 0;}    &, .pmd_overlay{top: 0;height: 100vh;width: 100vw;}    .pmd_overlay, .pmd_main{position: absolute;}    .pmd_overlay{background-color: rgba(0,0,0,0.7);backdrop-filter: blur(0.5em);cursor: pointer;}    .pmd_main{bottom: 0;left: 50%;transform: translateX(-50%);width: 100%;max-width: 990px;height: calc(100vh - 60px);background-color: white;border-top-left-radius: 1rem;border-top-right-radius: 1rem;transform: translate(-50%, 110%) rotate(-10deg);transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);color: var(--color-blue-70);@media (max-width: 990px) { transform: translate(50%, 110%) rotate(-10deg);width: calc(100vw - 30px);}    }    .pmd_close{position: relative;width: fit-content;top: 15px;left: 50%;transform: translateX(-50%);margin: 0;border-color: white;background-color: transparent;color: white;&:hover { border-color: var(--color-orange);color: white;}        &:active{border-color: var(--color-orange);background-color: var(--color-orange);color: black;}        &:focus{outline: dashed 2px white;outline-offset: 2px;}    }    .pmd_columns{display: flex;flex-direction: row;gap: 40px;height: 100%;min-height: 100%;padding: 25px 25px 0;.column { max-height: 100%;min-height: 100%;}        .column.info{flex: 1;max-width: 260px;min-width: 260px;overflow-y: auto;padding-bottom: 3rem;scroll-behavior: smooth;scrollbar-width: none;}        .column.photos{position: relative;width: 100%;}    }    .pmd_titling{padding-left: 4px;.title { font-family: var(--font-display);font-size: 2rem;line-height: 1;color: var(--color-blue-100);font-weight: 700;text-transform: uppercase;letter-spacing: -1px;}        .subtitle{margin-top: 0.6rem;font-size: 0.9rem;line-height: 1.5;font-weight: 700;font-style: italic;}        .weblink{margin-top: 0.8rem }    }    .pmd_content{margin-top: 2.5rem;hr { margin-bottom: 1rem;border-top: solid 1px var(--color-blue-15);}        p{font-family: var(--font-serif);font-size: 0.8rem;line-height: 1.7;color: var(--color-blue-90);}        .additional{margin-top: 1rem;strong { font-weight: 700;color: var(--color-blue-100);}            li{position: relative;padding-left: 15px;margin-bottom: 0.2rem;&::before { position: absolute;left: 0;top: 7px;display: inline-block;width: 8px;height: 8px;flex-shrink: 0;background: var(--color-blue-100);border-radius: 2rem;content: '';}            }        }    }    .pmd_projectphotos{--height-elements: 82px;--width-buttons: 25px;--radius-buttons: 1rem;--svg-size: 25px;&, .part { height: var(--height-elements) }        &{display: flex;flex-direction: row;align-items: center;width: 100%;cursor: ew-resize;}        .part.button{width: var(--width-buttons);z-index: 100;}        .part.items{flex: 1;width: 0;max-width: 100%;overflow-x: auto;overflow-y: hidden;scroll-behavior: smooth;scrollbar-width: none;background-color: var(--color-blue-5);z-index: 50;&:focus { outline: dashed 2px var(--color-blue-50);outline-offset: -3px;}        }        .photoitems{display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;gap: 10px;padding: 10px 15px;width: fit-content;}        .photoitem{position: relative;background-color: white;&, img, span { width: 100px;height: 62px;border-radius: 0.5rem;transition: all 0.3s ease-out;}            img{opacity: 0.4;border: solid 2px var(--color-blue-30);}            span{position: absolute;top: 0;left: 0;display: flex;justify-content: center;align-items: center;border: solid 2px var(--color-blue-90);background-color: rgba(41,58,76,0.5);backdrop-filter: blur(0.1em);opacity: 0;svg { display: block;width: 0;height: 0;filter: drop-shadow(0 2px 2px rgba(41,58,76,0.5));}                path{fill: white }                &.search{display: none }            }            &:hover, &:focus{transform: scale(1.06);img, span { opacity: 1 }                svg{width: var(--svg-size);height: var(--svg-size);}            }            &:active span{background-color: rgba(41,58,76,0.8) }            &:focus{outline: dashed 2px var(--color-blue-70);outline-offset: 1px;}            &.active{transform: scale(1.1);img, span { opacity: 1 }                span{background-color: rgba(41,58,76,0.8);&.enlarge { display: none }                    &.search{display: flex }                }                svg{width: var(--svg-size);height: var(--svg-size);}            }        }        .photobutton{display: flex;align-items: center;justify-content: center;width: var(--width-buttons);height: var(--height-elements);padding: 0;background-color: var(--color-blue-5);&.left { border-top-left-radius: var(--radius-buttons) }            &.right{border-top-right-radius: var(--radius-buttons) }            svg{display: block;width: 15px;height: 15px;}            path{fill: var(--color-blue-100) }            &:hover{background-color: var(--color-blue-30) }            &:active{background-color: var(--color-blue-90);path { fill: white }            }            &:focus{outline: dashed 2px var(--color-blue-70);outline-offset: 1px;}        }    }    .pmd_photofull{position: absolute;bottom: 0;width: 100%;height: calc(100vh - 167px);max-width: 100%;background-color: var(--color-blue-5);border-left: solid 2px var(--color-blue-5);border-right: solid 2px var(--color-blue-5);border-bottom: 0;overflow: hidden;&, .photocont, .caption, .photo, .caption-toggle, .caption-content { transition: all 0.3s ease-out;user-select: none;}        .photocont{display: inline-block;width: 100%;height: 100%;overflow-x: auto;overflow-y: auto;scroll-behavior: smooth;scrollbar-width: none;div, img { display: inline-block;width: auto;height: 100%;min-height: 640px;}            img{cursor: ew-resize;-webkit-user-drag: none;-webkit-touch-callout: none;user-select: none;}            &:focus{outline: dashed 2px var(--color-blue-50);outline-offset: -3px;}        }        .caption{position: absolute;left: 1rem;bottom: 1rem;display: flex;flex-direction: row;align-items:flex-end;padding: 0.5rem 0.8rem 0.5rem 0.5rem;width: fit-content;max-width: 80%;min-height: 28px;background-color: rgba(0,0,0,0.8);border-radius: 0.5rem;backdrop-filter: blur(0.2em);&.visible { padding-right: 0.5rem;width: 34px;height: 34px;border-radius: 34px;.caption-content { display: none;}            }        }        .caption-toggle{display: flex;justify-content: center;align-items: center;width: 18px;height: 18px;padding: 0;border: solid 2px var(--color-orange);background-color: var(--color-orange);border-radius: 100px;flex-shrink: 0;svg { display: inline-block;width: 65%;height: 65%;}            path{fill: black }            &:hover{border-color: white;background-color: white;}            &:active{background-color: rgba(255,255,255,0.2);path { fill: white }            }            &:focus{outline: dashed 1px white;outline-offset: 1px;}        }        .caption-content{display: inline-block;padding-bottom: 0.1rem;padding-left: 0.4rem;width: 100%;font-family: var(--font-display);font-size: 0.8rem;line-height: 1.1;color: white;text-align: left;font-weight: 700;}    }    @media (max-width: 760px) {.pmd_columns { flex: 1;flex-direction: column;gap: 2rem;overflow-y: auto;padding-bottom: 3rem;scroll-behavior: smooth;scrollbar-width: none;padding: 25px 25px 0;.column { position: relative;display: block !important;width: 100% !important;max-width: 100% !important;min-width: 100% !important;max-height: fit-content;min-height: fit-content;}            .column.info{flex: none;padding-bottom: 0;}        }        .pmd_projectphotos{height: 55px !important;.photobutton { display: flex;align-items: center;justify-content: center;width: 30px !important;height: 55px !important;padding: 0;background-color: var(--color-blue-5);&.left { border-top-left-radius: 0.6rem;border-bottom-left-radius: 0;}                &.right{border-top-right-radius: 0.6rem;border-bottom-right-radius: 0;}            }            .part{height: 55px !important;&.button { width: 30px !important }            }            .photoitems{height: 55px;padding: 7px 15px;gap: 7px;}            .photoitem{&, img, span { width: 58px;height: 40px;border-radius: 0.4rem;}                &:hover svg{width: 22px;height: 22px;}                &.active{transform: scale(1.08);svg { width: 22px;height: 22px;}                }            }        }        .pmd_photofull{position: relative;height: calc(100vh - 140px) !important;border-top-right-radius: 0;border-top-left-radius: 0;.caption { margin-right: 0 }        }    }}