Как разобраться с высотой экрана в адаптивной верстке?

Нужен совет по поводу адаптивной верстки при минимальной высоте экрана - как правильно выставлять правила и от чего чтобы в итоге сайт смотрелся хорошо, как на минимальном разрешении, так и на большом? Я сделал адаптивную верстку первой страницы сайта, но не уверен, что сделал это правильно. Нужно ставить max-height: 768px или mшт-height: 768px или же вообще делать отрезками от минимальной до максимальной высоты @media screen and (min-height: 768px) and (max-height: 850). Прошу прощения за нечетко сформулированный вопрос

Сам сайт http://ilyin1ib.beget.tech/ Весь код https://jsfiddle.net/6dp9cwvz/

Я написал так

@media screen and (max-height: 768px) {
  section {
    padding: 0 !important;
  }
  .hamburger-box {
    margin-top: -10px !important;
  }
  .main-gal .owl-carousel {
    max-height: 350px !important;
  }
  .main-gal .owl-item {
    max-height: 350px !important;
    position: relative;
  }
  .main-gal .owl-dots {
    bottom: 20px;
  }
  .hamburger_wrapper {
    top: 28px;
  }