.portfolio .section-heading{margin-bottom:24px}
.portfolio-controls:not([hidden]){display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.portfolio-position{font-size:11px;letter-spacing:1px;color:var(--muted)}
.portfolio-arrows{display:flex;gap:8px}
.portfolio-arrows button{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:transparent;font-size:23px;transition:background .2s,color .2s}
.portfolio-arrows button:hover:not(:disabled){background:var(--purple);border-color:var(--purple);color:white}
.portfolio-arrows button:disabled{opacity:.3;cursor:default}
.portfolio-grid{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--purple) transparent;padding:5px 5px 15px;margin:0 -5px;scroll-padding-inline:5px}
.portfolio-grid>.work-card{flex:0 0 calc((100% - 24px)/2);scroll-snap-align:start;display:flex;flex-direction:column;opacity:1;transform:none}
.portfolio-grid .work-cover{min-height:220px;padding:24px}
.portfolio-grid .work-brand{font-size:clamp(32px,3.7vw,54px);margin:20px 0}
.portfolio-grid .work-content{padding:22px;justify-content:flex-start}
.portfolio-grid .work-link{margin-top:auto}
.portfolio-grid .work-content p{margin:12px 0 18px}
.portfolio-grid .work-decoration{font-size:200px}
.portfolio-grid>.work-card:focus-visible{outline-offset:-3px}
@media(max-width:650px){.portfolio-grid{gap:16px}.portfolio-grid>.work-card{flex-basis:100%}.portfolio-grid .work-cover{min-height:195px;padding:22px}.portfolio-grid .work-brand{font-size:38px}.portfolio-grid .work-content{padding:20px}.portfolio-grid .work-heading{gap:8px}.portfolio-grid .work-heading h3{font-size:19px}.portfolio-controls:not([hidden]){margin-bottom:12px}}