Product Overview : Price

<div class="product-overview__prices flex justify-between">

    <div class="flex flex-col items-start gap-1">

        <div class="text-secondary font-semibold text-xxs tracking-tightened">

            <span class="text-2xl md:text-[33px]">432,00€</span>

            <span>/ mois*</span>

        </div>

        <div class="font-semibold text-smaller">

            <span class="text-lg md:text-xl">22 000€</span>

            <span>comptant</span>

        </div>

    </div>

    <div class="flex flex-col items-end gap-1.5">

        <div class="flex-1">

            <button class="btn btn-favorite p-0"

                    x-data="{isFavorite: false, isActivated: false}"

                    :class="{'is-favorite' : isFavorite}"

                    @click="isFavorite = !isFavorite; isActivated = true"

            >

                <span class="scale-100"

                      :class="{

                        'animate-favorite-remove': !isFavorite && isActivated

                      }">

                    <svg class="icon w-5.5" width="30" height="27" viewBox="0 0 30 27" fill="none" xmlns="http://www.w3.org/2000/svg">

                        <path d="M13.4911 24.3119L13.4896 24.3106C9.6067 20.8567 6.46584 18.0608 4.28366 15.4437C2.11233 12.8397 1 10.5387 1 8.09264C1 4.13112 4.16404 1 8.25 1C10.5643 1 12.7959 2.06165 14.2449 3.73076L15 4.60062L15.7551 3.73076C17.2041 2.06165 19.4357 1 21.75 1C25.836 1 29 4.13112 29 8.09264C29 10.5388 27.8877 12.8398 25.7161 15.4458C23.5345 18.0639 20.3951 20.8624 16.514 24.322L16.5118 24.3241L16.5096 24.326L15.0025 25.6616L13.4911 24.3119Z" stroke="#8697B0" stroke-width="2"/>

                    </svg>

                </span>

                <span class="absolute scale-0"

                      :class="{

                        'animate-favorite-add': isFavorite

                      }"

                >

                    <svg class="icon w-5.5" width="30" height="27" viewBox="0 0 30 27" fill="none" xmlns="http://www.w3.org/2000/svg">

                        <path d="M13.4911 24.3119L13.4896 24.3106C9.6067 20.8567 6.46584 18.0608 4.28366 15.4437C2.11233 12.8397 1 10.5387 1 8.09264C1 4.13112 4.16404 1 8.25 1C10.5643 1 12.7959 2.06165 14.2449 3.73076L15 4.60062L15.7551 3.73076C17.2041 2.06165 19.4357 1 21.75 1C25.836 1 29 4.13112 29 8.09264C29 10.5388 27.8877 12.8398 25.7161 15.4458C23.5345 18.0639 20.3951 20.8624 16.514 24.322L16.5118 24.3241L16.5096 24.326L15.0025 25.6616L13.4911 24.3119Z" fill="#FF6464" stroke="#FF6464" stroke-width="2"/>

                    </svg>

                </span>

            </button>

        </div>

        <div>

            <a href="#" class="text-xxs tracking-tightened font-medium text-icon underline">Conditions de l'offre</a>

        </div>

    </div>

</div>