.layout-split .layout-main--split {
  width: 100%;
  max-width: none;
  padding: 0;
}

.layout-split .hero-block--split {
  min-height: 38vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 48px clamp(16px, 5vw, 80px);
  background: linear-gradient(135deg, var(--theme-primary), color-mix(in srgb, var(--theme-accent, var(--theme-primary)) 60%, black));
  color: var(--theme-on-primary);
}

.layout-split .hero-block--split p {
  color: color-mix(in srgb, var(--theme-on-primary) 85%, transparent);
}

.layout-split .split-body .layout-main,
.layout-split .split-content {
  width: min(var(--content-max-width), calc(100% - 32px));
  margin: 0 auto;
}

.layout-split .split-content {
  padding: 32px 0 48px;
}