How to use the same heading design on Desktop and Mobile

hello guys!!

I would like to use the same Heading design for Desktop and Mobile.

I need the Mobil version to look like the Desktop one (the title and button centered in the middle of the photo and not outside)

https://www.surppot.com/

password: meudru

I hope you can help me!!

best,

@media only screen and(max-width:768px){
.hero__adapt-text-wrap.wrapper {
    position: absolute;
    left: 0;
    left: 0;
    right: 0;
    color: #fff;
    vertical-align: middle;
    margin-top: 23%;
    top: 0;
    font-size: 10px;
    top: 0bo;
    bottom: 0;
    text-align: center;
}
a.hero__cta.btn {
    font-size: 14px;
}
}

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

Note : If your file is having already this media then add there. No need to add extra 768px media

thank you so much!! works great!