@charset "UTF-8";

ul#album-fotos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1200px; /* Aumentar a largura máxima para mais flexibilidade */
    margin: 0 auto;
    padding: 20px; /* Reduzir o padding para melhor aproveitamento do espaço */
    list-style: none;
    gap: 20px; /* Espaçamento entre os itens */
}

ul#album-fotos li {
    position: relative; /* Para posicionar o span */
    width: 280px; /* Aumentar o tamanho dos cards */
    height: 280px;
    border: 5px solid white;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra mais suave */
    transition: all 0.3s ease; /* Transição mais rápida */
    overflow: hidden; /* Para garantir que a imagem de fundo não vaze */
    display: flex; /* Para centralizar o conteúdo do span */
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 8px; /* Bordas arredondadas */
}

ul#album-fotos li span {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Sombra de texto mais forte */
    background-color: rgba(0, 0, 0, 0.6); /* Fundo mais escuro para o texto */
    font-size: 1.1em; /* Aumentar o tamanho da fonte */
    padding: 10px;
    transition: opacity 0.3s ease;
    line-height: 1.4; /* Ajustar line-height para texto normal */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%; /* Ocupar toda a altura para centralização */
    box-sizing: border-box; /* Incluir padding na altura */
}

ul#album-fotos li:hover {
    transform: translateY(-5px); /* Efeito de levantar */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Sombra mais pronunciada no hover */
}

ul#album-fotos li:hover span {
    opacity: 1;
}


ul#album-fotos li#foto01 {
    background: url('../_image/bricarnochao.jpg') no-repeat center center;
    background-size: cover;
    background-color: #ffffff;
}

ul#album-fotos li#foto02 {
    background: url('../_image/cuidarbrinquedos.jpg') no-repeat center center;
    background-size: cover;
    background-color: #ffffff;
}

ul#album-fotos li#foto03 {
    background: url('../_image/exerciciosdealimentação.jpg') no-repeat center center;
    background-size: cover;
    background-color: #ffffff;
}

ul#album-fotos li#foto04 {
    background: url('../_image/tempoeacao.jpg') no-repeat center center;
    background-size: cover;
    background-color: #ffffff;
}

ul#album-fotos li#foto05 {
    background: url('../_image/tepoparabrincadeira.jpg') no-repeat center center;
    background-size: cover;
    background-color: #ffffff;
}

ul#album-fotos li#foto06 {
    background: url('../_image/seletividadealimentar.jpg') no-repeat center center;
    background-size: cover;
    background-color: #ffffff;
}