/* Keep the heading and animal identity in flow together on small screens. */
.era-identity{display:contents}
@media(max-width:760px){
 .chapter[data-index] .chapter-continue{display:none!important}
 .chapter[data-index] .era-identity{display:flex;flex-direction:column;align-items:flex-start;gap:28px;position:absolute;top:90px;left:6%;right:6%;z-index:5}
 .chapter[data-index] .era-identity>.jurassic-heading{position:static!important;inset:auto!important;width:100%!important}
 .chapter[data-index] .era-identity>.jurassic-species{position:static!important;inset:auto!important;align-self:flex-start;width:fit-content;max-width:100%;margin:0;padding:8px 12px;column-gap:9px;text-align:left}
 .chapter[data-index] .era-identity>.jurassic-species>div{min-width:0}
 .chapter[data-index] .era-identity>.jurassic-species i{font-size:16px}
 .chapter[data-index] .era-identity>.jurassic-species>button{width:44px;min-width:44px;min-height:44px;padding:0;margin:0}
 .chapter[data-index] .era-identity .animal-compare{display:none!important}
}
@media(max-width:760px) and (max-height:760px){
 .chapter[data-index] .era-identity{top:76px;gap:20px}
 .chapter[data-index] .era-identity>.jurassic-species{padding:5px 10px}
}