/* ======================================================
   HERO BG — Picture element (responsive images)
   ====================================================== */
.hero-bg-picture {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
}

.hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.hero-bg-picture::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(0,0,0,0.18),
    rgba(0,0,0,0.55)
  );
}

@media (max-width: 768px) {
  .hero-bg-img {
    object-position: center center;
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}