/* Latest HTML: portrait posters with an inline DIN rank and title caption. */
html body.site51 .rank-poster-card{display:grid;grid-template-columns:30px minmax(0,1fr);grid-template-rows:auto auto;gap:0 7px;align-items:start;align-content:start;min-width:0;width:100%;padding:0;border:0;background:transparent;text-align:left}
html body.site51 .rank-poster-card>.cover{grid-column:1/-1;grid-row:1;position:relative;display:block;width:100%;height:auto;aspect-ratio:640/914;margin:0 0 12px;border-radius:8px;overflow:hidden}
html body.site51 .rank-poster-card .poster-source{display:block;width:100%;height:100%;object-fit:cover;border-radius:8px;transform:none;transition:filter .22s ease,box-shadow .22s ease}
html body.site51 .rank-poster-card .home-corner-badge{top:8px;right:8px;display:flex;align-items:center;min-height:20px;padding:2px 6px;border-radius:6px;font-size:10px;line-height:16px}
html body.site51 .rank-poster-card .drama-episodes{right:10px;bottom:10px;font-size:12px;padding:0;background:none}
html body.site51 .rank-poster-number{display:block;grid-column:1;grid-row:2;align-self:start;justify-self:start;position:static;margin:0;padding:0;background:none;font:400 24px/1.1 'HG DIN','Helvetica Neue',Arial,sans-serif;font-style:normal;letter-spacing:-1px;font-variant-numeric:lining-nums tabular-nums;color:#fff;-webkit-text-stroke:1.5px #000;paint-order:stroke fill;text-shadow:0 1px 2px #000;pointer-events:none}
html body.site51 .rank-poster-number[data-rank="1"]{color:#ff3d98}
html body.site51 .rank-poster-number[data-rank="2"]{color:#66d9ff}
html body.site51 .rank-poster-number[data-rank="3"]{color:#ffc45c}
html body.site51 .rank-poster-number[data-rank="4"]{color:#c69cff}
html body.site51 .rank-poster-number[data-rank="5"]{color:#5ce6b0}
html body.site51 .rank-poster-number[data-rank="6"]{color:#ff839f}
html body.site51 .rank-poster-card>h3{grid-column:2;grid-row:2;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;min-width:0;min-height:37px;margin:0;font-size:12px;line-height:1.55;font-weight:400;color:var(--text);white-space:normal}
html body.site51 .rank-poster-card:hover>h3{color:var(--text)}
html body.site51.cg-home .rank-poster-card:hover>h3{color:#eea6c8}
html body.site51 .rank-poster-card:hover .poster-source{filter:brightness(1.1);box-shadow:inset 0 0 0 2px #ec237f,0 0 0 2px #ec237f}
html body.site51 .hg-home-ranking .rank-poster-card>.cover,html body.site51 .hg-home-ranking .poster-source{border-radius:10px}
html body.site51 .hg-home-ranking .rank-poster-card{grid-template-rows:none}
html body.site51 .hg-home-ranking .rank-poster-number{grid-row:2/4;justify-self:stretch}
html body.site51 .hg-home-ranking{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:28px 18px}
html body.site51 #channel-page[data-channel="rank"]{padding-top:32px!important;padding-bottom:36px}
html body.site51 #channel-page[data-channel="rank"]>.info-heading{padding:30px 0 28px}
html body.site51 #channel-page[data-channel="rank"] #channel-title{font-size:32px;line-height:1.3;font-weight:650;letter-spacing:0}
html body.site51 #channel-page[data-channel="rank"] .channel-tabs{color:var(--text);display:flex;gap:16px;align-items:center;flex-wrap:nowrap;margin:0 0 24px!important;padding:0!important;border:0!important;overflow:visible}
html body.site51 #channel-page[data-channel="rank"] .channel-tabs a{flex:0 0 auto;box-sizing:content-box;min-width:56px!important;width:auto!important;height:auto!important;padding:13px 24px!important;margin:0!important;border:1px solid #ffffff0c!important;border-radius:999px!important;background:#1d1d20!important;color:#929299!important;font:400 16px/1.5 var(--font-ui)!important;box-shadow:none!important;white-space:nowrap;text-align:center}
html body.site51 #channel-page[data-channel="rank"] .channel-tabs a span{font:inherit!important;color:inherit!important;background:transparent!important}
html body.site51 #channel-page[data-channel="rank"] .channel-tabs a[aria-current="page"]{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important;box-shadow:inset 0 1px 0 #ffffff16!important}
html body.site51 #channel-page[data-channel="rank"] .channel-tabs a::after{content:none!important;display:none!important}
html body.site51 #channel-page[data-channel="rank"] .channel-tabs a:hover:not([aria-current="page"]){color:#f092ba!important;border-color:#ec237f55!important}
html body.site51 .hg-rank-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px 16px}
html body.site51 .hg-rank-list>.rank-poster-card{grid-template-columns:32px minmax(0,1fr);gap:12px 8px}
html body.site51 .hg-rank-list .rank-poster-card>.cover{margin:0}
html body.site51 .hg-rank-list .rank-poster-number{font-size:26px;line-height:1;-webkit-text-stroke-width:1px}
html body.site51 .hg-rank-list .rank-poster-card>h3{font-size:14px;line-height:22px;min-height:44px;font-weight:500}
html body.site51 .hg-rank-list>.empty-state{grid-column:1/-1}
@media(min-width:761px) and (max-width:1180px){html body.site51 .hg-home-ranking{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1000px){html body.site51 .hg-rank-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){
 html body.site51 .hg-home-ranking{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 10px}
 /* The demo retains half a numeral line below mobile home captions. */
 html body.site51 .hg-home-ranking .rank-poster-card{grid-template-columns:25px minmax(0,1fr);gap:0 5px;padding-bottom:calc(19px * .55)}
 html body.site51 .hg-home-ranking .rank-poster-number{font-size:19px}
 html body.site51 .hg-home-ranking .rank-poster-card>h3{font-size:10px;min-height:32px}
}
@media(max-width:600px){
 html body.site51 #channel-page[data-channel="rank"]{padding-top:22px!important}
 html body.site51 #channel-page[data-channel="rank"]>.info-heading{padding:24px 0}
 html body.site51 #channel-page[data-channel="rank"] #channel-title{font-size:26px}
 html body.site51 #channel-page[data-channel="rank"] .channel-tabs{gap:10px}
 html body.site51 #channel-page[data-channel="rank"] .channel-tabs a{flex:1 1 0;min-width:0!important;box-sizing:border-box;padding:11px 12px!important;font-size:14px!important}
 html body.site51 .hg-rank-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 12px}
 html body.site51 .hg-rank-list>.rank-poster-card{grid-template-columns:27px minmax(0,1fr);gap:10px 6px}
 html body.site51 .hg-rank-list .rank-poster-number{font-size:23px}
 html body.site51 .hg-rank-list .rank-poster-card>h3{font-size:12px;line-height:19px;min-height:38px}
}