/* Витрина UI-kit /dev/ui (только вне production): раскладка образцов.
 * Компоненты — в ui.css; здесь только то, что расставляет их на витрине. */

/* Область прокрутки витрины с полями страницы (раздел 9: 32 / 24 / 16) */
.ui-kit {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-6) var(--page-gutter) var(--space-12);
}

@media (max-width: 1179px) {
  .ui-kit {
    padding-left: var(--page-gutter-tablet);
    padding-right: var(--page-gutter-tablet);
  }
}

@media (max-width: 767px) {
  .ui-kit {
    padding: var(--space-4) var(--page-gutter-phone) var(--space-8);
  }
}

.ui-kit__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.panel__body.ui-kit__row + .panel__body.ui-kit__row {
  padding-top: 0;
}

.ui-kit__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ui-kit__heading {
  margin: 0;
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: 600;
}