:root {
  --qi-shadow-on-dark-image:
    0 1px 2px rgba(0, 0, 0, 0.92),
    0 4px 16px rgba(0, 0, 0, 0.58),
    0 12px 36px rgba(0, 0, 0, 0.28);
  --qi-shadow-on-light-image:
    0 1px 2px rgba(255, 255, 255, 0.94),
    0 4px 16px rgba(255, 255, 255, 0.68),
    0 12px 36px rgba(255, 255, 255, 0.34);
}

:is(
  .p1-slide-1,
  .p1-slide-5,
  .p1-slide-7,
  .p2-slide-2,
  .p2-slide-4,
  .p2-slide-7,
  .p2-slide-9,
  .p3-slide-3,
  .p3-slide-5,
  .p3-slide-6,
  .p4-slide-1,
  .p4-slide-2,
  .p4-slide-5,
  .p4-slide-7,
  .p5-slide-1,
  .p5-slide-2,
  .p5-slide-4,
  .p6-slide-1,
  .p6-slide-4,
  .p6-slide-5,
  .p7-slide-1,
  .p7-slide-2,
  .p8-slide-1,
  .p8-slide-2,
  .p8-slide-3,
  .p9-slide-1,
  .p9-slide-2,
  .p9-slide-3,
  .p9-slide-4,
  .p9-slide-5,
  .p9-slide-6,
  .p9-slide-7
) :is(
  .h1.light,
  .h1-quote.light,
  .h2.light,
  .h2-quote.light,
  .p-normal.light,
  .p-small.light,
  .caption-normal.light,
  .caption-small.light,
  .caption-xsmall.light,
  .green,
  .gold-light,
  .light-red
) {
  text-shadow: var(--qi-shadow-on-dark-image);
}

:is(
  .p2-slide-2,
  .p2-slide-4,
  .p3-slide-6,
  .p4-slide-1,
  .p5-slide-2,
  .p8-slide-1,
  .p8-slide-2,
  .p9-slide-2,
  .p9-slide-4
) :is(
  .h1,
  .h1-quote,
  .h2,
  .h2-quote,
  .p-normal,
  .p-small,
  .caption-normal,
  .caption-small,
  .caption-xsmall
):not(.light):not(.green):not(.gold-light):not(.light-red) {
  text-shadow: var(--qi-shadow-on-light-image);
}

.fix-elements :is(
  .h1.light,
  .h2.light,
  .caption-normal.light,
  .caption-small.light,
  .caption-xsmall.light
) {
  text-shadow: var(--qi-shadow-on-dark-image);
}

@media (max-width: 767px) {
  :root {
    --qi-shadow-on-dark-image:
      0 1px 2px rgba(0, 0, 0, 0.96),
      0 3px 12px rgba(0, 0, 0, 0.68),
      0 8px 26px rgba(0, 0, 0, 0.34);
    --qi-shadow-on-light-image:
      0 1px 2px rgba(255, 255, 255, 0.98),
      0 3px 12px rgba(255, 255, 255, 0.78),
      0 8px 26px rgba(255, 255, 255, 0.4);
  }
}