/* Estilos principais da galeria */
.gallery {
    width: 100%;
    display: flex; /* Usando flexbox ao invés de table */
    flex-wrap: wrap; /* Permite que os itens se quebrem para a linha seguinte */
    gap: 16px; /* Espaçamento entre os itens */
    justify-content: center; /* Centraliza os itens */
}

/* Estilos para o container UL */
.gallery > ul {
    width: 100%;
    display: flex; /* Flexbox também aqui */
    flex-wrap: wrap; /* Para permitir que os itens se quebrem */
    padding: 0; /* Remove o padding padrão */
    margin: 20px; /* Remove a margem padrão */
    justify-content: center; /* Centraliza os itens */
}

/* Estilos para cada item (LI) da galeria */
.gallery > ul > li {
    list-style: none;
    background-repeat: no-repeat !important;
    background-size: cover;
    background-position: center !important;
    width: calc(33.33% - 16px); /* Define 3 colunas em telas grandes */
    height: 300px; /* Exemplo de altura */
    position: relative;
    display: block; /* Garantir que o display seja "block" */
}

/* Quebra de linha customizada para itens específicos */
.gallery > ul > li[data-breakline="here"] {
    flex-basis: 100%; /* Faz com que o item ocupe toda a largura */
    clear: both;
}

/* Estilos do link dentro de cada item */
.gallery > ul > li > a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

/* Estilo do label dentro de cada link */
.gallery > ul > li > a > label {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    text-align: center;
    padding: 11px;
    z-index: 10;
    transition: 300ms;
}

/* Estilo do label quando o item é hover */
.gallery > ul > li:hover > a > label {
    background: rgba(0, 0, 0, 0.9);
}

/* Estilos do span dentro de cada link */
.gallery > ul > li > a > span {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    top: 90%;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 57, 123, 0.8);
    border-top: 0;
    color: #444;
    text-align: center;
    padding: 11px;
    z-index: 9;
    transition: 300ms;
}

/* Estilo do span quando o item é hover */
.gallery > ul > li:hover > a > span {
    opacity: 1;
    visibility: visible;
    top: 100%;
    z-index: 100;
}

/* Ajustes para telas pequenas (max-width: 900px) */
@media screen and (max-width: 900px) {
    .gallery > ul > li {
        width: calc(50% - 16px); /* Exibe 2 colunas em telas menores */
        margin-bottom: 51px; /* Ajusta a margem inferior */
    }
}

/* Ajustes para telas menores (max-width: 600px) */
@media screen and (max-width: 600px) {
    .gallery > ul > li {
        width: calc(100% - 16px); /* Exibe uma coluna em telas ainda menores */
    }
}