:root {
  --bobo-sidebanner-title-size: 48px;
  --bobo-banner-ratio: 500 / 1920; 
}

.bobo-sidebanner {
  width: 100vw !important; 
  height: calc(100vw * var(--bobo-banner-ratio)) !important; 
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  aspect-ratio: 1920 / 500 !important; 
  min-height: 200px; 
  max-height: 500px !important; 
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important; 
  font-size: 0 !important; 
  overflow: hidden !important;
}

.bobo-sidebanner .container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  max-width: 1200px;
  margin: 0 auto;
  line-height: normal !important; 
  font-size: 16px !important; 
}

.bobo-sidebanner .container h1,
.bobo-sidebanner .container h2 {
  font-size: 48px !important;
  text-align: center !important;
  display: block !important; 
  height: auto !important;
  width: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: #fff;
}

.bobo-sidebanner .container .left {
  width: 100%;
  text-align: center !important;
}

.bobo-sidebanner .container p,
.bobo-sidebanner .container .breadcrumb,
.bobo-sidebanner .container .path,
.bobo-sidebanner .container [class*="crumb"],
.bobo-sidebanner .container [class*="bread"] {
  color: var(--text-color) !important;
  text-align: center !important;
  margin: 0 !important;
  display: block !important; 
  height: auto !important;
  width: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

@media screen and (max-width: 992px) {
  :root {
    --bobo-sidebanner-title-size: 32px;
  }
  .bobo-sidebanner {
    height: calc(100vw * var(--bobo-banner-ratio)) !important;
    max-height: 380px !important; 
  }

  .bobo-sidebanner .container h1,
  .bobo-sidebanner .container h2 {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
  }

  .bobo-sidebanner .container .breadcrumb,
  .bobo-sidebanner .container .path,
  .bobo-sidebanner .container [class*="crumb"],
  .bobo-sidebanner .container [class*="bread"],
  .bobo-sidebanner .container p { 
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
  }
}

@media screen and (max-width: 768px) {
  :root {
    --bobo-sidebanner-title-size: 28px;
  }
  .bobo-sidebanner {
    height: calc(100vw * var(--bobo-banner-ratio)) !important;
    max-height: 300px !important; 
    padding: 0 !important;
  }

  .bobo-sidebanner .container h1,
  .bobo-sidebanner .container h2,
  .bobo-sidebanner .container .breadcrumb,
  .bobo-sidebanner .container .path,
  .bobo-sidebanner .container [class*="crumb"],
  .bobo-sidebanner .container [class*="bread"],
  .bobo-sidebanner .container p {
    display: none !important;
  }
}

@media screen and (max-width: 576px) {
  :root {
    --bobo-sidebanner-title-size: 24px;
  }
  .bobo-sidebanner {
    height: calc(100vw * var(--bobo-banner-ratio)) !important;
    max-height: 220px !important; 
    min-height: 150px !important; 
  }
}

@media screen and (max-width: 1500px) {
  :root {
    --bobo-sidebanner-title-size: 32px;
  }
  .bobo-sidebanner {
    height: calc(100vw * var(--bobo-banner-ratio)) !important;
    max-height: 450px !important; 
  }
}

@media screen and (max-width: 1280px) {
  :root {
    --bobo-sidebanner-title-size: 28px;
  }
  .bobo-sidebanner {
    height: calc(100vw * var(--bobo-banner-ratio)) !important;
    max-height: 400px !important; 
  }
}

@media screen and (max-width: 1200px) {
  :root {
    --bobo-sidebanner-title-size: 26px;
  }
  .bobo-sidebanner {
    height: calc(100vw * var(--bobo-banner-ratio)) !important;
    max-height: 380px !important; 
  }
}