layout – visually adjust information in a map


I am currently working on the product list of a webshop. The products shown in the webshop can basically be rented out, and we have set rental rates for different durations such as monthly prices, weekly prices, daily prices, hourly rates and minute rates.
If the shopkeeper has set all these prices, they must be displayed on the product card.

The current map looks like this:

Enter image description here

As I was involved in the redesign of the webshop, I wanted to change the appearance of the product cards so that more cards fit into one line and display information can be displayed correctly.

I have mocked the following:

Enter image description here


In the revised model, we see that only the first three price breakdowns are visible. I would like to display the rental rates per hour and per minute. For that, I need extra horizontal space.

What I intended to do was to introduce a carousel inside the ticket in the price section, which can be used to display the remaining two prizes. Will that be a good UX pattern?

Something like that:

Enter image description here

Let me know what you think about this UX pattern and what alternatives we could introduce for such a case. Many Thanks !!