/* A foto agora e um PNG recortado: as bordas ja sao transparentes, entao
   os degrades de integracao saem de cena. Fica so um desvanecimento na
   base, para a imagem nao terminar em corte reto. */

.dt-hero__foto::before { display: none; }

.dt-hero__foto::after {
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16%;
  background: linear-gradient(to top, var(--dt-bg) 6%, rgba(247, 244, 237, 0) 100%);
}

.dt-hero__foto {
  width: 100%;
  max-width: 560px;
  margin-right: 0;
  justify-self: end;
}

.dt-hero__foto img {
  width: 100%;
  height: auto;
  max-height: min(74vh, 660px);
  object-fit: contain;
  object-position: bottom center;
}

/* O titulo da secao acompanha verticalmente a lista ao lado. */
@media (min-width: 901px) {
  .dt-section .dt-split { align-items: center; }
}

@media (max-width: 900px) {
  .dt-hero__foto { max-width: 380px; margin-inline: auto; }
  .dt-hero__foto img { max-height: 50vh; }
  .dt-hero__foto::after { height: 12%; }
}

/* A foto sobe: a cabeca passa a acompanhar a primeira linha do titulo. */
@media (min-width: 901px) {
  .dt-hero--editorial .dt-hero__grid { align-items: start; }
  .dt-hero--editorial .dt-hero__text { padding-block: clamp(12px, 2vw, 28px) clamp(28px, 4.5vw, 72px); }
  .dt-hero__foto { align-self: start; margin-top: -8px; }
  .dt-hero__foto img { max-height: min(78vh, 700px); object-position: top center; }
}