.apoiadores-container { /* Garante que o box-sizing funcione corretamente */ box-sizing: border-box; width: 100%; max-width: 1100px; /* Largura máxima do bloco de logos */ /* margin: 40px auto; Centraliza o bloco na página com margem vertical */ padding: 0 15px; font-family: inherit; } .apoiadores-title { color: #002b5c; text-align: center; margin-bottom: 30px; border-bottom: 2px solid #eeeeee; /* Linha divisória sutil */ padding-bottom: 10px; font-weight: 600; } /* Configuração da Galeria de Logos em Grid */ .apoiadores-grid { display: grid; grid-template-columns: repeat(2, 1fr); /* Padrão Mobile: 2 colunas */ gap: 30px; /* Espaçamento entre as logos */ list-style: none !important; padding: 0; margin: 0; align-items: center; /* Centraliza verticalmente na linha */ justify-items: center; /* Centraliza horizontalmente no item */ } /* Responsividade para Tablets */ @media (min-width: 600px) { .apoiadores-grid { grid-template-columns: repeat(3, 1fr); /* 3 colunas */ } } /* Responsividade para Desktops */ @media (min-width: 900px) { .apoiadores-grid { grid-template-columns: repeat(4, 1fr); /* 4 colunas */ } } /* Estilo do Item (Container da Logo) */ .apoiador-item { /* Garante que o item ocupe a largura máxima da coluna */ width: 100%; text-align: center; } /* Estilo para as Imagens REAIS (Quando você as inserir) */ .apoiador-logo { max-width: 100%; /* Garante que a imagem não ultrapasse a coluna */ height: auto; /* Estilo sutil que pode ser removido se as logos forem coloridas */ opacity: 0.85; transition: opacity 0.3s ease; vertical-align: middle; /* Remove espaçamentos indesejados */ filter: grayscale(10%); /* Sutilmente desaturado para uniformizar */ } .apoiador-logo:hover { opacity: 1; /* Fica mais opaco (vivo) no hover */ filter: none; /* Remove o filtro de cinza no hover */ } /* PLACEHOLDER TEMPORÁRIO (REMOVER DEPOIS) */ .apoiador-placeholder { background-color: #f0f0f0; border: 1px dashed #cccccc; color: #999; font-size: 0.9rem; padding: 20px 10px; height: 80px; /* Altura fixa para simular o espaço de uma logo */ display: flex; align-items: center; justify-content: center; text-transform: uppercase; font-weight: 600; border-radius: 4px; } Apoio Institucional
