/* Keep the decorative L marks anchored to the hero frame. */
.hero {
  position: relative;
}

/* The hero's generic overlay rule makes direct children relative. Restore the
   four frame marks to their original corners after that rule is applied. */
.hero > .frame-mark {
  position: absolute !important;
  z-index: 5 !important;
  margin: 0 !important;
  pointer-events: none;
}

.hero > .frame-mark.tl {
  top: 84px !important;
  right: auto !important;
  bottom: auto !important;
  left: 17px !important;
  transform: none !important;
}

.hero > .frame-mark.tr {
  top: 84px !important;
  right: 17px !important;
  bottom: auto !important;
  left: auto !important;
  transform: rotate(90deg) !important;
}

.hero > .frame-mark.bl {
  top: auto !important;
  right: auto !important;
  bottom: 17px !important;
  left: 17px !important;
  transform: rotate(270deg) !important;
}

.hero > .frame-mark.br {
  top: auto !important;
  right: 17px !important;
  bottom: 17px !important;
  left: auto !important;
  transform: rotate(180deg) !important;
}

.hero :is(.corner--tl, .corner-tl, .hero__corner--tl, .hero-corner--tl, .frame-corner--tl, .top-left-corner, [data-corner="tl"], [data-corner="top-left"]) {
  position: absolute !important;
  top: 88px !important;
  right: auto !important;
  bottom: auto !important;
  left: 20px !important;
  transform: none !important;
}

.hero :is(.corner--tr, .corner-tr, .hero__corner--tr, .hero-corner--tr, .frame-corner--tr, .top-right-corner, [data-corner="tr"], [data-corner="top-right"]) {
  position: absolute !important;
  top: 88px !important;
  right: 20px !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
}

.hero :is(.corner--bl, .corner-bl, .hero__corner--bl, .hero-corner--bl, .frame-corner--bl, .bottom-left-corner, [data-corner="bl"], [data-corner="bottom-left"]) {
  position: absolute !important;
  top: auto !important;
  right: auto !important;
  bottom: 18px !important;
  left: 20px !important;
  transform: none !important;
}

.hero :is(.corner--br, .corner-br, .hero__corner--br, .hero-corner--br, .frame-corner--br, .bottom-right-corner, [data-corner="br"], [data-corner="bottom-right"]) {
  position: absolute !important;
  top: auto !important;
  right: 20px !important;
  bottom: 18px !important;
  left: auto !important;
  transform: none !important;
}

.hero :is([class*="corner"], [data-corner]) {
  z-index: 8;
  pointer-events: none;
}

@media (max-width: 767px) {
  .hero :is(.corner--tl, .corner-tl, .hero__corner--tl, .hero-corner--tl, .frame-corner--tl, .top-left-corner, [data-corner="tl"], [data-corner="top-left"]) {
    top: 82px !important;
    left: 14px !important;
  }

  .hero :is(.corner--tr, .corner-tr, .hero__corner--tr, .hero-corner--tr, .frame-corner--tr, .top-right-corner, [data-corner="tr"], [data-corner="top-right"]) {
    top: 82px !important;
    right: 14px !important;
  }

  .hero :is(.corner--bl, .corner-bl, .hero__corner--bl, .hero-corner--bl, .frame-corner--bl, .bottom-left-corner, [data-corner="bl"], [data-corner="bottom-left"]) {
    bottom: 14px !important;
    left: 14px !important;
  }

  .hero :is(.corner--br, .corner-br, .hero__corner--br, .hero-corner--br, .frame-corner--br, .bottom-right-corner, [data-corner="br"], [data-corner="bottom-right"]) {
    right: 14px !important;
    bottom: 14px !important;
  }
}