.upload-drop {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  padding: 18px;
  transition: border-color .22s ease, background .22s ease, min-height .22s ease;
}

.upload-drop.has-preview {
  min-height: 280px;
  place-content: center;
  padding: 0;
  border-style: solid;
  border-color: rgba(85, 194, 239, 0.72);
  background: rgba(1, 12, 22, 0.34);
}

.upload-drop.has-preview > span,
.upload-drop.has-preview > small {
  display: none;
}

.upload-preview {
  display: none;
}

.upload-preview.has-preview {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.upload-preview-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

.upload-drop.has-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 -80px 120px rgba(1,12,22,.10);
  pointer-events: none;
}

@media (max-width: 720px) {
  .upload-drop,
  .upload-drop.has-preview {
    min-height: 220px;
  }
}