.news-list { width: min(100%, var(--content-width)); margin: 0 auto; padding: var(--space-3); }
.news-card__link { display: flex; color: var(--color-text); }
.news-card__title { display: -webkit-box; overflow: hidden; font-size: 1rem; font-weight: 650; line-height: 1.2; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.news-card__source { margin-top: var(--space-2); overflow: hidden; color: var(--color-muted); font-size: .66rem; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.news-card__image { background: var(--color-soft); object-fit: cover; }
html[data-list-layout="compact"] .news-list { display: grid; gap: var(--space-4); }
html[data-list-layout="compact"] .news-card__link { min-height: var(--card-image-height); align-items: center; justify-content: space-between; gap: var(--space-3); }
html[data-list-layout="compact"] .news-card__content { min-width: 0; flex: 1; }
html[data-list-layout="compact"] .news-card__image { width: var(--card-image-width); height: var(--card-image-height); flex: 0 0 var(--card-image-width); }
html[data-list-layout="card"] .news-list { display: grid; gap: var(--space-5); }
html[data-list-layout="card"] .news-card__link { overflow: hidden; flex-direction: column-reverse; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
html[data-list-layout="card"] .news-card__content { padding: var(--space-4); }
html[data-list-layout="card"] .news-card__image { width: 100%; aspect-ratio: 16 / 9; }
html[data-list-layout="grid"] .news-list { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-list-layout="grid"] .news-card__link { height: 100%; overflow: hidden; flex-direction: column-reverse; justify-content: flex-end; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
html[data-list-layout="grid"] .news-card__content { padding: var(--space-3); }
html[data-list-layout="grid"] .news-card__image { width: 100%; aspect-ratio: 4 / 3; }
@media (min-width: 760px) { html[data-list-layout="grid"] .news-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 420px) { :root { --card-image-width: 116px; --card-image-height: 72px; } }