/* Responsive background images for .hero-bg
   Generated from 23andme-hero.png
*/

.hero-bg {
  background-image: url('23andme-hero-640.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Larger tablets and small laptops */
@media (min-width: 768px) {
  .hero-bg {
    background-image: url('23andme-hero-1024.webp');
  }
}

/* Desktop */
@media (min-width: 1200px) {
  .hero-bg {
    background-image: url('23andme-hero-1440.webp');
  }
}

/* Large and hi-res displays */
@media (min-width: 1600px) {
  .hero-bg {
    background-image: url('23andme-hero-1920.webp');
  }
}

.hero__image {
  width: 100%;
  height: 100%;          /* or min-height, depending on your layout */
  object-fit: cover;     /* fills the container, may crop sides */
  object-position: top;  /* anchors the TOP of the image to the TOP of the frame */
  display: block;        /* removes inline gap below image */
}

/* Optional PNG fallback for very old browsers:
.hero-bg {
  background-image: url('23andme-hero-optim.png');
}
*/