/* One homepage-carousel treatment for all three languages and both layouts. */
.banner.hero-readable {
  --hero-copy-shade-rgb: 20, 12, 24;
  --hero-copy-shade-start: .76;
  --hero-copy-shade-end: .64;
  --hero-copy-halo: .28;
}
.banner.hero-readable .text > h1,
.banner.hero-readable .text > h2 {
  position: relative;
  isolation: isolate;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  color: #fff;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 3px 10px rgba(0, 0, 0, .55);
}
.banner.hero-readable .text > h1::before,
.banner.hero-readable .text > h2::before {
  content: "";
  position: absolute;
  inset: -.14em -.34em;
  z-index: -1;
  border-radius: .14em;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(var(--hero-copy-shade-rgb), var(--hero-copy-shade-start)),
    rgba(var(--hero-copy-shade-rgb), var(--hero-copy-shade-end)));
  box-shadow: 0 0 .24em .14em rgba(var(--hero-copy-shade-rgb), var(--hero-copy-halo));
}
.banner.hero-readable .text > h1:empty::before,
.banner.hero-readable .text > h2:empty::before {
  content: none;
}