:root {
    --white: #ffffff;
    --gray: #666666;
    --black: #000000;
    --green-bg:#99cd85;
    --dark-blue:#172346;
    --golden-yellow:#c4a034;
}

/* === SEÇÃO DE PRODUTOS (GALERIA) === */
.products-section {
    display: grid;
    gap: 10px;
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 4em;
    /* Adiciona alinhamento de itens ao início, embora o flex/grid já faça isso */
    align-items: start; 
}

.item-imagem {
    /* Torna o item de imagem um container flex para controlar o conteúdo verticalmente */
    display: flex;
    flex-direction: column; /* Organiza conteúdo (imagem e texto) em coluna */
    height: 100%; /* Garante que o item ocupe todo o espaço da linha do grid */
    
    /* Centraliza o conteúdo (Imagem e Texto) */
    align-items: center; 
}

.item-imagem img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain; /* Usar 'contain' para garantir que a imagem inteira caiba sem cortar */
    
    /* Define uma altura máxima explícita para o espaço da imagem */
    max-height: 250px; /* Ajuste este valor (ex: 250px) para a altura máxima que a imagem deve ocupar */
    
    /* Ocupa o espaço máximo disponível antes do texto */
    flex-grow: 1; 
}

.product-name {
    font-weight: bold;
    color: var(--black);
    
    /* Garante que o texto fique sempre no final do contêiner flex */
    margin-top: auto; 
    
    font-size: 1em;
    text-align: center;
    
    /* Adiciona um pequeno padding para separação do rodapé, se necessário */
    padding-bottom: 5px; 
}

@media (max-width: 1200px) {
    .products-section {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 900px) {
    /* Ajusta a galeria para 2 colunas */
    .products-section {
        grid-template-columns: repeat(2, 1fr);
    }
    
}

/* Mobile (Máximo 600px) - 1 Coluna */
@media (max-width: 600px) {
    /* Ajusta a galeria para 1 coluna */
    .products-section {
        grid-template-columns: repeat(1, 1fr);
        padding: 10px; /* Reduz o padding nas laterais */
    }

}