:is(#todayView,#plannerView,#roofView) .banner-weather-overlay {
  position: absolute;
  z-index: 10;
  inset: 0 auto auto 0;
  width: max(100%, 900px);
  height: auto;
  max-width: none;
  aspect-ratio: 2172 / 1064;
  object-fit: fill;
  image-rendering: pixelated;
  pointer-events: none;
  user-select: none;
}
:is(#todayView,#plannerView,#roofView) .banner-weather-overlay[hidden] { display: none; }
:is(#todayView,#plannerView,#roofView) .rooftop-banner[data-rooftop-weather="rain"] .banner-art { filter: saturate(.79) brightness(.84); }
:is(#todayView,#plannerView,#roofView) .rooftop-banner[data-rooftop-weather="snow"] .banner-art { filter: saturate(.88) brightness(.98); }
:is(#todayView,#plannerView,#roofView) .rooftop-banner[data-rooftop-weather="sunny"] .banner-art { filter: saturate(1.08) brightness(1.05); }
:is(#todayView,#plannerView,#roofView) .rooftop-banner[data-rooftop-weather="rain"] .banner-weather-overlay { opacity: .84; }
:is(#todayView,#plannerView,#roofView) .rooftop-banner[data-rooftop-weather="snow"] .banner-weather-overlay { opacity: .42; }
:is(#todayView,#plannerView,#roofView) .rooftop-banner[data-rooftop-weather="sunny"] .banner-weather-overlay { opacity: .24; }