Minifrontpage on phones

How to show two slides side-by-side on Phones. Or one and a half. Not only one, with the possibility that they will also run on phone as on desktop, instead of appearing all stacked vertically.
I try this, but doesn't work:

@media screen and (max-width: 576px) {
  div[class*="mfp-"] .owl-stage, 
  div[class*="mfp-"] .slick-track, 
  div[class*="mfp-"] .mfp-items-wrapper,
  div[class*="mfp-"] .mfp-carousel-inner {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    width: 100% !important;
    transform: none !important; 
    gap: 10px !important; 
  }
  div[class*="mfp-"] .owl-item, 
  div[class*="mfp-"] .slick-slide, 
  div[class*="mfp-"] .mfp-item {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    float: none !important;
  }
}