.portfolio-design .pf-filter{flex-wrap:wrap;gap:8px;margin:0 0 32px;display:flex}.portfolio-design .pf-filter button{border-radius:var(--r-pill);border:1px solid var(--hair-strong);background:var(--surface-card);color:var(--fg-secondary);font:var(--fw-semibold) var(--fs-xs) / 1 var(--font-sans);cursor:pointer;padding:9px 16px;transition:all .14s}.portfolio-design .pf-filter button:hover{border-color:var(--vw-green-400);color:var(--vw-green-700)}.portfolio-design .pf-filter button.on{background:var(--vw-navy-700);border-color:var(--vw-navy-700);color:#fff}.portfolio-design .pf-grid{grid-template-columns:repeat(2,1fr);gap:20px;display:grid}@media (max-width:880px){.portfolio-design .pf-grid{grid-template-columns:1fr}}.portfolio-design .pf-card{background:var(--surface-card);border:1px solid var(--hair);border-radius:var(--r-xl);box-shadow:var(--e-rest);transition:transform .26s var(--spring), box-shadow .26s var(--ease);flex-direction:column;display:flex;overflow:hidden}.portfolio-design .pf-card:hover{box-shadow:var(--e-lift);transform:translateY(-3px)}.portfolio-design .pf-card .ba{grid-template-columns:1fr 1fr;display:grid;position:relative;overflow:hidden;box-shadow:none!important;background:0 0!important;border:none!important;border-radius:0!important}.portfolio-design .pf-card .ba .pane{flex-direction:column;display:flex;position:relative;overflow:hidden;background:0 0!important;gap:0!important;padding:0!important}.portfolio-design .pf-card .ba .pane .tag{z-index:4;border-radius:var(--r-pill);font:var(--fw-bold) 9px / 1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;position:absolute;top:12px;align-self:auto!important;display:inline-flex!important}.portfolio-design .pf-card .ba .pane.src .tag{color:#fff;background:#ff7043eb;left:12px}.portfolio-design .pf-card .ba .pane.out .tag{color:#fff;background:#00b74af2;right:12px}.portfolio-design .pf-card .ba .pane .image-slot,.portfolio-design .pf-card .ba .pane .image-slot.image-slot--filled,.portfolio-design .pf-card .ba .pane .image-slot.image-slot--fill{width:100%;height:230px;min-height:230px;line-height:0;display:block;position:relative;overflow:hidden;box-shadow:none!important;background:0 0!important;border:none!important;border-radius:0!important}.portfolio-design .pf-card .ba .pane .image-slot .image-slot__ring{display:none}.portfolio-design .pf-card .ba .pane .image-slot--filled .image-slot__img,.portfolio-design .pf-card .ba .pane .image-slot__img{object-fit:cover;object-position:center;width:100%;max-width:none;height:100%;display:block;border-radius:0!important}.portfolio-design .pf-card .ba .pane.src .image-slot{border-right:1px solid var(--hair)!important;border-top:none!important;border-bottom:none!important;border-left:none!important}.portfolio-design .pf-card .compare{z-index:3;border:1px solid var(--hair);width:44px;height:44px;box-shadow:var(--e-lift);color:var(--vw-green-700);background:#fff;border-radius:50%;place-items:center;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.portfolio-design .pf-card .compare svg{width:18px;height:18px}@media (max-width:768px){.portfolio-design .pf-card .ba{grid-template-columns:1fr}.portfolio-design .pf-card .ba .pane.src .image-slot{border-right:none!important;border-bottom:1px solid var(--hair)!important}.portfolio-design .pf-card .ba .pane .image-slot,.portfolio-design .pf-card .ba .pane .image-slot.image-slot--filled,.portfolio-design .pf-card .ba .pane .image-slot.image-slot--fill{height:220px;min-height:220px}.portfolio-design .pf-card .compare{width:48px;height:48px}.portfolio-design .pf-card .compare svg{width:20px;height:20px;transform:rotate(90deg)}.portfolio-design .pf-card .body .top{flex-direction:column;align-items:flex-start;gap:6px}.portfolio-design .pf-card .body .cat{white-space:normal}}@media (max-width:480px){.portfolio-design .pf-filter{gap:6px;margin-bottom:24px}.portfolio-design .pf-filter button{font-size:var(--fs-2xs);padding:8px 12px}.portfolio-design .pf-grid{gap:16px}.portfolio-design .pf-card .ba .pane .image-slot,.portfolio-design .pf-card .ba .pane .image-slot.image-slot--filled,.portfolio-design .pf-card .ba .pane .image-slot.image-slot--fill{height:200px;min-height:200px}.portfolio-design .pf-card .body{padding:16px 16px 18px}}.portfolio-design .pf-card .body{flex-direction:column;gap:10px;padding:18px 20px 20px;display:flex}.portfolio-design .pf-card .body .top{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.portfolio-design .pf-card .body h3{font:var(--fw-semibold) var(--fs-md) / 1.3 var(--font-sans);color:var(--fg-primary);margin:0}.portfolio-design .pf-card .body .cat{font:var(--fw-semibold) 10px / 1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--vw-green-700);white-space:nowrap}.portfolio-design .pf-card .body p{font:400 var(--fs-sm) / 1.55 var(--font-sans);color:var(--fg-secondary);margin:0}.portfolio-design .pf-card .body .meta{flex-wrap:wrap;gap:8px;margin-top:2px;display:flex}.portfolio-design .pf-card .body .chip{border-radius:var(--r-sm);border:1px solid var(--hair-strong);font:var(--fw-semibold) 10px / 1 var(--font-mono);color:var(--fg-muted);padding:4px 9px}.portfolio-design .pf-empty{text-align:center;color:var(--fg-muted);font:500 var(--fs-md) / 1.5 var(--font-sans);padding:40px 0}