.marketing-photo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.marketing-photo-frame {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.28);
}

.marketing-photo-frame--hero {
  max-width: 36rem;
  margin-inline: auto;
  background: #f1f0ec;
}

.marketing-photo-caption {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: rgb(17 26 32 / 0.9);
  color: #fff;
  text-align: left;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.18);
  backdrop-filter: blur(12px);
}

.marketing-photo--web {
  border: 1px solid #1f2937;
  border-radius: 1rem;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.32);
}

@media (min-width: 640px) {
  .marketing-photo-caption {
    right: auto;
    max-width: 24rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}