Starting point for Drag & Drop – example styling for drop-zone and file list

#drop-zone {
    width: 100%;
    min-height: 200px;
    border: 5px dashed #7e878d;
    text-align: center;
    background-color: #c2cfd730;
    border-radius: 0.5em;
    padding: 1em;
    overflow-y: hidden;
  }
  
  #drop-zone.dragover {
    background: #c2cfd7;
    transition: background ease 0.3s;
  }
  
  .attachment-preview {
    width: 200px;
    height: 200px;
    float: left;
    border: 5px solid #adb6d2;
    margin: 0 1em 1em 0;
    border-radius: 0.5em;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    display: flex;
    justify-content: center;
    padding: 1em;
  }
  
  .inner {
      display: flex;
      align-items: center;
      overflow-wrap: anywhere;
      font-size: clamp(0.5em, 1em, 1em);
  }
  
  .attachment-preview .glyphicon {
      font-size: 3em;
      display: block;
      margin-bottom: 0.25em;
  }