body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}


.gallery {
    column-count: 3; /* Adjust to control the number of columns */
    column-gap: 10px;
    padding: 20px;
}

@media only screen and (max-width: 600px) {
.gallery {
    column-count: 1; /* Adjust to control the number of columns */
    }
}

.photo {
    break-inside: avoid;
    margin-bottom: 10px;
    overflow: hidden;
/*    border-radius: 5px;*/
}

.photo img {
    width: 100%;
    height: auto;
    display: block;
/*    border-radius: 5px;*/
/*    transition: transform 0.3s ease; /* Adds a smooth zoom effect on hover */*/
}

.photo a {
    text-decoration: none;
    color: inherit;
}

.photo img:hover {
/*    transform: scale(1.05); /* Slight zoom effect on hover */*/
}

.pagination {
    text-align: center;
    padding: 20px;
}

.pagination a {
    text-decoration: none;
    font-size: 20px;
    margin: 0 10px;
    color: #333;
}