.real-projects{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#0d9b86 #dbe8ef;padding:6px 2px 22px;overscroll-behavior-x:contain}
.real-project{flex:0 0 calc((100% - 48px)/3);min-width:0;scroll-snap-align:start;border:1px solid #d3e1eb;border-radius:20px;background:#fff;overflow:hidden;box-shadow:0 8px 24px #06152d0c;display:flex;flex-direction:column}
.project-preview{display:block;text-decoration:none;color:#496070;background:#eaf1f5}
.browser-bar{display:flex;gap:10px;align-items:center;padding:12px 13px;font:500 10px/1.2 Arial,sans-serif;border-bottom:1px solid #d8e3ea;white-space:nowrap}
.browser-bar>span:nth-child(2){overflow:hidden;text-overflow:ellipsis;flex:1}
.browser-lights{display:flex;gap:4px}.browser-lights i{width:6px;height:6px;border-radius:50%;background:#a2b7c5}.browser-lights i:nth-child(2){background:#66c6ba}.browser-lights i:nth-child(3){background:#38b5e1}
.project-preview img{display:block;width:100%;height:auto;aspect-ratio:1366/1000;object-fit:contain}
.project-info{padding:23px;display:flex;flex:1;flex-direction:column;align-items:flex-start}.project-segment{font-size:12px;font-weight:650;color:#087b69}.project-info h3{font-size:22px;line-height:1.2;color:#06152d;margin:9px 0 22px;letter-spacing:-.03em}.project-visit{display:inline-flex;gap:24px;align-items:center;justify-content:space-between;min-height:44px;padding:11px 18px;border-radius:30px;color:#fff;background:linear-gradient(120deg,#087fbd,#078757);font-size:14px;font-weight:750;text-decoration:none;margin-top:auto;transition:box-shadow .2s}.project-visit:hover{box-shadow:0 4px 15px #087fbd35}.project-visit span[aria-hidden]{font-size:20px}
.project-navigation{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:16px}.project-navigation p{color:#50677a;font-size:13px;margin:0}.project-navigation>div{display:flex;gap:10px}.project-navigation button{width:46px;height:46px;border:1px solid #bdd3df;border-radius:50%;color:#06152d;background:white;font:600 23px/1 Arial;cursor:pointer}.project-navigation button:disabled{opacity:.35;cursor:default}
#portfolio :is(a,button,.real-projects):focus-visible{outline:3px solid #008b70;outline-offset:3px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1000px){.real-project{flex-basis:calc((100% - 24px)/2)}}
@media(max-width:640px){.real-projects{gap:16px}.real-project{flex-basis:88%}.project-info{padding:20px}.project-info h3{font-size:22px}.project-navigation{align-items:flex-start;flex-direction:column;gap:12px}.project-navigation p{font-size:12px}.project-navigation>div{margin-right:76px}}
@media(prefers-reduced-motion:reduce){.project-visit{transition:none}}