.contentGalleryCounter {
    --bg-color: #a0a0a0;
    --bg-color-text: #ffffff;
    --font-color: var(--font-color-dark, #ffffff);     /* Schriftfarbe im Menü*/
    --hover-color: var(--logo-color-1, #ffffff);    /* Hover Linkfarbe im Menü*/
    --h3-color: var(--font-color-dark, #ffffff);
    --num-cols: 4;
    --gap-width: 20px;
    --top-margin: 10px;
    --element-radius: var(--border-radius, 10px);
    --button-radius: var(--border-radius-small, 5px);
}


.contentGalleryCounter {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: var(--top-margin);
    column-gap: var(--gap-width);
}

.contentGalleryCounter .item {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    flex-basis: calc( (100% / var(--num-cols)) - ( var(--gap-width) * (var(--num-cols) - 1) / var(--num-cols)));
    margin-bottom: var(--gap-width);
    justify-content: center;
    transition: 0.2s;
}

.contentGalleryCounter .item img {
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    background-color: var(--bg-color);
    transform-origin: bottom center;
    border-radius: var(--element-radius);
}

.contentGalleryCounter .item .text {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: var(--bg-color-text);
    color: var(--font-color);
    padding: 1rem;
    box-sizing: border-box;
}

.contentGalleryCounter .item .text .h3s { color: var(--h3-color); }

.contentGalleryCounter .item .text div.counter { text-align: center; font-size: 48pt; line-height: 100%; }


.contentGalleryCounter .item .icon { pointer-events: none; }

@media all and (max-width: 1000px) { .contentGalleryCounter { --num-cols: 2 !important; } }
@media all and (max-width: 500px) { .contentGalleryCounter { --num-cols: 1 !important; } }