image-widget.css in Open Social 8.8

.form-type-managed-file .image-widget {
  margin-bottom: 1rem;
}

.form-type-managed-file .image-widget .preview img {
  width: 100%;
}

.form-type-managed-file .image-widget .image-widget-data {
  padding: 0.5rem 1rem;
  background-color: #f3f3f3;
}

.form-type-managed-file .image-widget + .help-block {
  margin-top: -0.875rem;
}

.btn--post-remove-image {
  position: absolute;
  top: -1px;
  right: -1px;
  background: rgba(0, 0, 0, 0.2);
  border: 0;
  padding: 0;
  transition: 0.3s background-color;
}

.btn--post-remove-image:hover {
  background: rgba(0, 0, 0, 0.8);
}

.btn--post-remove-image:hover .btn-icon {
  transform: rotate(90deg);
}

.btn--post-remove-image:focus {
  outline: none;
}

.btn--post-remove-image .btn-icon {
  fill: white;
  height: 32px;
  width: 32px;
  transition: 0.3s transform;
}

@media (min-width: 600px) {
  .form-type-managed-file .image-widget {
    display: flex;
  }
  .form-type-managed-file .image-widget .preview {
    flex: 0 0 auto;
  }
  .form-type-managed-file .image-widget .file--image {
    margin-bottom: 0.5rem;
  }
}