.banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.banner img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.3s ease;
}

/* Default to largest size */
.banner img {
  content: url("../images/banner-desktop.webp");
  opacity: 1;
}

/* Tablet transition starts slightly before the breakpoint */
@media (max-width: 1240px) {
  .banner img {
    opacity: 1.0;
  }
}
@media (max-width: 1199px) {
  .banner img {
    content: url("../images/banner-tablet.webp");
    opacity: 1;
  }
}

/* Mobile transition zone */
@media (max-width: 899px) {
  .banner img {
    opacity: 1.0;
  }
}
@media (max-width: 767px) {
  .banner img {
    content: url("../images/banner-mobile.webp");
    opacity: 1;
  }
}


/*
Why These Breakpoints Work Best:
Desktop (1200px+):

Covers most desktop monitors (1920px, 1440px, 1366px)

Matches Bootstrap's "xl" breakpoint

Tablet (768px-1199px):

768px is the portrait width of most tablets (iPad, etc.)

1199px creates a clean transition before desktop

Matches Bootstrap's "md"/"lg" ranges

Mobile (≤767px):

Covers all smartphones in portrait

Below iPad's portrait width

Matches Bootstrap's "sm" breakpoint

*/