.portfolio-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:30px;max-width:1500px;margin:auto;padding-left:20px;padding-right:20px;display:grid}.portfolio-grid .image-wrap{touch-action:pan-y;flex:1;position:relative;overflow:hidden}.portfolio-grid .image-wrap img{-webkit-user-select:none;-moz-user-select:none;user-select:none;max-width:100%;max-height:100%;transition:transform .25s}.portfolio-modal .modal-content .nav{color:#fff;cursor:pointer;z-index:3;background:rgba(255,255,255,.12);border:none;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;font-size:18px;display:flex;position:fixed;top:50%;transform:translateY(-50%)}.portfolio-modal .modal-content .nav:hover{background:rgba(255,255,255,.25)}.portfolio-modal .modal-content .nav.prev{left:16px}.portfolio-modal .modal-content .nav.next{right:16px}.portfolio-item{aspect-ratio:4/3;cursor:pointer;background:#f4f4f4;border:none;border-radius:14px;padding:0;position:relative;overflow:hidden}.portfolio-item img{-o-object-fit:cover;object-fit:cover;transition:transform .4s}.portfolio-item:hover img{transform:scale(1.05)}.portfolio-item .title{color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:rgba(0,0,0,.55);border-radius:999px;padding:4px 10px;font-size:13px;font-weight:500;position:absolute;bottom:12px;left:12px}.portfolio-modal{z-index:999;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:rgba(0,0,0,.85);justify-content:center;align-items:center;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.modal-content{flex-direction:column;width:90vw;height:90vh;display:flex}.toolbar{gap:8px;margin-bottom:12px;display:flex;position:fixed;top:20px;right:20px}.toolbar button,.toolbar a{color:#fff;cursor:pointer;background:rgba(255,255,255,.12);border:none;border-radius:999px;padding:6px 12px;font-size:20px;text-decoration:none}.toolbar button:hover,.toolbar a:hover{background:rgba(255,255,255,.25)}.image-wrap{width:100%;max-width:1200px;margin:0 auto;padding-bottom:120px;transition:transform .4s;position:relative;overflow-y:scroll}.image-wrap img{margin:auto}.image-wrap .description{color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#000;width:100%;max-width:1200px;margin:0 auto;padding:16px;position:fixed;bottom:50px;left:50%;transform:translate(-50%)}.image-wrap .description .hero-text{color:#b8b8b8;max-width:100%;margin-top:8px;font-size:16px;line-height:1.5}.image-wrap .description h3{margin:0 0 8px;font-size:24px;font-weight:600}.image-wrap .description p{margin:0;font-size:16px;line-height:1.4}
