.hero-detail[data-hero="gerald"] .ability-demo{width:min(100%,180px);margin:18px 0 0 auto;overflow:hidden;border:1px solid #35556a;border-radius:8px;background:#0b1c27}
.hero-detail[data-hero="gerald"] .ability-demo img{display:block;width:100%;height:auto}
.hero-detail[data-hero="gerald"] .ability-demo figcaption{display:none}
@media(min-width:901px){
 .hero-detail[data-hero="gerald"] #skills>.detail-heading{margin-bottom:18px}
 .hero-detail[data-hero="gerald"] .ability-panel:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) 180px;grid-template-areas:"head demo" "description demo" "ranks ranks" "note note";gap:14px 22px;min-height:0;padding:22px}
 .hero-detail[data-hero="gerald"] .ability-head{grid-area:head;align-self:start;gap:14px}
 .hero-detail[data-hero="gerald"] .ability-head img{width:56px;height:56px}
 .hero-detail[data-hero="gerald"] .ability-description{grid-area:description;margin:0;align-self:start;line-height:1.6}
 .hero-detail[data-hero="gerald"] .ability-demo{grid-area:demo;margin:0;align-self:start}
 .hero-detail[data-hero="gerald"] .rank-grid{grid-area:ranks;margin:0}
 .hero-detail[data-hero="gerald"] .rank-card{padding:12px}
 .hero-detail[data-hero="gerald"] .rank-heading{margin-bottom:10px}
 .hero-detail[data-hero="gerald"] .rank-card dl{gap:8px}
 .hero-detail[data-hero="gerald"] .rank-card dt{margin-bottom:2px}
 .hero-detail[data-hero="gerald"] .rank-card dd{font-size:15px}
 .hero-detail[data-hero="gerald"] .rank-requires{padding-top:8px;margin-top:10px}
 .hero-detail[data-hero="gerald"] .rank-requires span{display:inline;margin-right:5px}
 .hero-detail[data-hero="gerald"] .mechanic-note{grid-area:note;margin:0;padding-top:12px}
}
@media(min-width:901px) and (max-height:800px){
 .hero-detail[data-hero="gerald"] #skills>.detail-heading{margin-bottom:14px}
 .hero-detail[data-hero="gerald"] #skills>.detail-heading h2{font-size:30px}
 .hero-detail[data-hero="gerald"] .ability-panel:not([hidden]){padding:20px;row-gap:10px}
 .hero-detail[data-hero="gerald"] .rank-card{padding:10px}
 .hero-detail[data-hero="gerald"] .rank-heading{margin-bottom:8px}
 .hero-detail[data-hero="gerald"] .rank-card dl{gap:6px}
 .hero-detail[data-hero="gerald"] .rank-requires{margin-top:8px;padding-top:6px}
}