.gallery{ margin-top: 30px}
.gallery-inner{display: flex; flex-wrap: wrap}
.gallery-item{ flex: 1 1 auto; width: 20%}

.gallery-item a{ display: block; /*height: 0; padding-top: 133%; position: relative*/}

.gallery-item a:before{display: block; position: absolute; content: ""; top:0; left: 0; bottom: 0; right: 0; width: 26px; height: 26px; opacity: 0;  z-index:-1; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJyB2ZXJzaW9uPScxLjAnIHdpZHRoPSc2NHB4JyBoZWlnaHQ9JzY0cHgnIHZpZXdCb3g9JzAgMCAxMjggMTI4JyB4bWw6c3BhY2U9J3ByZXNlcnZlJz48ZyA+PHBhdGggZD0nTTc4Ljc1IDE2LjE4VjEuNTZhNjQuMSA2NC4xIDAgMCAxIDQ3LjcgNDcuN0gxMTEuOGE0OS45OCA0OS45OCAwIDAgMC0zMy4wNy0zMy4wOHpNMTYuNDMgNDkuMjVIMS44YTY0LjEgNjQuMSAwIDAgMSA0Ny43LTQ3LjdWMTYuMmE0OS45OCA0OS45OCAwIDAgMC0zMy4wNyAzMy4wN3ptMzMuMDcgNjIuMzJ2MTQuNjJBNjQuMSA2NC4xIDAgMCAxIDEuOCA3OC41aDE0LjYzYTQ5Ljk4IDQ5Ljk4IDAgMCAwIDMzLjA3IDMzLjA3em02Mi4zMi0zMy4wN2gxNC42MmE2NC4xIDY0LjEgMCAwIDEtNDcuNyA0Ny43di0xNC42M2E0OS45OCA0OS45OCAwIDAgMCAzMy4wOC0zMy4wN3onIGZpbGw9JyNlZWUnIGZpbGwtb3BhY2l0eT0nMScvPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9J3RyYW5zZm9ybScgdHlwZT0ncm90YXRlJyBmcm9tPScwIDY0IDY0JyB0bz0nLTkwIDY0IDY0JyBkdXI9JzEwMDBtcycgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnPjwvYW5pbWF0ZVRyYW5zZm9ybT48L2c+PC9zdmc+Cg=="); margin: auto; transition: opacity .3s; background-size: contain;}
.gallery-item.preload a:before{opacity: 1;   z-index: 10;}

.gallery-item a:after{display: block; position: absolute; content: ""; top:0; left: 0; width: 100%; height: 100%; background-color: rgb(0 0 0 / 16%); transition: .5s}
.gallery-item.preload a:after{background-color: rgb(220 220 220 / 100%);}

.gallery-item img{ display: block; /*position: absolute; top: 0; left: 0; width: 100%; height: 100%;*/ object-fit: cover; height:70px; width: 100%;  border: 1px solid #fff; box-sizing: border-box}

.gallery-item a:hover:after{ background-color: rgb(0 0 0 / 0%)}


@media only screen and (min-width: 600px) {
    .gallery-item img{ height:100px;}
}

@media only screen and (min-width: 768px) {
    .gallery-item img{ height:120px;}
}

@media only screen and (min-width: 1024px) {
    .gallery-item img{ height:120px;}
}

@media only screen and (min-width: 1280px) {
    .gallery-item img{ height:180px;}
}