.dm-articleAuthor {
  position: relative;
  background-color: var(--brandColorSoft);
  display: grid;
  grid-gap: 1rem;
  border-radius: var(--borderRadius);
  padding: 1rem;
}

.dm-articleAuthor__imageLink {
  grid-area: img;
}

.dm-articleAuthor .dm-followAuthorButton {
  grid-area: fol;
}

.dm-articleAuthor__name {
  grid-area: nam;
  font-weight: bold;
  font-size: 1.125rem;
  align-self: center;
}

.dm-articleAuthor__bio {
  grid-area: bio;
  line-height: 1.4;
  font-size: 1.125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* number of lines to show */
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

.dm-articleAuthor__more {
  grid-area: more;
  font-weight: bold;
  background-color: var(--brandColor);
  font-size: 1.125rem;
  padding: 0.3em .5em;
  color: var(--white);
  border-radius: var(--borderRadius);
  display: inline;
  justify-self: flex-start;
}

.dm-articleAuthor__more:hover {
  color: var(--white);
}

.dm-articleAuthor {
  grid-template-columns: min-content 3fr 1fr;
  grid-template-rows: 1fr min-content;
  grid-template-areas:
    "img     nam     fol"
    "bio     bio     bio"
    "more    more    more"
}

.dm-articleAuthor__image {
  width: 64px;
  height: 64px;
  border-radius: 100%;
}

.dm-articleAuthor__nameLink {
  color: var(--brandColor);
  font-size: 1.25rem;
}

@media (min-width: 768px) {

  .dm-articleAuthor {
    grid-template-areas:
      "img     nam     fol"
      "img     bio     bio"
      "img     more    more"
  }

}