body {
    background-color: black;
}

.gallery {
    display: grid;
    width: 100%;
}

.grid-item {
    padding: 7px; /* Vytvoří malé mezery kolem obrázku uvnitř položky */
    width: calc(33.333% - 14px); /* Tři položky na řádek s mezerou */
}

.grid-item img {
    display: block;
    width: 100%; /* Obrázek vyplní celý kontejner */
    height: auto; /* Zachová poměr stran obrázku */
}

/* Media query pro tablety */
@media (max-width: 1024px) {
    .grid-item {
    padding: 7px; /* Vytvoří malé mezery kolem obrázku uvnitř položky */
    width: calc(50% - 14px); /* Dvě položky na řádek s mezerou */
}
}

/* Media query pro mobily */
@media (max-width: 600px) {
.grid-item {
    padding: 7px; /* Vytvoří malé mezery kolem obrázku uvnitř položky */
    width: calc(100% - 14px); /* Jedna položka na řádek s mezerou */
}
}