@import url("../../../assets/media-workbench.css");

.filter-grid {
  grid-template-columns: minmax(0, 1.16fr) minmax(320px, 0.84fr);
}

.filter-dropzone {
  margin-bottom: 16px;
}

.filter-stage {
  min-height: 420px;
  padding: 16px;
}

.filter-stage img {
  display: block;
  max-width: 100%;
  max-height: 388px;
  margin: 0 auto;
  border-radius: 18px;
  box-shadow: 0 16px 30px rgba(18, 49, 92, 0.12);
}

.filter-slider-list {
  display: grid;
  gap: 12px;
}

.filter-slider-item {
  display: grid;
  gap: 6px;
}

.filter-slider-item span {
  font-size: 13px;
  color: var(--suite-text-muted);
}

.filter-slider-item strong {
  color: var(--suite-text);
}

.filter-preset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.filter-preset-grid .suite-btn {
  width: 100%;
}

@media (max-width: 760px) {
  .filter-preset-grid {
    grid-template-columns: 1fr;
  }

  .filter-stage {
    min-height: 300px;
  }
}