.wrap {
  flex: 1;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
}

.card {
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: darken($content_bg, 4%);
  box-shadow: transparentize(black, 0.7) 0 10px 5px;
}

.editor {
  background: $content_bg;
  min-height: 200px;
  min-width: 50vw;

  border-radius: $radius;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  flex-direction: column;
  flex: 1;

  @include outer_shadow();
}

.panel {
}

.features {
  display: flex;
}

.feature_add_btn {
  width: 40px;
  height: 40px;
  border-radius: 24px;
  background: $red_gradient;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature {
  background: lighten($content_bg, 4%);
  padding: $gap $gap $gap 20px;
  border-radius: 24px;
  font: $font_14_semibold;
  height: 40px;
  box-sizing: border-box;
}

.feature_cell {
  background: lighten($content_bg, 4%);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  box-sizing: border-box;
  border-radius: $radius;
}

.uploads {
  flex: 1;
  padding: $gap;
  // padding-bottom: 0;
  display: grid;
  align-items: center;
  justify-content: center;
  grid-column-gap: $gap;
  grid-row-gap: $gap;

  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

  @media (max-width: 600px) {
    grid-template-columns: repeat(auto-fill, minmax(30vw, 1fr));
  }
}

.cell {
  background: lighten($content_bg, 6%);
  border-radius: $radius;
  padding-bottom: 100%;
}