.hero {
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  gap: 5px;
  overflow: auto;
}

.hero-main {
  flex: 1 1 50%;
  max-width: 50%;
  height: 100%;
  max-height: 100%;
}

.hero-shared {
  flex: 1 1 50%;
  max-width: 50%;
  height: 100%;
}

.hero :global(.theme-code-block) {
  height: 100%;
}
