/* Figma 46:2900:26395/27450, 47:2900:26584/27639. Only approved list templates. */
.xl-h5-catalog{display:none}
@media(max-width:640px){
 .xl-h5-shell-enabled.xl-h5-catalog-page .xl-catalog-desktop,.xl-h5-shell-enabled.xl-h5-catalog-page #app-footer{display:none}
 .xl-home.xl-h5-shell-enabled .xl-h5-catalog{display:flex;flex-direction:column;gap:calc(24 * var(--xl-h5-unit));margin:0;padding:calc(16 * var(--xl-h5-unit)) calc(16 * var(--xl-h5-unit)) calc(32 * var(--xl-h5-unit));min-width:0;width:100%;box-sizing:border-box}
 .xl-h5-catalog-title{font-size:calc(24 * var(--xl-h5-unit));line-height:calc(34 * var(--xl-h5-unit));font-weight:600}
 .xl-h5-catalog-banner{position:relative;width:100%;height:calc(160 * var(--xl-h5-unit));border-radius:calc(12 * var(--xl-h5-unit));overflow:hidden;isolation:isolate;background:var(--bg-surface)}
 .xl-h5-banner-slide{position:relative;display:block;width:100%;height:calc(160 * var(--xl-h5-unit));overflow:hidden}
 .xl-h5-banner-slide>img{width:100%;height:100%;object-fit:cover}
 .xl-h5-banner-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.75));pointer-events:none}
 .xl-h5-banner-copy{position:absolute;bottom:calc(19 * var(--xl-h5-unit));left:calc(16 * var(--xl-h5-unit));right:calc(16 * var(--xl-h5-unit));display:flex;flex-direction:column;gap:calc(4 * var(--xl-h5-unit));color:var(--text-on-brand)}
 .xl-h5-banner-copy p{font-size:calc(12 * var(--xl-h5-unit));line-height:calc(17 * var(--xl-h5-unit))}
 .xl-h5-banner-copy h3{font-size:calc(20 * var(--xl-h5-unit));line-height:calc(28 * var(--xl-h5-unit));font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .xl-h5-banner-dots{position:absolute;right:calc(16 * var(--xl-h5-unit));bottom:calc(10 * var(--xl-h5-unit));display:flex;gap:calc(4 * var(--xl-h5-unit))}
 .xl-h5-banner-dots button{position:relative;display:block;width:calc(5 * var(--xl-h5-unit));height:calc(5 * var(--xl-h5-unit));padding:0;border:0;border-radius:calc(3 * var(--xl-h5-unit));background:rgba(255,255,255,.5)}
 .xl-h5-banner-dots button.is-active{width:calc(16 * var(--xl-h5-unit));background:var(--brand-blue-default)}
 .xl-h5-banner-dots button:before{content:'';position:absolute;inset:calc(-12 * var(--xl-h5-unit)) calc(-2 * var(--xl-h5-unit))}
 .xl-h5-catalog-tabs{display:flex;gap:calc(8 * var(--xl-h5-unit));max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
 .xl-h5-catalog-tabs::-webkit-scrollbar{display:none}
 .xl-h5-catalog-tabs a{display:flex;align-items:center;justify-content:center;flex:none;height:calc(32 * var(--xl-h5-unit));padding:calc(4 * var(--xl-h5-unit)) calc(12 * var(--xl-h5-unit));border-radius:calc(100 * var(--xl-h5-unit));background:var(--bg-surface);color:var(--text-secondary);font-size:calc(14 * var(--xl-h5-unit));line-height:calc(20 * var(--xl-h5-unit));white-space:nowrap;font-weight:400}
 .xl-h5-catalog-tabs a.is-active{background:var(--brand-blue-default);color:var(--text-on-brand)}
 .xl-h5-catalog .xl-video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(16 * var(--xl-h5-unit)) calc(12 * var(--xl-h5-unit));padding:0;margin:0;list-style:none}
 .xl-h5-catalog .xl-video-item{min-width:0;margin:0;padding:0;list-style:none}
 .xl-h5-catalog .xl-video{display:flex;flex-direction:column;gap:calc(8 * var(--xl-h5-unit));min-width:0;min-height:calc(154 * var(--xl-h5-unit));background:transparent;padding:0;border-radius:0}
 .xl-h5-catalog .xl-video-cover{position:relative;display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:calc(8 * var(--xl-h5-unit));overflow:hidden;flex:none}
 .xl-h5-catalog .xl-video-cover>img{width:100%;height:100%;object-fit:cover}
 .xl-h5-catalog .xl-video-meta{inset:auto 0 0;display:flex;align-items:center;justify-content:space-between;height:calc(36 * var(--xl-h5-unit));padding:calc(12 * var(--xl-h5-unit)) calc(8 * var(--xl-h5-unit)) calc(4 * var(--xl-h5-unit));gap:calc(4 * var(--xl-h5-unit));background:linear-gradient(180deg,transparent,rgba(0,0,0,.72));color:var(--text-on-brand);font-size:calc(10 * var(--xl-h5-unit));line-height:calc(14 * var(--xl-h5-unit));font-family:var(--font-number,var(--font-ui))}
 .xl-h5-catalog .xl-video-meta>span{display:flex;gap:calc(4 * var(--xl-h5-unit));align-items:center;white-space:nowrap}
 .xl-h5-catalog .xl-video-meta img{display:none}
 .xl-h5-catalog .xl-video-title{display:block;height:calc(20 * var(--xl-h5-unit));padding:0;margin:0;font-size:calc(14 * var(--xl-h5-unit));line-height:calc(20 * var(--xl-h5-unit));font-weight:400;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:unset}
 .xl-h5-catalog .xl-content-badge,.xl-h5-catalog .xl-video-date{display:none}
 .xl-h5-catalog .xl-vip-badge{top:calc(6 * var(--xl-h5-unit));right:calc(6 * var(--xl-h5-unit));left:auto;padding:calc(3 * var(--xl-h5-unit)) calc(6 * var(--xl-h5-unit));height:calc(20 * var(--xl-h5-unit));min-height:0;border-radius:calc(4 * var(--xl-h5-unit));background:var(--membership-accent);color:var(--membership-on-accent);font-size:calc(10 * var(--xl-h5-unit));font-weight:400;line-height:calc(14 * var(--xl-h5-unit))}
 .xl-h5-catalog .video-unlock-badge--free{background:#116149;color:#fff}
 .xl-h5-catalog .xl-tags{display:flex;flex-wrap:nowrap;gap:calc(4 * var(--xl-h5-unit));min-height:calc(20 * var(--xl-h5-unit));margin:0;overflow:hidden}
 .xl-h5-catalog .xl-tags a{display:block;flex:none;max-width:none;height:calc(20 * var(--xl-h5-unit));padding:calc(2 * var(--xl-h5-unit)) calc(9 * var(--xl-h5-unit));border-radius:calc(100 * var(--xl-h5-unit));background:var(--bg-surface);color:var(--text-secondary);font-size:calc(11 * var(--xl-h5-unit));line-height:calc(16 * var(--xl-h5-unit));font-weight:400;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
 .xl-h5-people-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(16 * var(--xl-h5-unit)) calc(12 * var(--xl-h5-unit));margin:0;padding:0;list-style:none}
 .xl-h5-person-item{min-width:0;list-style:none}
 .xl-h5-person{display:flex;flex-direction:column;gap:calc(8 * var(--xl-h5-unit));min-width:0}
 .xl-h5-person-cover{display:block;aspect-ratio:1;overflow:hidden;border-radius:calc(8 * var(--xl-h5-unit));background:var(--bg-surface)}
 .xl-h5-person-cover img{width:100%;height:100%;object-fit:cover;border-radius:calc(8 * var(--xl-h5-unit))}
 .xl-h5-person-meta{display:flex;align-items:center;justify-content:space-between;gap:calc(6 * var(--xl-h5-unit));min-width:0;height:calc(22 * var(--xl-h5-unit))}
 .xl-h5-person-meta>a{min-width:0}
 .xl-h5-person-meta h3{font-size:calc(16 * var(--xl-h5-unit));line-height:calc(22 * var(--xl-h5-unit));font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .xl-h5-person-meta p{flex:none;font-size:calc(12 * var(--xl-h5-unit));line-height:calc(17 * var(--xl-h5-unit));color:var(--text-tertiary);white-space:nowrap;font-family:var(--font-number,var(--font-ui))}
 .xl-h5-person-follow{display:flex;align-items:center;justify-content:center;width:100%;height:calc(28 * var(--xl-h5-unit));padding:0 calc(12 * var(--xl-h5-unit));border:0;border-radius:calc(100 * var(--xl-h5-unit));background:var(--bg-emphasis);color:var(--text-primary);font-size:calc(12 * var(--xl-h5-unit))!important;line-height:calc(17 * var(--xl-h5-unit));font-weight:600!important}
 .xl-h5-person-follow[aria-pressed="true"]{color:var(--text-muted)}
 .xl-h5-person-follow:disabled{opacity:.65;cursor:wait}
 .xl-h5-person .xl-actor-follow-error{font-size:calc(12 * var(--xl-h5-unit));line-height:calc(17 * var(--xl-h5-unit));color:var(--state-danger)}
 .xl-home .xl-h5-loadmore{display:flex;align-items:center;justify-content:center;flex:none;width:100%;height:calc(44 * var(--xl-h5-unit));padding:0 calc(24 * var(--xl-h5-unit));font-size:calc(14 * var(--xl-h5-unit));font-weight:600;line-height:calc(20 * var(--xl-h5-unit))}
 .xl-h5-loadmore:disabled{background:var(--bg-surface);color:var(--text-muted)!important;cursor:default}
 .xl-h5-catalog-empty,.xl-h5-catalog-status{font-size:calc(14 * var(--xl-h5-unit));line-height:calc(20 * var(--xl-h5-unit));color:var(--text-tertiary)}
 .xl-h5-catalog-status:empty{display:none}
 .xl-h5-catalog a:focus-visible,.xl-h5-catalog button:focus-visible,.xl-h5-catalog-tabs:focus-visible{outline:calc(2 * var(--xl-h5-unit)) solid var(--brand-blue-default);outline-offset:calc(2 * var(--xl-h5-unit))}
}

@media(max-width:640px){
 .xl-h5-article-list{display:flex;flex-direction:column;gap:calc(12 * var(--xl-h5-unit));padding:0;margin:0;list-style:none}
 .xl-h5-article{display:flex;align-items:center;gap:calc(12 * var(--xl-h5-unit));width:100%;height:calc(108 * var(--xl-h5-unit));padding:calc(12 * var(--xl-h5-unit));border-radius:calc(12 * var(--xl-h5-unit));background:var(--bg-surface);overflow:hidden}
 .xl-h5-article-cover{display:block;flex:none;width:calc(112 * var(--xl-h5-unit));height:calc(84 * var(--xl-h5-unit));border-radius:calc(8 * var(--xl-h5-unit));overflow:hidden}
 .xl-h5-article-cover img{width:100%;height:100%;object-fit:cover}
 .xl-h5-article-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:calc(8 * var(--xl-h5-unit))}
 .xl-h5-article-copy h3{font-size:calc(14 * var(--xl-h5-unit));line-height:calc(20 * var(--xl-h5-unit));font-weight:400;color:var(--text-primary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
 .xl-h5-article-copy>span{font-size:calc(12 * var(--xl-h5-unit));line-height:calc(17 * var(--xl-h5-unit));color:var(--text-tertiary);white-space:nowrap}
}