.uploader-wrapper {
    margin-bottom: 1rem;
    width: 100%;
}

.uploader {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 5px;
    width: 100%;
}

.uploader-thumbnail,
.uploader-thumbnail-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    border-radius: 1rem;
    width: 120px;
    height: 120px;
    background-color: #dee2e6;
    cursor: pointer;
}

.uploader-thumbnail-button {
    margin-bottom: 10px;
}

.uploader-thumbnail:hover .uploader-thumbnail-image--trash {
    opacity: 1;
}

.uploader-thumbnail-image {
    padding: 0;
    position: relative;
    width: 100%;
    height: auto;
}

.uploader-thumbnail-image--trash {
    opacity: 0;
    transition: opacity 0.4s ease;
    background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-trash' viewBox='0 0 16 16'><path d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z'/><path d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z'/></svg>");
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    right: 0;
    top: 0;
    margin: 8px;
    z-index: 1;
    background-color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50rem;
    cursor: pointer;
}

.uploader-thumbnail-image-footer {
    position: absolute;
    bottom: 0;
    z-index: 1;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    transition: .5s ease;
    opacity: 0;
    color: white;
    font-size: 16px;
    padding: 1px;
    text-align: center;
}

.uploader-thumbnail--add-button {
    background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-image' viewBox='0 0 16 16'><path d='M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0'/><path d='M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1z'/></svg>");
    background-size: 32px 32px;
    background-repeat: no-repeat;
    background-position: center;
    width: 36px;
    height: 36px;
}

.uploader input[type=file] {
    pointer-events: none;
    position: absolute;
    opacity: 0;
    width: 0 !important;
}

.uploader-thumbnail-button span {
    display: block;
    font-weight: 450;
    font-size: 16px;
}

.uploader-file-counter {
    margin: 35px 0 16px 0;
    font-size: 1.025rem;
}