/* /assets/css/hero-banner.css */

/* Generic reusable banner blocks (optional on any page) */
.heroBanner,
.sectionBanner{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* If you want a background-image banner (not used on this home page right now) */
.heroBanner{
  height: 260px;
  background-size: cover;
  background-position: center;
  margin: 0 0 14px;
  background-image:
    image-set(
      url("/assets/images/hero-webdev-dark-1920x900.webp") type("image/webp"),
      url("/assets/images/hero-webdev-dark-1920x900.jpg") type("image/jpeg")
    );
}
[data-theme="light"] .heroBanner{
  background-image:
    image-set(
      url("/assets/images/hero-webdev-light-1920x900.webp") type("image/webp"),
      url("/assets/images/hero-webdev-light-1920x900.jpg") type("image/jpeg")
    );
}
@media (max-width: 720px){
  .heroBanner{ height: 200px; }
}