:root {
    --ghost-card-bg-color: #f7f7f7;
    --ghost-text-color: #333;
    --ghost-border-radius: 12px;
    --ghost-border-color: #f0f0f0;
    --ghost-fade-height: 200px;
    --ghost-columns: 4;
    --ghost-gap: 20px;
}

.comments-container {
    max-width: 1200px;
    margin: 0 auto;
    column-count: var(--ghost-columns);
    column-gap: var(--ghost-gap);
    -webkit-mask-image: linear-gradient(
            to bottom,
            black calc(100% - var(--ghost-fade-height)),
            transparent 100%);
    mask-image: linear-gradient(
            to bottom,
            black calc(100% - var(--ghost-fade-height)),
            transparent 100%
    );
}
.comment-card {
    display: flex;
    flex-direction: column;

    .comment-image img {
        border-radius: var(--ghost-border-radius);
        border: 1px solid var(--ghost-border-color)
    }

    .comment-body {
        max-width: 100%;
        margin: 20px auto;
        padding: 15px;
        border: 1px solid var(--ghost-border-color);
        border-radius: var(--ghost-border-radius);
        background-color: var(--ghost-card-bg-color);

        .comment-header {
            align-items: center;
            margin-bottom: 10px;
            padding-bottom: 5px;
            text-wrap: nowrap;
            text-overflow: ellipsis !important;
            overflow: hidden;

            .product-name {
                font-weight: bold;
                color: var(--ghost-text-color);
            }

            .product-name:before {
                content: "•";
                font-size: 25px;
                color: var(--wd-primary-color);
            }

        }

        .comment-text {
            line-height: 1.6;
            margin: 0;
            font-size: 14px;
            height: 135px;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .comment-footer{
            display: flex;
            justify-content: space-between;
            align-items: center;

            .user {
                font-weight: 600;
                img {
                    width: 40px;
                    margin-left: 5px;
                }
            }

            .date {
                font-size: 0.8rem;
                color: #666;
            }
        }

    }

}

.comments-container .comment-card:nth-child(odd) {
    flex-direction: column-reverse;
}

@media (max-width: 600px) {
    .comment-card {
        flex-direction: row !important;
        gap: 10px;

        .comment-image {
            max-height: 100px;
            max-height: 100px;
            max-width: 100px;
        }

        .comment-body {
            max-width: 70%;
        }

    }
    .comments-container {
        --columns: 1;
        display: flex;
        flex-direction: column;
    }
}