/* Nossos parceiros: bancos parceiros, entre Nossos serviços e Nossa Equipe e Projetos.
   Texto à esquerda e logos à direita */
.partners {
  padding: 3.5rem 1rem;
  background: var(--color-neutral-40);
}

.partners__layout {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  column-gap: 3rem;
  align-items: center;
}

.partners h2,
.partners p {
  grid-column: 1;
  color: var(--color-neutral-10);
}

.partners p {
  max-width: 60ch;
  margin: 0;
}

.partners__logos {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* símbolo e nome do parceiro em cinza; ganham a cor original ao passar o mouse */
.partners__logos li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  filter: grayscale(1);
  opacity: 0.6;
  transition: all 0.3s ease;
}

.partners__logos li:hover {
  filter: none;
  opacity: 1;
}

.partners__logos img {
  display: block;
  width: auto;
  height: 56px;
}

/* logo com o nome embutido (INCRA): mais baixo, para ter a mesma presença dos símbolos com nome */
.partners__logos img.partners__wordmark {
  height: 40px;
}

.partners__logos span {
  font-family: var(--font-secondary);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-neutral-10);
}

/* sem o espaço branco entre esta seção e Nossa Equipe e Projetos */
.partners + .team-projects-section {
  margin-top: 0;
}

/* Abaixo de 1260px os três logos não cabem lado a lado na coluna da direita: texto em cima, logos embaixo */
@media (max-width: 1260px) {
  .partners__layout {
    grid-template-columns: 1fr;
  }

  .partners__logos {
    grid-column: 1;
    grid-row: auto;
    justify-content: center;
    margin-top: 2rem;
  }
}