.collection {
  @apply
    flex
    flex-wrap
    w-full
    relative;
}

.collection__header {
  @apply w-full;
}

.collection__item-container {
  @apply relative h-full;
  width: calc(100% / 3);
}

@screen sm {
  .collection__item-container {
    width: calc(100% / 4);
  }
}

@screen md {
  .collection__item-container {
    width: calc(100% / 5);
  }
}

@screen lg {
  .collection__item-container {
    width: calc(100% / 6);
  }
}

@screen xl {
  .collection__item-container {
    width: calc(100% / 7);
  }
}

.collection__item-container:before {
  content: "";
  display: block;
  padding-top: 100%;
}

/**
 * TODO: This should be in Aircam 
 */
.collection__item-container > * {
  position: absolute;
  overflow: hidden;
  right: 0;
  bottom: 0;
  top: 0;
  left: 0;
  object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
  background-color: #eff2f7;
}

.collection__bottom-scroll {
  @apply absolute w-full;
  bottom: 0;
  left: 0;
  right: 0;
}

.collection__uploader .file-pond,
.collection__uploader .filepond--wrapper,
.collection__uploader .filepond--root,
.collection__uploader .filepond--drop-label {
  @apply h-full
}

.collection__uploader .filepond--panel-root {
  background-color: inherit;
}

.collection__uploader .filepond--list-scroller {
  @apply hidden;
}