/* Keep the four decorative hero brackets pinned to the hero frame. */
.hero [class*="corner"],
.hero [class*="bracket"] {
  position: absolute !important;
  margin: 0 !important;
  z-index: 8;
  pointer-events: none;
}

.hero .corner--tl,
.hero .corner-tl,
.hero .corner.tl,
.hero .hero__corner--tl,
.hero .hero__corner-tl,
.hero .frame-corner--tl,
.hero .frame-corner-tl,
.hero .bracket--tl,
.hero .bracket-tl,
.hero [class*="corner"][class*="top-left"],
.hero [class*="bracket"][class*="top-left"] {
  top: 88px !important;
  right: auto !important;
  bottom: auto !important;
  left: 20px !important;
  transform: none !important;
}

.hero .corner--tr,
.hero .corner-tr,
.hero .corner.tr,
.hero .hero__corner--tr,
.hero .hero__corner-tr,
.hero .frame-corner--tr,
.hero .frame-corner-tr,
.hero .bracket--tr,
.hero .bracket-tr,
.hero [class*="corner"][class*="top-right"],
.hero [class*="bracket"][class*="top-right"] {
  top: 88px !important;
  right: 20px !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
}

.hero .corner--bl,
.hero .corner-bl,
.hero .corner.bl,
.hero .hero__corner--bl,
.hero .hero__corner-bl,
.hero .frame-corner--bl,
.hero .frame-corner-bl,
.hero .bracket--bl,
.hero .bracket-bl,
.hero [class*="corner"][class*="bottom-left"],
.hero [class*="bracket"][class*="bottom-left"] {
  top: auto !important;
  right: auto !important;
  bottom: 18px !important;
  left: 20px !important;
  transform: none !important;
}

.hero .corner--br,
.hero .corner-br,
.hero .corner.br,
.hero .hero__corner--br,
.hero .hero__corner-br,
.hero .frame-corner--br,
.hero .frame-corner-br,
.hero .bracket--br,
.hero .bracket-br,
.hero [class*="corner"][class*="bottom-right"],
.hero [class*="bracket"][class*="bottom-right"] {
  top: auto !important;
  right: 20px !important;
  bottom: 18px !important;
  left: auto !important;
  transform: none !important;
}

@media (max-width: 760px) {
  .hero .corner--tl,
  .hero .corner-tl,
  .hero .corner.tl,
  .hero .hero__corner--tl,
  .hero .hero__corner-tl,
  .hero .frame-corner--tl,
  .hero .frame-corner-tl,
  .hero .bracket--tl,
  .hero .bracket-tl,
  .hero [class*="corner"][class*="top-left"],
  .hero [class*="bracket"][class*="top-left"],
  .hero .corner--tr,
  .hero .corner-tr,
  .hero .corner.tr,
  .hero .hero__corner--tr,
  .hero .hero__corner-tr,
  .hero .frame-corner--tr,
  .hero .frame-corner-tr,
  .hero .bracket--tr,
  .hero .bracket-tr,
  .hero [class*="corner"][class*="top-right"],
  .hero [class*="bracket"][class*="top-right"] {
    top: 82px !important;
  }

  .hero .corner--tl,
  .hero .corner-tl,
  .hero .corner.tl,
  .hero .hero__corner--tl,
  .hero .hero__corner-tl,
  .hero .frame-corner--tl,
  .hero .frame-corner-tl,
  .hero .bracket--tl,
  .hero .bracket-tl,
  .hero [class*="corner"][class*="top-left"],
  .hero [class*="bracket"][class*="top-left"],
  .hero .corner--bl,
  .hero .corner-bl,
  .hero .corner.bl,
  .hero .hero__corner--bl,
  .hero .hero__corner-bl,
  .hero .frame-corner--bl,
  .hero .frame-corner-bl,
  .hero .bracket--bl,
  .hero .bracket-bl,
  .hero [class*="corner"][class*="bottom-left"],
  .hero [class*="bracket"][class*="bottom-left"] {
    left: 14px !important;
  }

  .hero .corner--tr,
  .hero .corner-tr,
  .hero .corner.tr,
  .hero .hero__corner--tr,
  .hero .hero__corner-tr,
  .hero .frame-corner--tr,
  .hero .frame-corner-tr,
  .hero .bracket--tr,
  .hero .bracket-tr,
  .hero [class*="corner"][class*="top-right"],
  .hero [class*="bracket"][class*="top-right"],
  .hero .corner--br,
  .hero .corner-br,
  .hero .corner.br,
  .hero .hero__corner--br,
  .hero .hero__corner-br,
  .hero .frame-corner--br,
  .hero .frame-corner-br,
  .hero .bracket--br,
  .hero .bracket-br,
  .hero [class*="corner"][class*="bottom-right"],
  .hero [class*="bracket"][class*="bottom-right"] {
    right: 14px !important;
  }

  .hero .corner--bl,
  .hero .corner-bl,
  .hero .corner.bl,
  .hero .hero__corner--bl,
  .hero .hero__corner-bl,
  .hero .frame-corner--bl,
  .hero .frame-corner-bl,
  .hero .bracket--bl,
  .hero .bracket-bl,
  .hero [class*="corner"][class*="bottom-left"],
  .hero [class*="bracket"][class*="bottom-left"],
  .hero .corner--br,
  .hero .corner-br,
  .hero .corner.br,
  .hero .hero__corner--br,
  .hero .hero__corner-br,
  .hero .frame-corner--br,
  .hero .frame-corner-br,
  .hero .bracket--br,
  .hero .bracket-br,
  .hero [class*="corner"][class*="bottom-right"],
  .hero [class*="bracket"][class*="bottom-right"] {
    bottom: 14px !important;
  }
}