.author-card {
  --author-card-badge-size: var(--28);
  inline-size: fit-content;
  max-inline-size: 100%;
}

.author-card__photo.is--placeholder {
  background-color: var(--grey-medium);
}

.author-card.is--linked:focus-visible {
  --author-card-icon-offset: var(--32);
  --author-card-caption-offset: -100%;
  box-shadow: 0 0 0 .125rem var(--white), 0 0 0 .25rem var(--blue-dark);
}

@media (hover: hover) and (pointer: fine) {
  .author-card.is--linked:hover {
    --author-card-icon-offset: var(--32);
    --author-card-caption-offset: -100%;
  }
}

.author-card__badge {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--author-card-badge-size);
  height: var(--author-card-badge-size);
  border-radius: .1944rem;
}

.author-card__glyph {
  grid-area: 1 / 1;
  height: auto;
  transition: transform .4s cubic-bezier(.175, .885, .32, 1.275);
}

.author-card__glyph.is--logo {
  width: calc(var(--author-card-badge-size) * 1.264 / 1.75);
  transform: translateX(var(--author-card-icon-offset, 0rem));
}

.author-card__glyph.is--arrow {
  width: calc(var(--author-card-badge-size) * 24 / 28);
  transform: translateX(calc(var(--author-card-icon-offset, 0rem) - var(--32)));
}

.author-card__caption {
  display: grid;
  overflow: hidden;
}

.author-card__role,
.author-card__follow {
  grid-area: 1 / 1;
  transition: transform .4s cubic-bezier(.215, .61, .355, 1);
}

.author-card__role {
  transform: translateY(var(--author-card-caption-offset, 0%));
}

.author-card__follow {
  transform: translateY(calc(100% + var(--author-card-caption-offset, 0%)));
}

@media (prefers-reduced-motion: reduce) {
  .author-card__glyph,
  .author-card__role,
  .author-card__follow {
    transition: none;
  }
}

.author__name-wrap.author-card__name {
  column-gap: var(--12);
}

@media screen and (max-width: 991px) {
  .author__name-wrap.author-card__name {
    column-gap: var(--8);
  }

  .author-card {
    --author-card-badge-size: calc(var(--28) * .9);
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .author-card__photo {
    width: 88px;
    height: 88px;
  }

  .author-card__name {
    margin-bottom: var(--8);
  }
}

@media screen and (max-width: 767px) {
  .author-card {
    --author-card-badge-size: calc(var(--24) * .9);
  }

  .author-card__photo {
    width: 64px;
    height: 64px;
  }
}