.shot {
  position: relative;
  isolation: isolate;
  margin: 0;
}

.shot::before {
  content: "";
  position: absolute;
  inset: -10% -6%;
  z-index: -1;
  background: var(--gradient-glow);
  pointer-events: none;
}

.shot__image {
  width: 100%;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-surface-plane);
  box-shadow: var(--shadow-shot);
}

.shot--hero .shot__image {
  border-radius: var(--radius-xl);
}

.shot__zoom {
  position: relative;
}

.shot__image--light {
  display: none;
}

:root[data-theme="light"] .shot__image--light {
  display: block;
}

:root[data-theme="light"] .shot__image--dark {
  display: none;
}

@media (max-width: 767px) {
  .shot__image,
  .shot--hero .shot__image {
    border-radius: var(--radius);
  }
}