Show mobile slideshow's text on top of image

base.css

{% if section.settings.show_on_top_of_image_on_mobile_by_ezfycode %}
<style>
/* Custom code by ezfycode.com
Fix mobile banner and slideshow [start]
===================================== */
{% assign _mobile_banner_background = section.settings.mobile_banner_background | color_to_rgb %}
{% assign mobile_banner_background_opacity = section.settings.mobile_banner_background_opacity | prepend: ',.' | append: ')'  %}
{% capture mobile_banner_background %}
{% if section.settings.mobile_banner_background_opacity == 100 %}
{{ section.settings.mobile_banner_background }}
{% else %}
{{_mobile_banner_background | replace: 'rgb', 'rgba' | replace: ')', mobile_banner_background_opacity}}
{% endif %}
{% endcapture %}

@media (max-width: 749px){
    [id*='{{section.id}}'] .slideshow{
        position: relative;
    }

  [id*='{{section.id}}'] [class*='banner__content'] {
      position: absolute;
      top: 0;
      height: 100%;
  }
    
  [id*='{{section.id}}'] [class*='banner__content']  > *{
    background: rgba(255,255,255,1)
  }

     [id*='{{section.id}}']   .banner__box {
        background-color: {{ mobile_banner_background }} !important;
        margin: 20px !important;
    }

    [id*='{{section.id}}']   h2,
  [id*='{{section.id}}']  .banner__text{
        color: {{ section.settings.mobile_banner_text_color }} !important;
    }
}

@media (max-width: 500px){
       [id*='{{section.id}}']  .banner__box {
        margin: 20px !important;
            margin-left: 10px !important;
    margin-right: 10px !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    }
}

/* Custom code by ezfycode.com
Fix mobile banner and slideshow  [end]
===================================== */
</style>
{% endif %}