/* Static, corner-cropped Rangoli decorations for the program video section only. */

/* The corner rangolis deliberately bleed 18px past each side so they read as
   cropped artwork, and .program-section is already position: relative, so
   contain that bleed inside the section instead of letting it widen the page
   and create a horizontal scrollbar. Nothing in the section overflows
   vertically, so this clips the bleed only and leaves the design untouched. */
.program-section {
  overflow: hidden;
}

.program-section > .program-rangoli {
  position: absolute;
  z-index: 0;
  top: 14%;
  height: clamp(420px, 56%, 480px);
  width: auto;
  aspect-ratio: 298 / 644;
  background-image: url("assets/rangoli.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.32;
  pointer-events: none;
}

.program-section > .program-rangoli--left {
  left: -18px;
  transform: scaleX(-1);
}

.program-section > .program-rangoli--right {
  right: -18px;
}

/* Keep the original intro, video and button above the background artwork. */
.program-section > .program-inner {
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .program-section > .program-rangoli {
    top: 16%;
    height: clamp(310px, 52%, 440px);
    opacity: 0.26;
  }
}

@media (max-width: 767px) {
  .program-section > .program-rangoli {
    top: 18%;
    height: clamp(210px, 54vw, 270px);
    opacity: 0.2;
  }

  .program-section > .program-rangoli--left {
    left: -18px;
  }

  .program-section > .program-rangoli--right {
    right: -18px;
  }
}