.hp-popular-tabs{container-type:inline-size;overflow:hidden;color:var(--bs-body-color)}

.hp-popular-tabs__nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block-end:1px solid var(--bs-border-color)}

.hp-popular-tabs__tab{position:relative;min-width:0;padding:.65rem .25rem;border:0;background:transparent;color:var(--bs-secondary-color);font-size:.72rem;font-weight:700;line-height:1.1;text-align:center}

.hp-popular-tabs__tab::after{position:absolute;inset:auto 18% -1px;height:2px;background:var(--hp-accent);content:"";opacity:0;transform:scaleX(.35);transition:opacity .18s ease,transform .18s ease}

.hp-popular-tabs__tab:is(:hover,:focus-visible),.hp-popular-tabs__tab.is-active,.hp-popular-tabs__tab.active{color:var(--hp-accent-text,var(--hp-accent))}

.hp-popular-tabs__tab.is-active::after,.hp-popular-tabs__tab.active::after{opacity:1;transform:scaleX(1)}

.hp-popular-tabs__tab:focus-visible{outline:2px solid color-mix(in srgb,var(--hp-accent) 55%,transparent);outline-offset:-2px}

.hp-popular-tabs__panel{padding:.55rem 0 0}

.hp-popular-tabs__list{display:grid;gap:0;margin:0;padding:0;list-style:none;counter-reset:none}

.hp-popular-tabs__item{position:relative;display:grid;grid-template-columns:1.6rem minmax(0,1fr);gap:.55rem;align-items:center;min-width:0;padding:.62rem .15rem;border-block-end:1px solid var(--bs-border-color)}

.hp-popular-tabs__item:last-child{border-block-end:0}

.hp-popular-tabs__rank{display:grid;place-items:center;width:1.55rem;height:1.55rem;color:var(--bs-secondary-color);background:var(--bs-tertiary-bg);border-radius:50%;font-size:.65rem;font-weight:800}

.hp-popular-tabs__copy{min-width:0}

.hp-popular-tabs__copy h3{display:-webkit-box;margin:0;overflow:hidden;color:var(--bs-body-color);font:700 .82rem/1.32 var(--hp-font-heading);letter-spacing:-.012em;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.hp-popular-tabs__copy h3{font-weight:500}

.hp-popular-tabs__copy a{color:inherit;text-decoration:none}
.hp-popular-tabs__copy a:hover{color:var(--hp-accent)}

.hp-popular-tabs__copy time{display:flex;align-items:center;gap:.25rem;margin-top:.25rem;color:var(--bs-secondary-color);font-size:.65rem}

.hp-popular-tabs__empty{margin:0;padding:1rem .5rem;color:var(--bs-secondary-color);font-size:.78rem;text-align:center}

.hp-popular-tabs--sidebar-featured .hp-popular-tabs__item.is-first{grid-template-columns:1.6rem minmax(0,1fr);padding-top:0}

.hp-popular-tabs--sidebar-featured .hp-popular-tabs__item.is-first .hp-popular-tabs__media{grid-column:1/-1;display:block;aspect-ratio:16/9;margin-bottom:.08rem;overflow:hidden;border-radius:calc(var(--hp-card-radius,9px) - 2px);background:var(--bs-tertiary-bg)}

.hp-popular-tabs--sidebar-featured .hp-popular-tabs__item.is-first .hp-popular-tabs__media img{width:100%;height:100%;object-fit:cover;transition:transform .28s ease}

.hp-popular-tabs--sidebar-featured .hp-popular-tabs__item.is-first:hover img{transform:scale(1.025)}

.hp-popular-tabs--sidebar-featured .hp-popular-tabs__item.is-first .hp-popular-tabs__rank{color:#fff;background:var(--hp-accent-text,var(--hp-accent))}

.hp-popular-tabs--sidebar-featured .hp-popular-tabs__item.is-first h3{font-size:.9rem}

.hp-popular-tabs--sidebar-ranked .hp-popular-tabs__item{grid-template-columns:2rem minmax(0,1fr);padding:.72rem .15rem}

.hp-popular-tabs--sidebar-ranked .hp-popular-tabs__rank{width:auto;height:auto;color:color-mix(in srgb,var(--hp-accent) 78%,var(--bs-body-color));background:transparent;border-radius:0;font:800 1.25rem/1 var(--hp-font-heading);opacity:.65}

.hp-popular-tabs--sidebar-thumbnails .hp-popular-tabs__item{grid-template-columns:4.25rem 1.45rem minmax(0,1fr);gap:.45rem}

.hp-popular-tabs--sidebar-thumbnails .hp-popular-tabs__media{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:calc(var(--hp-card-radius,9px) - 3px);background:var(--bs-tertiary-bg)}

.hp-popular-tabs--sidebar-thumbnails .hp-popular-tabs__media img{width:100%;height:100%;object-fit:cover}

.hp-popular-tabs--sidebar-thumbnails .hp-popular-tabs__rank{width:1.4rem;height:1.4rem;font-size:.6rem}

@container(max-width:260px){.hp-popular-tabs__tab{font-size:.65rem}
.hp-popular-tabs--sidebar-thumbnails .hp-popular-tabs__item{grid-template-columns:3.5rem 1.3rem minmax(0,1fr)}
.hp-popular-tabs__copy h3{font-size:.76rem}
}

@media(prefers-reduced-motion:reduce){.hp-popular-tabs__tab::after,.hp-popular-tabs__media img{transition:none!important}
}