/* Keep the browse buttons immediately beside the name in Gallery and Trivia. */
.character-appearances.is-trivia{box-sizing:border-box;width:min(960px,calc(100vw - 24px));height:min(720px,calc(100dvh - 32px));max-height:calc(100dvh - 32px)}
.character-appearances:is(.is-gallery,.is-trivia) .character-info-header{display:grid;grid-template-columns:84px minmax(0,1fr) 60px minmax(0,max-content) 60px minmax(0,1fr) 152px;grid-template-rows:auto 1fr;gap:12px;padding:20px 22px 16px;align-items:start}
.character-appearances:is(.is-gallery,.is-trivia) .character-info-toolbar,
.character-appearances:is(.is-gallery,.is-trivia) .character-info-arrows{display:contents}
.character-appearances:is(.is-gallery,.is-trivia) .character-info-toolbar .character-info-back{grid-column:1;grid-row:1;min-height:48px;margin:0;font-size:1.3rem;padding:7px 10px;align-self:start}
.character-appearances:is(.is-gallery,.is-trivia) #character-info-previous{grid-column:3;grid-row:1;justify-self:stretch}
.character-appearances:is(.is-gallery,.is-trivia) #character-info-next{grid-column:5;grid-row:1;justify-self:stretch}
.character-appearances:is(.is-gallery,.is-trivia) .character-info-arrows button{width:60px;min-width:60px;height:60px;min-height:60px;font-size:2.7rem;align-self:center}
.character-appearances:is(.is-gallery,.is-trivia) .character-info-name{grid-column:4;grid-row:1;align-self:center;margin:0;font-size:2.4rem;text-align:center;max-width:24ch;line-height:1.1;overflow-wrap:anywhere}
.character-appearances:is(.is-gallery,.is-trivia) .character-info-icon{grid-column:7;grid-row:1 / span 2;width:152px;max-width:100%;height:auto;max-height:none;align-self:start}
.character-appearances:is(.is-gallery,.is-trivia) .character-info-header h2{grid-column:3 / span 3;grid-row:2;align-self:start;margin:0;padding:0;border:0;text-align:center;font:400 2.1rem/1.1 var(--pixel)}
.character-appearances.is-gallery .character-info-header{grid-template-columns:100px minmax(0,1fr) 64px minmax(0,max-content) 64px minmax(0,1fr) 160px}
.character-appearances.is-gallery .character-info-name{font-size:clamp(2.4rem,4.5vw,4.2rem)}
.character-appearances.is-gallery .character-info-arrows button{width:64px;min-width:64px;height:64px;min-height:64px;font-size:3rem}
.character-appearances.is-gallery .character-info-icon{width:160px}
.character-appearances.is-trivia .character-appearances-content{max-height:none;padding:12px 28px 24px}
.character-appearances.is-trivia .character-trivia-list li{font-size:1.0625rem;line-height:1.65;padding:18px 4px 18px 6px}
@media(max-width:700px){
 .character-appearances:is(.is-gallery,.is-trivia) .character-info-header{grid-template-columns:minmax(0,1fr) 52px minmax(0,max-content) 52px minmax(0,1fr);grid-template-rows:auto auto auto;gap:8px 10px;padding:12px 16px}
 .character-appearances:is(.is-gallery,.is-trivia) .character-info-toolbar .character-info-back{grid-column:1 / span 3;grid-row:1;font-size:1.2rem;min-height:44px;padding:6px 10px}
 .character-appearances:is(.is-gallery,.is-trivia) .character-info-icon{grid-column:4 / span 2;grid-row:1;width:72px;max-width:none;justify-self:end}
 .character-appearances:is(.is-gallery,.is-trivia) #character-info-previous{grid-column:2;grid-row:2}
 .character-appearances:is(.is-gallery,.is-trivia) #character-info-next{grid-column:4;grid-row:2}
 .character-appearances:is(.is-gallery,.is-trivia) .character-info-arrows button{width:52px;min-width:52px;height:52px;min-height:52px;font-size:2.6rem}
 .character-appearances:is(.is-gallery,.is-trivia) .character-info-name{grid-column:3;grid-row:2;font-size:clamp(1.8rem,6.5vw,2.8rem);max-width:none}
 .character-appearances:is(.is-gallery,.is-trivia) .character-info-header h2{grid-column:2 / span 3;grid-row:3;font-size:1.8rem}
 .character-appearances.is-trivia .character-appearances-content{padding:8px 18px 20px}
 .character-appearances.is-trivia .character-trivia-list li{font-size:1rem;padding:16px 2px 16px 4px}
}
@media(max-height:500px) and (min-width:701px){
 .character-appearances:is(.is-gallery,.is-trivia) .character-info-header{grid-template-columns:76px minmax(0,1fr) 48px minmax(0,max-content) 48px minmax(0,1fr) 80px;padding:8px 16px;gap:6px 10px}
 .character-appearances:is(.is-gallery,.is-trivia) .character-info-arrows button{width:48px;min-width:48px;height:48px;min-height:48px;font-size:2.4rem}
 .character-appearances:is(.is-gallery,.is-trivia) .character-info-name{font-size:2rem}
 .character-appearances:is(.is-gallery,.is-trivia) .character-info-icon{width:80px}
 .character-appearances:is(.is-gallery,.is-trivia) .character-info-header h2{font-size:1.6rem}
}

/* Appearances: name and arrows share a row, with facts directly beneath. */
@media(min-width:1001px){
 .character-appearances:not(.is-gallery):not(.is-trivia) .character-info-header{grid-template-columns:68px 44px minmax(0,1fr) 44px 128px;grid-template-rows:auto auto auto;gap:10px 12px;align-items:start}
 .character-appearances:not(.is-gallery):not(.is-trivia) .character-info-arrows{display:contents}
 .character-appearances:not(.is-gallery):not(.is-trivia) #character-info-previous{grid-column:2;grid-row:1}
 .character-appearances:not(.is-gallery):not(.is-trivia) #character-info-next{grid-column:4;grid-row:1}
 .character-appearances:not(.is-gallery):not(.is-trivia) .character-info-arrows button{width:44px;min-width:44px;height:44px;min-height:44px;align-self:center}
 .character-appearances:not(.is-gallery):not(.is-trivia) .character-info-name{grid-column:3;grid-row:1;align-self:center;margin:0;font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:1.15;overflow-wrap:anywhere}
 .character-appearances:not(.is-gallery):not(.is-trivia) .character-info-facts{grid-column:2 / span 3;grid-row:2;justify-content:center;text-align:center;margin:0;font-size:.875rem;gap:4px 12px}
 .character-appearances:not(.is-gallery):not(.is-trivia) .character-info-icon{grid-column:5;grid-row:1 / span 2;width:128px;height:auto}
 .character-appearances:not(.is-gallery):not(.is-trivia) .character-info-header h2{grid-row:3;grid-column:1 / -1;margin-top:8px}
}