media_directories_ui.css in Media Directories 3.x

.media-listing {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.media-item {
  width: 20%;
}

#jstree-dnd .media-library-item {
  width: 200px;
}

@media screen and (min-width: 45em) {
  .media-item {
    width: 33.3%;
  }

  /* Change the width for the modal and widget since there is less space. */
  .media-library-widget-modal .media-item,
  .media-library-selection .media-item {
    width: 50%;
  }
}

@media screen and (min-width: 60em) {
  .media-item {
    width: 25%;
  }

  .media-library-widget-modal .media-item,
  .media-library-selection .media-item {
    width: 33.3%;
  }
}

@media screen and (min-width: 77em) {
  .media-item {
    width: 20%;
  }

  .media-library-widget-modal .media-item,
  .media-library-selection .media-item {
    width: 25%;
  }
}

.media-item .media-info {
  bottom: 0;
  font-size: 10px;
  padding: 5px 5px;
}

.media-item .media-info .media-info--Image {
  display: none;
}

.media-directories-library-wrapper {
  position: relative;
  min-height: calc(100% + 2em);
}

.media-directories-library-wrapper  .media-directories-library-content {
  height: 100%;
  width: 75%;
  min-height: 50vh;
  padding: 0;
  position: relative;
  left: 25%;
  border: 0;
}

.media-directories-library-wrapper .view-header {
  display: none;
}

.media-directories-library-page {
  position: relative;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  min-height: 50vh;
}

.media-directories-library-page .media-directories-library-tree {
  width: 20%;
}

.media-directories-library-browser {
  position: relative;
  width: 80%;
  left: 20%;
}