@media only screen and (min-width: 320px) and (max-width: 767px) {
  .banner .slider .swiper-container,
  .slider-image {
    width: 100% !important;
    height: 50% !important;
    object-fit: fill !important;
  }
  .slide-image {
    background-position: center !important;
  }
  .feature-column {
    width: 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  .feature-item {
    width: 100%;
  }
  .slider-thumbs,
  .slick-content-inner {
    display: inline !important;
  }

  .banner {
    height: 40vh !important;
  }
  .slide-image {
    position: absolute;
    width: 120%;
    height: 100%;
    left: 0;
    top: 0;
    background-size: 100% auto !important;
    background-position: top !important;
  }
  .dropdown-menu {
    min-width: 70px !important;
  }
  .dropdown-menu[data-bs-popper] {
    display: flex !important;
    flex-direction: column;
    top: 100%;
    width: 70px !important;
    margin-top: 0 !important;
  }
}
@media screen (max-width: 320px) {
  .banner {
    height: 28vh !important;
  }
}
/* For screens between 320px and 400px */
@media only screen and (min-width: 320px) and (max-width: 400px) {
  .banner {
    height: 28vh !important;
  }
}

/* For screens smaller than 320px */
@media only screen and (max-width: 319px) {
  .banner {
    height: 40vh !important;
  }
}