/* One source of truth for all seven primary navigation banners. */
:root {
  --site-primary-banner-height: 480px;
}

body .page > .primary-banner {
  position: relative !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: var(--site-primary-banner-height) !important;
  min-height: var(--site-primary-banner-height) !important;
  max-height: var(--site-primary-banner-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  flex: 0 0 var(--site-primary-banner-height) !important;
}

/* Keep the two frequently compared product banners locked to the same box. */
body #page-app > .primary-banner,
body #page-maker > .primary-banner {
  height: 480px !important;
  min-height: 480px !important;
  max-height: 480px !important;
  flex-basis: 480px !important;
}

body .page > .primary-banner > .primary-banner__image {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
}

body .page > .primary-banner > .primary-banner__inner {
  box-sizing: border-box !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
}