@layer base{.hpv5-ramp{grid-template-columns:repeat(6,1fr);gap:6px;width:100%;margin-top:auto;display:grid}.hpv5-ramp-cell{aspect-ratio:1;border-radius:8px;justify-content:center;align-items:center;text-decoration:none;transition:border-color .2s,background-color .2s,transform .2s;display:flex;position:relative}.hpv5-ramp-cell--card{background:var(--color-white);border:1px solid var(--color-border-soft);cursor:pointer}.hpv5-ramp-cell--card:hover{border-color:var(--color-border);z-index:5}.hpv5-ramp-logo{width:60%;height:52%;transition:transform .2s;display:block;position:relative}.hpv5-ramp-cell--card:hover .hpv5-ramp-logo{transform:scale(1.06)}.hpv5-ramp-meta{background:var(--color-white);border:1px solid var(--color-border);pointer-events:none;white-space:nowrap;opacity:0;z-index:10;border-radius:4px;flex-direction:column;align-items:center;gap:2px;padding:6px 10px;transition:opacity .18s,transform .2s;display:flex;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%,4px)}.hpv5-ramp-cell--card:hover .hpv5-ramp-meta{opacity:1;transform:translate(-50%)}.hpv5-ramp-cell:nth-child(-n+6) .hpv5-ramp-meta{top:calc(100% + 6px);bottom:auto;transform:translate(-50%,-4px)}.hpv5-ramp-cell--card:nth-child(-n+6):hover .hpv5-ramp-meta{transform:translate(-50%)}.hpv5-ramp-name{font-family:var(--font-display);font-weight:var(--w-halbfett);letter-spacing:-.01em;color:var(--color-dark);font-size:12px;line-height:1.2}.hpv5-ramp-cat{font-family:var(--font-display);font-weight:var(--w-kraftig);letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-secondary);font-size:9px;line-height:1.2}}