@import "constants.css";

.image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, 500px); /* Define largura fixa de 500px para as colunas */
    gap: 15px; /* Espaçamento entre as imagens */
    justify-content: center; /* Centraliza as colunas */
    margin: 0 auto; /* Centraliza o container na página */
}

.image-gallery img {
    height: 500px; /* Define a altura das imagens */
    width: 100%; /* Faz com que a largura ocupe todo o espaço disponível */
    object-fit: cover; /* Mantém a proporção da imagem sem distorcer */
    border-radius: 8px; /* Adiciona bordas arredondadas, se desejado */
}

/* Responsividade */
@media (max-width: 1200px) {
    .image-gallery {
        grid-template-columns: repeat(auto-fill, 400px); /* Ajusta a largura para 400px */
    }
    
    .image-gallery img {
        height: 400px; /* Ajusta a altura das imagens */
    }
}

@media (max-width: 900px) {
    .image-gallery {
        grid-template-columns: repeat(auto-fill, 100%); /* Uma coluna de 100% */
    }
    
    .image-gallery img {
        height: auto; /* Ajusta a altura das imagens */
    }
}

@media (max-width: 600px) {
    .image-gallery {
        grid-template-columns: repeat(auto-fill, 100%); /* Uma coluna de 100% */
    }
    
    .image-gallery img {
        height: auto; /* Ajusta a altura para manter a proporção */
    }
}