/* Let the cinematic titles grow with a large screen, with room for longer lines. */
@media(min-width:1280px){
 :is(#triassic,#jurassic,#early-cretaceous,#cretaceous,#present) .jurassic-heading{width:46%;max-width:1000px}
 :is(#triassic,#jurassic,#early-cretaceous,#cretaceous,#present) .jurassic-heading :is(h1,h2){font-size:clamp(72px,5.4vw,116px);line-height:1.02;letter-spacing:-2.4px}
}
/* Shorter desktops need a little more space above the story card. */
@media(min-width:1280px) and (max-height:950px){
 :is(#triassic,#jurassic,#early-cretaceous,#cretaceous,#present) .jurassic-heading{top:12%}
 :is(#triassic,#jurassic,#early-cretaceous,#cretaceous,#present) .jurassic-heading :is(h1,h2){font-size:clamp(64px,4.6vw,84px)}
}
@media(min-width:1280px) and (max-height:850px){
 :is(#triassic,#jurassic,#early-cretaceous,#cretaceous,#present) .jurassic-heading{top:14%;width:65%}
 :is(#triassic,#jurassic,#early-cretaceous,#cretaceous,#present) .jurassic-heading :is(h1,h2){font-size:clamp(48px,3.5vw,64px);letter-spacing:-1.8px}
}