/*
  Essência — mesma cor de fundo Neblina da seção acima. Composição de 2
  fotos alinhadas à esquerda e o corpo de texto à direita, alinhado à
  base das imagens.
*/
.essencia {
  width: 100%;
  /* Sem background-color própria — o fundo vem do body (ver bg-swap.js). */
  display: flex;
  align-items: flex-end;   /* texto alinhado à base das imagens */
  gap: var(--sp-12);
  /* topo curto (imagens perto do título da seção acima); rodapé grande (320px) antes da paisagem */
  padding: var(--sp-12) var(--grid-margin) calc(var(--sp-section) * 2 + var(--sp-20));
}

/* Duas fotos lado a lado, topos alinhados, gap de 8px. */
.essencia__media {
  flex: 1 1 80%;   /* duas imagens de ~40% cada */
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  align-items: start;
}

.essencia__img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  aspect-ratio: 3 / 4;
}

.essencia__text {
  flex: 1 1 20%;
  min-width: 0;
}

.essencia__paragraph {
  max-width: 46ch;
  color: var(--color-dark);
  margin: 0;
}

@media (max-width: 768px) {
  .essencia {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-8);
    padding: var(--sp-16) var(--grid-margin);
  }
  .essencia__media,
  .essencia__text {
    flex: 0 0 auto;
    width: 100%;
  }
}