.banner {
  width: 100%;                  /* Fills the horizontal screen */
  height: 400px;                /* Set your preferred desktop height */
  background-position: center;  /* Keeps the center of the image focused */
  background-size: cover;       /* Scales the image without stretching */
  background-repeat: no-repeat;
}

/* Make the height smaller for mobile screens */
@media (max-width: 768px) {
  .banner {
    height: 250px;              /* Shorter height for mobile */
  }
}