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

.hero-bg {
  background-image: url('polycentric-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('polycentric-1024.webp');
  }
}

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

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

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