.review-image {
    position: relative;
}

.review-image img {
    width: auto;
}

.review-image .rating-card {
    position: absolute;
    top: 16px;
    left: 16px;
    display: flex;
    border-radius: var(--radius-1x);
    border: 2px solid #15AB59;
    background: var(--colors-neutral---light-0);
}

.rating-card .rating-number {
    border-bottom-right-radius: var(--radius-1x);
    border-top-right-radius: var(--radius-1x);
    background: #15AB59;
    padding: var(--spacing-1x) var(--spacing-2x);
}

.rating-number .current-value {
    color: var(--colors-neutral---light-0);
    font-family: var(--font-family-body), var(--font-family-reserve);
    font-size: var(--font-size-3xl);
    font-weight: 600;
    line-height: var(--font-line-height-xl);
}

.rating-number .max-value {
    color: var(--colors-neutral---light-0);
    font-family: var(--font-family-body), var(--font-family-reserve);
    font-size: var(--font-size-lg);
    font-weight: 600;
    line-height: var(--font-line-height-sm);
}

.rating-text {
    padding: var(--spacing-1x) var(--spacing-2x) var(--spacing-1x) var(--spacing-15-x);

}

.rating-text .text {
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: var(--font-line-height-sm);
}

.rating-text .rating-text-value {
    color: #15AB59;
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: var(--font-line-height-sm);
}

@media (max-width: 768px) {
    .review-image .rating-card {
        position: relative;
        inset: 0;
        margin-top: var(--spacing-1x);
    }

    .review-image img {
        max-width: 100%;
    }
}