.article-author {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px clamp(20px, 3vw, 34px);
  align-items: center;
  margin: clamp(24px, 3vw, 38px) 0 0;
  padding: clamp(20px, 3vw, 36px);
  border: 1px solid #d5e4f1;
  border-radius: 18px;
  background: linear-gradient(110deg, #edf6fa, #f6f8fd);
}

.article-author .article-author-photo {
  display: block;
  width: 106px;
  height: 106px;
  margin: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #bdd3e6;
  object-fit: cover;
}

.article-author .article-author-initials {
  display: grid;
  place-items: center;
  background: #2f51a3;
  color: white;
  font: 650 24px/1 var(--display, sans-serif);
}

.article-author .article-author-name {
  margin: 0;
  color: #182e49;
  font: 700 clamp(21px, 2vw, 28px)/1.2 var(--display, sans-serif);
  letter-spacing: -.035em;
  overflow-wrap: break-word;
}

.article-author-name span {
  display: block;
  margin-bottom: 6px;
  color: #2f51a3;
  font: 650 13px/1.4 var(--font, sans-serif);
  letter-spacing: normal;
}

.article-author .article-author-bio {
  max-width: 68ch;
  margin: 10px 0 0;
  color: #40566c;
  font: 400 16px/1.65 var(--font, sans-serif);
}

@media (max-width: 570px) {
  .article-author { gap: 14px 18px; }
  .article-author .article-author-photo { width: 68px; height: 68px; }
  .article-author-copy { display: contents; }
  .article-author .article-author-bio { grid-column: 1 / -1; margin: 0; }
}