image-widget.css in Open Social 8.7

.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;
  -webkit-transition: 0.3s background-color;
  transition: 0.3s background-color;
}

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

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

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

@media (min-width: 600px) {
  .form-type-managed-file .image-widget {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .form-type-managed-file .image-widget .preview {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
  }
  .form-type-managed-file .image-widget .file--image {
    margin-bottom: 0.5rem;
  }
  .form--post-create .field--name-field-post-image.container-post-image {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
}