@media (min-width: 1200px) {
  .hero-banner {
    width: 900px !important;
    height: 900px !important;
  }
}

@media (min-width: 992px) and (max-width: 1200px) {
  .hero-banner {
    width: 900px !important;
    height: 900px !important;
  }
}

@media (min-width: 768px) and (max-width: 992px) {
  .hero-banner {
    width: 800px !important;
    height: 800px !important;
  }
}

@media (min-width: 576px) and (max-width: 768px) {
  .hero-banner {
    width: 700px !important;
    height: 700px !important;
  }
}

@media (max-width: 576px) {
  .hero-banner {
    width: 500px !important;
    height: 500px !important;
  }
}