How do I make two different cover pages for mobile and desktop?

Site URL: https://www.health-ability.com

Good evening, 

I am writing on behalf of my client to try and solve an issue with our cover page. We are actually very happy with the current one which was designed by a graphic designer especially for this project. Unfortunately it doesn't look good on mobile because of the text which is not centered and gets cut off. So, I was wondering if there is a way to use two different cover pages and show one instead of the other based on the device. In this case, I could make another one in compliance with mobile responsiveness best practices. 

Looking forward to your reply, 

Thank you in advance, 

Best regards, 

Allegra Hamrin

You can add this to Cover Page Header to set new image on mobile only

<style>
  @media screen and (max-width:640px) {
  .sqs-slice-gallery-item.content-fill {
    background-image: url(https://cdn.pixabay.com/photo/2021/09/15/15/48/seals-6627197__340.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.sqs-slice-gallery-item.content-fill img {
    visibility: hidden;
}
  }
</style>