/*
 * WebP usa <picture>; display:contents faz o wrapper sumir do layout
 * para o <img> se comportar como no PRD (flex, absolute, etc.).
 * Timelines mantêm <picture> como bloco scrollável.
 */

picture {
  display: contents;
}

#menu-cm .navbar-brand picture {
  display: inline-block;
}

#exposicao-genoma .row-timeline .timeline {
  max-width: 100%;
  min-width: 0;
}

#exposicao-genoma .topo .content > .row-timeline {
  max-width: 100%;
  overflow: hidden;
}

#exposicao-genoma .row-timeline .timeline .container-timeline {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

#exposicao-genoma .row-timeline .timeline .container-timeline .contentBlock picture {
  display: block;
  width: auto;
  max-width: none;
}

#exposicao-genoma .row-timeline .timeline .container-timeline .contentBlock picture img,
#exposicao-genoma .row-timeline .timeline .container-timeline .contentBlock > img.timeline-scroll-img {
  max-width: max-content;
  width: auto;
}

@media (max-width: 767.98px) {
  #exposicao-genoma .row-timeline .timeline .container-timeline .contentBlock picture img,
  #exposicao-genoma .row-timeline .timeline .container-timeline .contentBlock > img.timeline-scroll-img {
    height: 280px;
    width: auto;
    max-width: none;
    max-height: 280px;
  }
}