.cat-circles__heading{text-align:center;margin:0 0 2rem}
.cat-circles__viewport{position:relative}
.cat-circles__track{display:flex;gap:2.4rem;list-style:none;margin:0;padding:0 0 .4rem;overflow-x:auto;
  scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none}
.cat-circles__track::-webkit-scrollbar{display:none}
.cat-circles__item{flex:0 0 auto;scroll-snap-align:start}
.cat-circles__link{display:flex;flex-direction:column;align-items:center;gap:.9rem;width:9.6rem;
  text-decoration:none;color:inherit}
.cat-circles__ring{display:block;width:9.6rem;height:9.6rem;border-radius:50%;overflow:hidden;
  background:rgba(var(--color-foreground),.05);transition:transform .22s ease,box-shadow .22s ease}
.cat-circles__link:hover .cat-circles__ring{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.14)}
.cat-circles__image{width:100%;height:100%;object-fit:cover;display:block}
.cat-circles__ring--empty{display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(var(--color-foreground),.25);background:transparent;color:rgb(var(--color-foreground))}
.cat-circles__ring--empty svg{width:2.4rem;height:2.4rem}
.cat-circles__label{font-size:1.25rem;line-height:1.3;text-align:center;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cat-circles__link:hover .cat-circles__label{text-decoration:underline;text-underline-offset:.3rem}
.cat-circles__nav{position:absolute;top:4.8rem;transform:translateY(-50%);z-index:2;width:3.6rem;height:3.6rem;
  border:none;border-radius:50%;background:rgba(255,255,255,.96);color:rgb(var(--color-foreground));cursor:pointer;
  box-shadow:0 2px 12px rgba(0,0,0,.16);display:none;align-items:center;justify-content:center;padding:0}
.cat-circles__nav svg{width:1.1rem;height:1.1rem}
.cat-circles__nav--prev{left:-1.2rem}
.cat-circles__nav--prev svg{transform:rotate(90deg)}
.cat-circles__nav--next{right:-1.2rem}
.cat-circles__nav--next svg{transform:rotate(-90deg)}
.cat-circles__nav[hidden]{display:none!important}
@media screen and (min-width:750px){
  .cat-circles__viewport:hover .cat-circles__nav{display:flex}
  .cat-circles__link,.cat-circles__ring{width:11rem}
  .cat-circles__ring{height:11rem}
  .cat-circles__nav{top:5.5rem}
}