.depoimentos {
  padding-block: var(--espaco-xl);
}

.depoimentos__grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaco-sm);
  margin-top: var(--espaco-lg);
}

.depoimento {
  display: grid;
  gap: var(--espaco-xs);
  margin: 0;
  padding: var(--espaco-md);
  background: linear-gradient(165deg, rgba(46, 33, 25, 0.76), rgba(18, 14, 11, 0.82));
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
}

.depoimento__estrelas {
  font-size: var(--texto-sm);
  letter-spacing: 0.2em;
  color: var(--cor-acento);
}

.depoimento__texto {
  margin: 0;
  font-size: var(--texto-base);
  line-height: 1.68;
  color: var(--cor-texto);
  quotes: '\201C' '\201D';
}

.depoimento__texto::before {
  content: open-quote;
}

.depoimento__texto::after {
  content: close-quote;
}

.depoimento__rodape {
  display: grid;
  gap: 0.15rem;
  margin-top: var(--espaco-xs);
}

/* Nome em destaque dourado, idade colada nele no mesmo peso visual do
   texto, para o nome liderar a linha sem a idade competir. */
.depoimento__pessoa {
  font-family: var(--fonte-titulo);
  font-size: var(--texto-base);
  line-height: 1.3;
}

.depoimento__nome {
  color: var(--cor-acento);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.depoimento__idade {
  color: var(--cor-texto-suave);
  font-weight: 400;
}

/* Cidade e recencia em versalete: maiuscula pequena com espacamento aberto,
   que e como um selo de origem se le sem competir com o nome. */
.depoimento__origem {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  font-size: var(--texto-xs);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--cor-texto-tenue);
}

.depoimento__ponto {
  opacity: 0.5;
}

@media (min-width: 600px) {
  .depoimentos__grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}