Responsive design CSS code not working well on iPhone 13 mini

Hello,

I found some code to help shorten the height of the main rotating banner (and its contents - images + text) you can see here: https://www.karibuadventures.com/

In the image I attached it shows how it appears on a iPhone 13 mini. 

This is the CSS I am using:

/* Change scale of image on main homepage banner */
@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="634d520073bf7876f8cb7c7f"] ul {
    min-height: unset !important;
      height: 50vh;
}
}

@media screen and (max-width:767px) {
/* Change position of text in main banner image and add shadow to text */
  section[data-section-id="634d520073bf7876f8cb7c7f"] .list-item {
    padding: 10px 150px 30px 30px !important;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.4);
    .slide-content h2 {
font-size: 31px !important;
   font-weight: medium;
  }
}
}
 

Any advice is appreciated!