.public-shell {
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--color-primary) 6%, transparent) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, color-mix(in srgb, var(--color-primary) 4%, transparent) 0%, transparent 50%),
    var(--theme-surface);
}

.public-main {
  flex: 1;
  max-inline-size: 72rem;
  inline-size: 100%;
  min-inline-size: 0;
  margin-inline: auto;
  padding: var(--space-xl) var(--space-lg) calc(var(--space-xl) * 2);
  display: grid;
  gap: var(--space-xl);

  @media (max-inline-size: 48rem) {
    padding-inline: var(--space-md);
  }
}