/* ==========================================================================
   Componente: Diretoria (grade de cards de liderança)
   ========================================================================== */

.diretoria-grid {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 700px) {
  .diretoria-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.diretoria-grid .card-lideranca--destaque {
  border-top-color: var(--color-gold-600);
  background: var(--color-tint-gold-50);
}

@media (min-width: 700px) {
  .diretoria-grid .card-lideranca--destaque {
    grid-column: 1 / -1;
  }

  .diretoria-grid .card-lideranca--destaque {
    grid-template-columns: 200px 1fr;
  }
}

.diretoria-grid .card-lideranca:not(.card-lideranca--destaque) {
  grid-template-columns: 1fr;
  text-align: center;
  justify-items: center;
}

@media (min-width: 480px) {
  .diretoria-grid .card-lideranca:not(.card-lideranca--destaque) {
    grid-template-columns: 96px 1fr;
    text-align: left;
    justify-items: stretch;
  }

  .diretoria-grid .card-lideranca:not(.card-lideranca--destaque) .card-lideranca__photo {
    max-width: 96px;
  }
}