p.cat {
    display: inline-block; line-height: 1;
    width: fit-content; width:-moz-fit-content;
    font-size: 12px !important; padding: 8px;
}
.herocard p.cat {
    border-radius: 4px; border:1px solid rgba(0,0,0,0.2); background:rgba(255,255,255,0.1);
}

 a:is(:hover,:focus-visible) p.cat { border-color: rgba(255,255,255,0.2); }



.card p.cat { border: none; color: var(--black3) !important; }

.card  p.cat,
.card.news p.cat { /*background: var(--red); background: #B54F9A;*/ background: #BB5DA2; } 
.card.event p.cat { background: var(--yellow); }
.card.blog p.cat { background: var(--orange); }