使覆盖文本在猫头鹰轮播上响应

Question

我在项目主页上有以下代码段。我在哪里为主滑块安装了猫头鹰传送带。

$('.home-slider').owlCarousel({
  loop: true,
  nav: false,
  animateOut: 'fadeOut',
  autoHeight: true,
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 1
    },
    1000: {
      items: 1
    }
  }
});

.owl-dots {
  display: none;
}

.uk-light,
p {
  color: #fff;
}

p {
  font-size: 20px;
}

.home-slider .item {
  position: relative;
}

.home-slider .item .content {
  width: 800px;
  color: #fff;
  text-align: left;
  position: absolute;
  top: 60%;
  bottom: auto;
  padding: 0;
  left: 10%;
  right: auto;
  z-index: 10;
  padding: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />
<div class="owl-carousel owl-theme home-slider">
  <div class="item">
    <img src="https://source.unsplash.com/1024x512/?food" alt="">
    <div class="content">
      <h1 class="uk-light">Heading Text</h1>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, assumenda eum consequuntur eius reiciendis ex corrupti placeat commodi in maiores?</p>
    </div>
  </div>

  <div class="item">
    <img src="https://source.unsplash.com/1024x512/?cat" alt="">
    <div class="content">
      <h1 class="uk-light">Heading Text</h1>
      <p>1 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, assumenda eum consequuntur eius reiciendis ex corrupti placeat commodi in maiores?</p>
    </div>
  </div>

  <div class="item">
    <img src="https://source.unsplash.com/1024x512/?corgi" alt="">
    <div class="content">
      <h1 class="uk-light">Heading Text</h1>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, assumenda eum consequuntur eius reiciendis ex corrupti placeat commodi in maiores?</p>
    </div>
  </div>

  <div class="item">
    <img src="https://source.unsplash.com/1024x512/?retriver" alt="">
    <div class="content">
      <h1 class="uk-light">Heading Text</h1>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, assumenda eum consequuntur eius reiciendis ex corrupti placeat commodi in maiores?</p>
    </div>
  </div>
</div>

在这里，我为每个幻灯片项都创建了一个叠加文本。我遇到的麻烦是，重叠文本的<p>标签被推出图像之外，在平板电脑和移动屏幕上不可见。

当然，我知道我应该进行媒体查询以解决此问题。我到处搜寻网页，其中大多数建议减小字体大小。

但是通过减小字体大小<p>，标记文本将无法在移动设备中读取。

什么是最好的解决方案？