.article-friend-links { margin: 1.5rem 0; }
.article-friend-links__heading { margin: 0 0 1rem; font-size: 1.25rem; color: #ddd; }
.article-friend-links__group { margin: 0 0 1.5rem; }
.article-friend-links__title { margin: 0 0 1rem; padding: .5rem 1rem; border-top: 1px solid #444; background: #303030; color: #fff; font-size: 1.125rem; font-weight: bold; }
.article-friend-links__grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 1rem 0; }
.article-friend-links__link { min-width: 0; display: flex; flex-direction: column; align-items: center; color: #bcbcbc; text-decoration: none; border: 0 !important; }
.article-friend-links__link img, .article-friend-links__placeholder { width: 55%; height: auto; aspect-ratio: 1; margin: 0 0 .3rem; border-radius: .625rem; object-fit: cover; }
.article-friend-links__placeholder { display: flex; justify-content: center; align-items: center; background: #303030; color: #ddd; font-size: 1.25rem; }
.article-friend-links__name { width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .65rem; line-height: 1.3; text-align: center; }
.article-friend-links__link:hover { color: #fe2e62; }
@media (max-width: 767px) {
    .article-friend-links__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .article-friend-links__link img, .article-friend-links__placeholder { width: 70%; }
    .article-friend-links__name { font-size: .725rem; }
}