.customer-review-card {
    /* icons */
    --reviewcard-avatar-size: 4.4rem;
    --reviewcard-star-size: 2rem;
    /* layout */
    --reviewcard-header-gap: 1.6rem;
    --reviewcard-content-gap: 1.6rem;
    /* header text */
    --reviewcard-avatar-fontsize: 2rem;
    --reviewcard-avatar-sm-fontsize: 1.7rem;
    --reviewcard-username-fontsize: 1.8rem;
    --reviewcard-username-lineheight: 2.4rem;
    --reviewcard-date-fontsize: 1.6rem;
    --reviewcard-date-lineheight: 1.5;
    /* content text */
    --reviewcard-title-fontsize: 1.8rem;
    --reviewcard-title-lineheight: 2.4rem;
    --reviewcard-description-fontsize: 1.6rem;
    --reviewcard-description-lineheight: 2.4rem;

    padding: 2.4rem;
    border-radius: 2rem;
    border: 0.5px solid rgba(0, 0, 0, 0.20);
    background: #FDFDFD;
}
.customer-review-card .header-line {
    display: flex;
    align-items: center;
    gap: var(--reviewcard-header-gap);
}
.customer-review-card .avatar-image {
    width: var(--reviewcard-avatar-size);
    height: var(--reviewcard-avatar-size);
    overflow: hidden;
    border: 1px solid #FDFDFD;
    border-radius: 50%;
    background-color: var(--color-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}
.customer-review-card .avatar-image >span {
    color: var(--color-white);
    text-align: center;
    font-size: var(--reviewcard-avatar-fontsize);
    line-height: 1;
    font-weight: var(--font-weight-bold);
    display: block;
}
.customer-review-card .avatar-image >span.wide-abbr {
    font-size: var(--reviewcard-avatar-sm-fontsize);
}
.customer-review-card .profilecard-wrapper {
    flex: 1;
}
.customer-review-card .profilecard-wrapper .profilecard-name {
    color: var(--text-color-black);
    font-size: var(--reviewcard-username-fontsize);
    line-height: var(--reviewcard-username-lineheight);
    font-weight: var(--font-weight-bold);
}
.customer-review-card .review-stars {
    display: flex;
    justify-content: space-between;
}
.customer-review-card .review-stars .star-icons {
    display: flex;
    align-items: center;
}
.customer-review-card .review-stars .star-icons .star-filled {
    width: var(--reviewcard-star-size);
    height: var(--reviewcard-star-size);
    background: url('https://d32u6scf3pzwp7.cloudfront.net/images/icons/star/icon_star_filled.svg') no-repeat;
    background-size: 100% 100%;
}
.customer-review-card .comment-date {
    color: #656565;
    white-space: nowrap;
    font-size: var(--reviewcard-date-fontsize);
    line-height: var(--reviewcard-username-lineheight);
    font-weight: var(--font-weight-medium);
}
.customer-review-card .review-content {
    margin-top: var(--reviewcard-content-gap);
    color: var(--text-color-black);
}
.customer-review-card .review-content .title {
    font-size: var(--reviewcard-title-fontsize);
    line-height: var(--reviewcard-title-lineheight);
    font-weight: var(--font-weight-bold);
    margin-bottom: 0.4rem;
}
.customer-review-card .review-content .description {
    font-size: var(--reviewcard-description-fontsize);
    line-height: var(--reviewcard-description-lineheight);
    font-weight: var(--font-weight-medium);
}
.customer-review-card .review-content .description .tooltip-popover-wrapper {
    display: inline-block;
    vertical-align: baseline;
}
.customer-review-card .review-content .description .tooltip-popover-wrapper .reference {
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.customer-review-card .review-content .description .tooltip-popover-wrapper .reference .info-icon {
    width: auto;
    height: auto;
    background: none;
}
.customer-review-card .review-content .description .tooltip-popover-wrapper .reference .info-icon::before {
    content: '...';
}
.customer-review-card .review-content .description .tooltip-popover-wrapper .reference {
    color: inherit;
    font: inherit;
    line-height: inherit;
    font-weight: inherit;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.customer-review-card .review-content .description .tooltip-popover-wrapper .message-description {
    word-break: break-word;
}
/* mobile */
@media (max-width: 575px) {
    .customer-review-card {
        /* icons */
        --reviewcard-avatar-size: 11.28vmin;
        --reviewcard-star-size: 5.12vmin;
        /* layout */
        --reviewcard-header-gap: 3.58vmin;
        --reviewcard-content-gap: 4.1vmin;
        /* header text */
        --reviewcard-avatar-fontsize: 5.12vmin;
        --reviewcard-avatar-sm-fontsize: 4.1vmin;
        --reviewcard-username-fontsize: 4.1vmin;
        --reviewcard-username-lineheight: 1.5;
        --reviewcard-date-fontsize: calc(max(3.58vmin, 14px));
        --reviewcard-date-lineheight: 1.5;
        /* content text */
        --reviewcard-title-fontsize: 4.1vmin;
        --reviewcard-title-lineheight: 1.5;
        --reviewcard-description-fontsize: 3.58vmin;
        --reviewcard-description-lineheight: 5.12vmin;

        padding: 5.12vmin;
    }
    .customer-review-card .tooltip-popover-wrapper .tooltip-content {
        min-width: 50vmin;
    }
    .customer-review-card .review-content .description .tooltip-popover-wrapper .message-description {
        font-size: 3.07vmin;
        line-height: 1.3;
        color: var(--text-color-black);
    }
}