.article.nView{container-type:inline-size}.article.nView>a{display:block;text-align:center;transition:opacity .2s;>header>h3{color:var(--txtColor);padding-top:4px}>header>.byline{color:var(--txtContrast);font-size:14px;line-height:1.25em}>picture>img{border-radius:8px}&:hover{opacity:.75}@media (min-width:1248px){>header>h3{font-size:19px;padding-top:8px}>header>.byline{font-size:15px}main .list.articles & header{>h3{font-size:22px}>.byline{font-size:17px}}}}@container (min-width:500px){.article.nView>a{position:relative;text-align:left}.article.nView>a>header{bottom:24px;box-sizing:border-box;left:0;max-width:100%;padding:8px 20px 8px 24px;position:absolute}.article.nView>a>header:before{background:linear-gradient(to right,var(--bg),rgba(var(--bgRGB),.75));border-radius:0 8px 8px 0;content:"";inset:0;position:absolute;z-index:0}.article.nView>a>header>*{overflow:hidden;position:relative;text-overflow:ellipsis;text-shadow:0 0 4px #000;white-space:nowrap;z-index:1}.article.nView>a>header>h3{color:#fff;padding-top:0}.article.nView>a>header>.byline{color:#fff;margin-top:4px;text-shadow:0 0 4px #000}}@container (min-width:800px){.article.nView>a>header{padding:10px 32px 10px 24px}.article.nView>a>header>.byline{font-size:16px}}