body{
    height: 100vh;
}
.container {
    /* height: 100%; */
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: center;
}

.card {
    color: white;
    border: 1px solid white;
    /* border-radius: 6px; */
    height: 30vh;
    width: 50vh;
    overflow: hidden;
    cursor: pointer;
}

@media (max-width: 768px) {
    .card {
        height: 24vh;
        width: 40vh;
        margin: .25rem;
    } 
}

.photo {
    height: 100%;
    width: 100%;
}

.photo-1 {
    background-image: url("media/Pierp2.webp");
    background-size: cover;
    background-position: center;
}

.photo-2 {
    background-image: url("media/chiesa0_1_art.webp");
    background-size: cover;
    background-position: center;
}

.photo-3 {
    background-image: url("media/tcbu3.webp");
    background-size: cover;
    background-position: center;
}

.photo-4 {
    background-image: url("media/ibologna2.webp");
    background-size: cover;
    background-position: center;
}

.photo-5 {
    background-image: url("media/icona1.webp");
    background-size: cover;
    background-position: center;
}

.photo-6 {
    background-image: url("media/mappagiudeccaflip.webp");
    background-size: cover;
    background-position: center;
}

.photo-7 {
    background-image: url("media/golgolgol.webp");
    background-size: cover;
    background-position: center;
}

.photo-8 {
    background-image: url("media/icaro_4.webp");
    background-size: 110%;
    background-position: bottom;
}

.title {
    /* height: 30%;
    width: 100%; */
    bottom: 0px;
    border: 1px solid white;
    /* border-radius: 6px; */
    padding: 3px;
    background-color: #101010;
    /* display: none; */
}

#griglia {
    display: flex;
    flex-direction: row; /* for horizontal */
    justify-content: space-evenly;
    align-items: center;
    gap: 1em;
    /* align-content: center; */
    flex-wrap: wrap;
    margin-top: 8rem;
}