[data-view="news-list"] .news-container .as-comment {
    display: flex;
    align-items: center;
    border-radius: 0.25rem;
    padding: 0.5em 0.55em;

    &.with-comments {
        &:before {
            position: relative;
            right: unset;
            top: unset;
            margin-left: 0.25rem;
        }
        .news-link {
            padding: 0 var(--spacing-2);
        }
    }

    .news-content .last-comment {
        .last-comment-time {
            display: flex;
            gap: var(--spacing-2);
            .time {
                color: var(--accent-600);
                font-weight: 700;
            }
        }
        .last-comment-count {
            padding: 0 var(--spacing-2) 0 0;
            flex-direction: column;
        }
    }

    .news-content {
        display: grid;
        gap: 0;
        grid-template-columns: 1fr 1fr auto;
        grid-template-areas:
        "header header comment"
        "footer footer comment";

        .news-header-item {
            grid-area: header;
        }

        .news-footer {
            grid-area: footer;
            padding: 0 var(--spacing-2);
            justify-content: flex-start;

            .news-source {
                display: none;
            }

            .news-meta {
                flex-direction: row-reverse;
            }
        }

        .last-comment {
            min-width: 245px;
            grid-area: comment;
            align-self: stretch;
            display: flex;
            justify-content: space-between;
            padding: var(--spacing-2);
            background: linear-gradient(135deg, var(--surface-100) 0%, var(--surface-50) 100%);


            /* Last Comment Header (Avatar + Info) */

            .last-comment-header {
                display: flex;
                align-items: center;
                gap: var(--spacing-2);
            }

            .last-comment-avatar {
                width: 32px;
                height: 32px;
                object-fit: cover;
                flex-shrink: 0;
            }

            .last-comment-info {
                flex: 1;
                min-width: 0;
                display: flex;
                flex-direction: column;
            }

            .last-comment-author {
                font-weight: 600;
                font-size: var(--font-size-sm);
                color: var(--text-900);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .last-comment-time {
                font-size: var(--font-size-xs);
                color: var(--text-600);
                direction: rtl;
            }

            /* Last Comment Count */

            .last-comment-count {
                display: flex;
                align-items: center;
                gap: var(--spacing-1);
                padding: var(--spacing-1) var(--spacing-2);
                align-self: center;
                color: var(--text-700);
                font-size: var(--font-size-sm);
                font-weight: 500;
            }

            .last-comment-count svg {
                color: var(--accent-500);
                flex-shrink: 0;
            }

            .last-comment-count span {
                line-height: 1;
            }

        }
    }
}


@media (max-width: 768px) {
    [data-view="news-list"] .news-container .as-comment {

        &.with-comments {

            .news-link {
                padding: var(--spacing-2) var(--spacing-2);
            }
        }

        .news-content {
            display: grid;
            gap: 0;
            grid-template-columns: 1fr 1fr auto;
            grid-template-areas:
                "header header header"
                "footer footer comment";

            padding: 0;

            .news-header-item {
            }

            .news-footer .news-meta {
                .date {
                    display: inline-block;
                }
            }


            .last-comment {
                padding: 0;
                justify-content: end;

                .last-comment-header {
                    flex-direction: row-reverse;

                    .last-comment-info {
                        align-items: end;
                    }
                }

                .last-comment-time {
                    flex-direction: row-reverse;
                }
            }
        }
    }
}

@media (max-width: 480px) {
    [data-view="news-list"] .news-container .as-comment {
        padding: 0.5em 0;

        &.with-comments {
            &:before {
                bottom: 1em;
                position: absolute;
            }
            .news-link {
                padding: var(--spacing-2) var(--spacing-2);
            }
        }

        .news-content .news-footer {
            padding: 0 1.5em 0 0;
            .news-meta time {
                flex-direction: column;
            }
        }

        .news-content .last-comment {
            .last-comment-author {
                font-size: var(--font-size-xs);
            }
            .last-comment-time {
                gap: var(--spacing-1);
            }
            .last-comment-count {
                padding: 0 var(--spacing-1) 0 0;
                flex-direction: column;
                font-size: var(--font-size-xs);
            }
        }
    }
}