.sm-bgwrap {
  position: relative;
  isolation: isolate;          
  
  --sbg-op: .35;
  --sbg-blur: 0px;
  --sbg-pos: center;
  --sbg-size: cover;
  --sbg-scrim: .35;
  --sbg-radius: 0px;
}


.sm-bgwrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background-image: var(--sbg-img);
  background-position: var(--sbg-pos);
  background-size: var(--sbg-size);
  background-repeat: var(--sbg-repeat, no-repeat);
  opacity: var(--sbg-op);
  filter: blur(var(--sbg-blur));
  transition: opacity .5s ease, transform .9s cubic-bezier(.22, 1, .36, 1);
}


.sm-bgwrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg,
              rgba(4, 6, 12, calc(var(--sbg-scrim) * 1.15)) 0%,
              rgba(4, 6, 12, calc(var(--sbg-scrim) * .70)) 45%,
              rgba(4, 6, 12, calc(var(--sbg-scrim) * 1.15)) 100%);
  transition: background .5s ease;
}
html[data-sm-theme="light"] .sm-bgwrap::after {
  background: linear-gradient(180deg,
              rgba(255, 255, 255, calc(var(--sbg-scrim) * 1.15)) 0%,
              rgba(255, 255, 255, calc(var(--sbg-scrim) * .70)) 45%,
              rgba(255, 255, 255, calc(var(--sbg-scrim) * 1.15)) 100%);
}


.sm-bgwrap--fade::before {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}



.sm-bgwrap--fx {
  --sbg-radius: 28px;
  border-radius: var(--sbg-radius);
  padding: 6px clamp(6px, 1.2vw, 18px);
  margin: 1.25rem 0;
  transition: transform .55s cubic-bezier(.22, 1, .36, 1),
              box-shadow .55s cubic-bezier(.22, 1, .36, 1);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .07) inset,
    0 18px 46px -22px rgba(0, 0, 0, .70),
    0 2px 10px -4px rgba(0, 0, 0, .40);
}

.sm-bgwrap--fx::after {
  border: 1px solid rgba(255, 255, 255, .10);
}
html[data-sm-theme="light"] .sm-bgwrap--fx {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .90) inset,
    0 18px 44px -24px rgba(28, 42, 88, .34),
    0 2px 10px -5px rgba(28, 42, 88, .20);
}
html[data-sm-theme="light"] .sm-bgwrap--fx::after {
  border-color: rgba(28, 42, 88, .12);
}


@media (hover: hover) and (pointer: fine) {
  .sm-bgwrap--fx:hover {
    transform: translateY(-3px);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .12) inset,
      0 34px 74px -26px rgba(0, 0, 0, .82),
      0 4px 16px -6px rgba(0, 0, 0, .50);
  }
  html[data-sm-theme="light"] .sm-bgwrap--fx:hover {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .95) inset,
      0 34px 70px -28px rgba(28, 42, 88, .40),
      0 4px 16px -7px rgba(28, 42, 88, .26);
  }
  
  .sm-bgwrap--fx:hover::before {
    opacity: calc(var(--sbg-op) + .12);
    transform: scale(1.03);
  }
}


@media (prefers-reduced-motion: reduce) {
  .sm-bgwrap::before,
  .sm-bgwrap::after,
  .sm-bgwrap--fx { transition: none !important; }
  .sm-bgwrap--fx:hover { transform: none; }
  .sm-bgwrap--fx:hover::before { transform: none; }
}



@media (max-width: 767.98px) {
  .sm-bgwrap--fx { --sbg-radius: 18px; margin: .85rem 0; padding: 4px 6px; }
  .sm-bgwrap::before { opacity: calc(var(--sbg-op) * .82); }
}



.sm-bgwrap--fixed::before {
  background-attachment: fixed;
}