Help to get a custom woocommerce page items aligned and centered

Hi and thanks in advance. I have this NSFW site (romance eBooks with some hot images maybe) https://sitetest.wigigx.com/mf-romance/

I managed to create a shortcode and a function to get an excerpt displayed next to the eBook cover Just in this page (of course via the created shortcode) BUT the real problem is that I can`t get the excerpt, price, title and star ratings centered and responsive and to fit the container so it align perfectly to the image size.

I managed to center the excerpt, to “lift” the title )before was at the bottom) and to have some margin between image and text, but I need to

-Get the Title top centered

-Then the excerpt centered

-then the star rating

-finally the price

-and the Get it now button at the bottom All centered, aligned and responsive.

I also put some border to title to “see it” and edit it

here the code so far, any idea?

/*Float image to the left*/

ul.products li.product img {

float: left;

}

/*Add hover to image*/

a:hover img {

border:solid #eeccdd 5px;

}

/*Change Title color and float text to right*/

ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2, ul.products li.product h3{

color: #cc5588;

float:right;

width: auto;

}

/*Center Excerpt and price and Button Get it now*/

ul.products li.product{ text-align: center;

}

/*Lift Up title*/

.beta, h2 {

clear: none;

display: flex;

}

I need this to make changes in THIS page, not sitewide, any hange i can made seems to apply globally

Thanks in advance

The page I need help with: [log in to see the link]