.kz-box {
  --color-box-text: var(--color-klezmer-earth--tint-50);
  --color-box-bg: var(--color-klezmer-earth--shade-10);
  --color-box-title: var(--color-light);

  --box-padding: var(--space-m);

  background-color: var(--color-box-bg);
  color: var(--color-box-text);
  padding: var(--box-padding);
}

.kz-box h1,
.kz-box h2,
.kz-box h3,
.kz-box h4 {
  color: var(--color-box-title);
}

.kz-box[data-box-theme='invert'] {
  --color-box-text: var(--color-klezmer-earth);
  --color-box-bg: var(--color-klezmer-earth--tint-50);
  --color-box-title: var(--color-klezmer-earth--shade-10);
}

.kz-box[data-box-theme='light'] {
  --color-box-text: var(--color-klezmer-earth);
  --color-box-bg: var(--color-light);
  --color-box-title: var(--color-klezmer-earth--shade-10);
}

.kz-box[data-padding='s'] {
  --box-padding: var(--space-s);
}

.kz-box:has(img) {
  @container (inline-size < 45rem) {
    padding: 0;
  }
}