[FEATURE][CSS] Refactor product listing card

[mdanilowicz]

Description

Currently, we are using empty lines to achieve equal spaces For example:

    <template v-if="regulationPrice">
      <div class="flex gap-2 justify-end text-gray-500 text-3.5 mb-2">
        {{ translations.listing.previously }}
        <SharedPrice :value="regulationPrice" />
      </div>
    </template>
    <template v-if="!regulationPrice">
      <div class="h-7"><!-- placeholder --></div>
    </template>

We should rebuild this component to be more flexible. We can use grid or flexbox

Use Case

.

Proposed Solution

No response

Alternatives Considered

No response

Additional Context

No response