.home {
  max-width: 1040px;
  margin: var(--space-6) var(--space-4);
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  border: var(--border-w-bold) solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.content:has(> .home) {
  justify-content: center;
}

@media (min-width: 721px) {
  /* --bp-md (see tokens/breakpoints.css) */
  .home {
    display: grid;
    grid-template-columns: 47% 53%;
    align-items: stretch;
    margin: var(--space-6) auto;
  }

  .home .hero {
    justify-content: center;
    gap: var(--space-6);
    padding: var(--space-8) var(--space-7);
    border-bottom: none;
    border-right: var(--border-w-bold) solid var(--border);
  }
  .home .hero__sun {
    right: -70px;
    top: -70px;
    width: 200px;
    height: 200px;
  }
  .home .hero__moon {
    right: -10px;
    bottom: -50px;
    width: 120px;
    height: 120px;
  }
  .home .hero__title {
    font-size: var(--fs-display-xl);
    max-width: 11ch;
  }
  .home .hero__subtitle {
    font-size: var(--fs-body-l);
    max-width: 34ch;
  }
}