/**
 * Faixa de topo de uma página interna que não tem imagem ao lado: uma coluna só e mais baixa que a padrão.
 * O "!" vence o CSS sem camada de globals.css (.ds-section: 72 a 112 px de folga em cima e embaixo).
 * Em cima fica a altura do cabeçalho fixo mais um respiro, para a trilha não ficar por baixo dele; embaixo, 48 px.
 * No celular vale o padding de `pageTop` (button-styles.ts) e o padrão de baixo.
 */
export const compactHero =
  "md:!pt-[calc(var(--site-header-height)+var(--sp-10))] md:!pb-sp-12";

/**
 * Topo com imagem: texto à esquerda e a mídia à direita a partir de 1024 px (1,1 parte para 1), uma coluna abaixo disso.
 * Os `sizes` das imagens (CaseCover e PosterMosaic) seguem esta grade.
 */
export const heroWithMediaGrid =
  "grid items-center gap-y-sp-8 lg:grid-cols-[minmax(0,1.1fr)_minmax(0,1fr)] lg:gap-x-sp-16";