body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: auto;
    grid-auto-flow: dense;
    gap: 8px;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

img.four-grid-cells {
    grid-row: span 2 / auto;
    grid-column: span 2 / auto;
}

img.wide-image {
    grid-column: span 2 / auto;
}





#floating-block-container {
    position: fixed;
    left: 0;
    top: 33%;
    transition: all 0.5s ease;
}

#floating-block {
    display: flex;
    align-items: center;
    background-color: #a30000;
    min-width: 320px;
    max-width: 75%; /* Zvětšený stav */
    height: 100px;
    overflow: hidden; /* Zajistí, že přebytečný obsah bude oříznut */
    cursor: pointer;
    transition: all 0.5s ease;

}

#floating-image {
    height: auto;
    max-height: 80px;
    max-width: 80px;
    margin-right: 10px;
    margin-left: 0px;
}

#text-block {
    flex-grow: 1;
    color: white;
    font-size: 1rem;
    transition: opacity 0.5s ease;
}

#block-toggle:checked ~ #floating-block {
    max-width: 80px;
    min-width: 80px;
    width: 80px;
    height: 100px;
}

#text-block h1 {
    font-size: 1.5rem;
    margin: 0.5rem 0;
}







@media screen and (max-width: 768px) {
    .gallery {
         grid-template-columns: 1fr 1fr;
     }
 }

 
@media screen and (max-width: 480px) {

/* changes the grid layout to a single column */
    div.gallery {
        grid-template-columns: 1fr;
    }

/* resets the grid placement properties for 
the images spanning four grid cells */
    img.four-grid-cells {
        grid-row: auto;
        grid-column: auto;
    }

/* resets the grid placement properties for 
the images spanning two grid columns  */
    img.wide-image {
        grid-column: auto;
    }

}