Mobile title over image

Site URL: https://www.bypaigejordan.com/

Hello Everyone, I ran into a little problem trying to place the Titles of the products over the image on the product page similar to the desktop version pictures attached.

Any help would be much appreciated,

Thanks

Add to Shop Page Setings > Advanced > Header

<style>
  @media screen and (max-width:640px) {
  .ProductList-overlay {
    opacity: 1;
    display: -moz-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(219,87,31,.79);
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: opacity .3s ease-in;
    -moz-transition: opacity .3s ease-in;
    -ms-transition: opacity .3s ease-in;
    transition: opacity .3s ease-in;
    z-index: 3;
}
  .ProductList-overlay * {
    color: white !important;
    font-size: 15px !important;
}
  }
</style>