.hpproj{width:100%;padding:18px 0;--ppv:3}
.hpproj-in{max-width:1200px;margin:0 auto;padding:0 16px}
.hpproj-viewport{position:relative;overflow:hidden;padding:0 8px}
.hpproj-track{display:flex;gap:12px;transition:transform .45s ease;will-change:transform}
.hpproj-card{flex:0 0 calc((100% - (12px * (var(--ppv) - 1))) / var(--ppv));border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.hpproj-img{width:100%;height:160px;object-fit:cover;display:block;background:#eef3f9}
.hpproj-meta{padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.hpproj-cat{font-size:12px;opacity:.75}
.hpproj-title{font-size:15px;font-weight:700;line-height:1.25}
.hpproj-btn{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;border-radius:999px;background:rgba(0,0,0,.45);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:24px;line-height:1}
.hpproj-prev{left:10px}
.hpproj-next{right:10px}
@media (max-width: 1024px){.hpproj{--ppv:2}}
@media (max-width: 640px){.hpproj{--ppv:1}}
.hpproj-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.hpproj-label{font-size:20px;font-weight:800;line-height:1}
.hpproj-tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.hpproj-tab{border:1px solid rgba(0,0,0,.14);background:#fff;border-radius:999px;padding:8px 12px;font-size:13px;font-weight:800;cursor:pointer}
.hpproj-tab.is-active{background:#111;color:#fff;border-color:#111}
@media (max-width: 640px){.hpproj-head{flex-direction:column;align-items:flex-start}.hpproj-tabs{justify-content:flex-start}}