.container {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 20px;

}



.image-box {

    position: relative;

    text-align: center;

    max-width: 300px; /* Uprav podle potřeby */

}



.image-box img {

    width: 100%;

    height: auto;

    display: block;

}



.image-box .label {

    position: absolute;

    top: 10px;

    left: 10px;

    background: rgba(0, 0, 0, 0.7);

    color: white;

    padding: 5px 10px;

    font-size: 18px;

    font-weight: bold;

    border-radius: 5px;

}



.joomgallery-item img {

    width: 100%;

    height: auto;

    object-fit: cover; /* Ensures the images fill the square without distortion */

}



.joomgallery-item {

    width: 200px; /* Set a fixed width for the square */

    height: 200px; /* Set a fixed height to make the square */

    margin: 5px; /* Adjust the margin as needed */

    overflow: hidden; /* Hide any part of the image that overflows */

    display: inline-block; /* To make sure the items stay inline */

}



.logo-image {

    max-width: none;

}