.backd .bg-image {
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 30%, rgba(153, 101, 21, 0.32), transparent 34%),
    radial-gradient(circle at 38% 72%, rgba(254, 85, 44, 0.16), transparent 38%),
    linear-gradient(145deg, #070605 0%, #17100b 48%, #08090d 100%) !important;
}

.backd .bg-image > picture {
  display: none !important;
}

.backd .bg-image::before {
  position: absolute;
  z-index: 0;
  inset: 0 50% 0 0;
  content: "";
  pointer-events: none;
  background:
    url("/branding/ohmen-mark-square-v2.svg") center 48% / min(34rem, 46vw) no-repeat;
  opacity: 0.2;
  filter: drop-shadow(0 0 5rem rgba(246, 187, 97, 0.2));
}

.backd .bg-image > div[style*="position: fixed"] {
  z-index: 3;
}

.backd .bg-image > div[style*="position: fixed"] > svg,
.backd .bg-image > div[style*="position: fixed"] > span {
  display: none;
}

.backd .bg-image > div[style*="position: fixed"]::before {
  width: 10.5rem;
  height: 3.25rem;
  content: "";
  background: url("/branding/ohmen-wordmark-v2.svg") left center / contain no-repeat;
}

.backd .panel-base {
  z-index: 2;
}

.backd .panel {
  background: rgba(18, 13, 10, 0.82) !important;
  box-shadow: -2rem 0 8rem rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(2.5rem) !important;
}

.backd .panel::after {
  background:
    radial-gradient(circle at 12% 8%, rgba(153, 101, 21, 0.22), transparent 38%),
    linear-gradient(150deg, rgba(26, 19, 14, 0.97), rgba(8, 9, 13, 0.98)) !important;
}

.backd .panel::before {
  background: linear-gradient(145deg, rgba(246, 187, 97, 0.55), rgba(254, 85, 44, 0.22), transparent 70%) border-box !important;
}

@media (max-width: 768px) {
  .backd .bg-image::before {
    inset: 0;
    background-size: min(28rem, 80vw);
    opacity: 0.08;
  }

  .backd.paneld {
    background: #0b0907 !important;
  }
}