.img-holder {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid darkgray;
    overflow: hidden;
    cursor: pointer;
}
.img-holder .rem-img {
    position: absolute; top: 2px; right: 4px;
    color: red; font-size: 1rem; cursor: pointer;
    background: rgba(255,255,255,0.7); border-radius: 50%; padding: 3px; z-index: 10;
    display: none;
}
.img-holder:hover .rem-img { display: inline; }
.img-holder img[src=""], .img-holder img:not([src]) { display: none; }
.img-add-slot { border-style: dashed !important; background: #fafafa; color: #aaa; }
.img-add-slot .fa-plus { font-size: 1.5rem; }
.img-holder.drag-over { border: 2px dashed #007bff !important; background-color: #f8f9fa; }

.img-holders-featured { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 5px; }
.img-holders-featured .img-holder { width: 28%; aspect-ratio: 1; }
.img-holders-featured .img-main { width: 100%; aspect-ratio: 1; flex-basis: 100%; }
.img-holders-featured .img-holder img { width: 100%; height: 100%; object-fit: cover; }

.img-holder.col-holder { width: 100%; aspect-ratio: 1; align-self: flex-start; }
.img-holder.col-holder img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-holder.col-holder.no-image { border: 2px dashed #bbb !important; background: #fafafa; }