ul.grid * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

ul.grid {
    display: block;
    padding: 0;
    margin: 0 -4px;
    margin-top: 20px;
    list-style-type: none;
    width: calc(100% + 8px);
}

ul.grid li.grid-item {
    width: 33.33%; /* 3 columns */
    margin: 0;
    padding: 0;
}

ul.grid li.grid-item img {
    width: 100%;
    height: auto;
    display: block;
    border: solid 4px transparent;
    border-radius: 0;
    margin: 0;
    padding: 0;
}

ul.grid li.grid-item img:hover {
    -moz-filter: brightness(70%);
    -webkit-filter: brightness(70%);
    filter: brightness(70%);
    transition: ease-in-out 0.25s;
}

/* Responsive design for different screen sizes */
@media screen and (max-width: 800px) {
    ul.grid li.grid-item {
        width: 50%; /* 2 columns */
    }
}