/* Linha: imagem (esq.) + texto (dir.) */ .container-imagem-texto{ display:flex; align-items:center; gap:12px; /* espaçamento entre img e texto */ flex-wrap:nowrap; } /* Variante: inverter (imagem à direita) */ .container-imagem-texto.invert{flex-direction:row-reverse} /* Bloco da imagem */ .img-quadrada{ flex:0 0 auto; overflow:hidden; border-radius:12px; } /* Imagem: tamanho fluido e quadrado */ .img-quadrada img{ display:block; width:clamp(120px,18vw,150px); aspect-ratio:1/1; height:auto; object-fit:cover; border-radius:12px; border:1px solid transparent; /* evita “pulo” no hover */ transition:transform var(--transition), box-shadow var(--transition); will-change:transform; } /* Hover sutil */ .img-quadrada img:hover{ transform:scale(1.05); box-shadow:0 6px 20px rgba(0,0,0,.18); } /* Texto ocupa o restante */ .texto{flex:1 1 auto;min-width:0} .texto p{ margin:0; text-align:justify; text-align-last:left; line-height:2.0; hyphens:auto; /* requer */ overflow-wrap:anywhere; text-indent:64px; } /* Responsivo */ @media (max-width:900px){ .container-imagem-texto{gap:8px} .texto p{text-indent:40px} } @media (max-width:720px){ .img-quadrada{display:none} .container-imagem-texto{gap:0} .texto p{text-indent:28px} } @media (max-width:600px){ .texto p{text-indent:20px} } /* Respeita redução de movimento */ @media (prefers-reduced-motion: reduce){ .img-quadrada img{transition:none} .img-quadrada img:hover{transform:none;box-shadow:none} }