.web-portfolio{background:#fff}
.web-portfolio .section-head>p{max-width:480px}
.web-project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px}
.web-project-card{display:block;overflow:hidden;border:1px solid #dfe6eb;border-radius:18px;background:#fff;color:#183248;box-shadow:0 12px 35px rgba(24,50,72,.08);transition:transform .2s ease,box-shadow .2s ease}
.web-project-card:hover{transform:translateY(-5px);box-shadow:0 18px 42px rgba(24,50,72,.14)}
.web-project-card:focus-visible{outline:3px solid #f15d24;outline-offset:5px}
.web-project-browser{height:38px;display:flex;align-items:center;gap:6px;padding:0 13px;background:#263a49;color:#fff}
.web-project-browser i{display:block;width:8px;height:8px;border-radius:50%;background:#f15d24}
.web-project-browser i:nth-child(2){background:#ffbd55}
.web-project-browser i:nth-child(3){background:#67bd83}
.web-project-browser b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:7px;font-size:10px;font-weight:600;opacity:.82}
.web-project-card>img{display:block;width:100%;height:225px;object-fit:cover;object-position:top;background:#f4f6f7;border:0}
.web-project-info{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 19px}
.web-project-info strong{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.web-project-info em{white-space:nowrap;color:#df531e;font-style:normal;font-size:11px;font-weight:800}
@media(max-width:950px){.web-project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.web-project-grid{grid-template-columns:1fr;gap:20px}.web-project-card>img{height:210px}.web-project-info{padding:16px}.web-portfolio .section-head{gap:12px}}
@media(prefers-reduced-motion:reduce){.web-project-card{transition:none}.web-project-card:hover{transform:none}}