/* ------ Galeria ------ */

.galeria-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: #F7F4FB;
    /* Cor de fundo da galeria */
    padding: 2rem 0;
    /* Espaçamento interno */
}

.galeria {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90%;
}

.galeria-imagens {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; 
  gap: 2rem;
  padding: 1rem;
}


.galeria-imagens > * { /* Cada item ocupa 1/4 do container (4 colunas) */
  flex: 0 0 calc((100% - (3 * 2rem)) / 4);   /* ajuste o cálculo se usar outro gap ou quiser padding interno */
  max-width: calc((100% - (3 * 2rem)) / 4);
  box-sizing: border-box;
  display: block; /* ou inline-block, dependendo do seu markup */
  place-self: center; /* centraliza conteúdo interno*/
}

.galeria-imagens img {
    width: 15rem;
    height: 15rem;
    object-fit: cover;
    /* preenche o box sem distorcer, corta o excesso */
    object-position: top;
    /* mostra a parte superior da imagem */
    display: block;
    /* evita espaço embaixo da img */
}

.galeria-imagem {
    width: 70%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    /* opcional: deixa as bordas arredondadas */
    box-shadow: 0 2px 6px rgba(0, 0.5, 0, 0.5);
    /* opcional: sombra leve */
}

/*RESPONSIVIDADE*/

/* Telas médias (tablets) */
@media (max-width: 992px) {
  .galeria-imagens > * {
    flex: 0 0 calc((100% - (1 * 2rem)) / 2);
    max-width: calc((100% - (1 * 2rem)) / 2);
  }
}

/* Telas médias (tablets) */

@media (max-width: 480px) {

    .galeria-imagens {
        display: grid;
        grid-template-columns:  repeat(2, 1fr);
    }
}


/* Telas médias (Celulares) */
@media (max-width: 490px) {

    .galeria-imagens {
        height: 45rem;
        width: 45rem;
        display: grid;
        grid-template-columns:  repeat(1, 1fr);
        overflow-y: auto;
        
    }
}