/* color */

.story-wrap {
  font-family: var(--fontStack-system);
  color: var(--fgColor-default);
}

#storybook-preview-wrapper {
  background-color: var(--bgColor-default) !important;
  width: 100% !important;
  height: 100% !important;
}

.theme-wrap-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(var(--breakpoint-xsmall, 20rem), auto));
  grid-gap: 1px;
  height: 100vh;
}

.story-wrap-grid {
  outline: 1px solid #d4d4d8;
  padding-bottom: 40px;
  position: relative;
}

@media (max-width: calc(20rem * 4)) {
  .theme-wrap-grid {
    grid-template-columns: repeat(3, minmax(var(--breakpoint-xsmall, 20rem), auto));
  }
}

@media (max-width: calc(20rem * 3)) {
  .theme-wrap-grid {
    grid-template-columns: repeat(2, minmax(var(--breakpoint-xsmall, 20rem), auto));
  }
}

@media (max-width: calc(20rem * 2)) {
  .theme-wrap-grid {
    display: block;
  }
}

.theme-name {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: var(--bgColor-muted);
  padding: var(--base-size-4) var(--base-size-8);
  font: var(--text-caption-shorthand);
  margin: 0;
}

code {
  padding: 0.2em 0.4em;
  font-family: var(--fontStack-monospace);
  font-size: var(--text-codeInline-size);
  background-color: var(--bgColor-muted);
  border-radius: var(--borderRadius-small);
  font-weight: var(--base-text-weight-normal);
}


/*# sourceMappingURL=main.24b65544.iframe.bundle.css.map*/