/* Frontend styles for DN Tag Articles List */
.dn-tal-wrap { margin: 0 0 1rem 0; }
.dn-tal-list { list-style: none; padding: 0; margin: 0; }
.dn-tal-item { margin: 0 0 .75rem 0; }

/* Whole item clickable */
.dn-tal-link { display: grid; grid-template-columns: auto 1fr; grid-column-gap: .75rem; align-items: start; text-decoration: none; }
.dn-tal-link:hover .dn-tal-title, .dn-tal-link:focus .dn-tal-title { text-decoration: underline; }

/* Thumb, image, and content */
.dn-tal-thumb { display: block; width: 84px; overflow: hidden; border-radius: 0 !important; }
.dn-tal-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0 !important; }
.dn-tal-content { display: block; }
.dn-tal-title { display: block; font-weight: 700; line-height: 1.25; }
.dn-tal-date { display: block; font-size: .875em; opacity: .75; }
.dn-tal-excerpt { display: block; margin-top: .25rem; font-size: .95em; opacity: .9; }

/* Aspect ratios by class */
.dn-tal-thumb.ratio-16x9 { aspect-ratio: 16 / 9; }
.dn-tal-thumb.ratio-4x3  { aspect-ratio: 4 / 3; }
.dn-tal-thumb.ratio-1x1  { aspect-ratio: 1 / 1; }
.dn-tal-thumb.ratio-3x4  { aspect-ratio: 3 / 4; }
.dn-tal-thumb.ratio-9x16 { aspect-ratio: 9 / 16; }

@media (max-width: 480px) {
  .dn-tal-thumb { width: 64px; }
}