@charset "UTF-8";
/* CSS Document */

.expert-card{
  --card-w: 1000px;
  --pad-y: 0px;
  --pad-x: 14px;
  --gap: 8px;
  --avatar: 86px;

  --name-size: clamp(14px, calc(var(--avatar) * 0.22), 20px);
  --meta-size: clamp(12px, calc(var(--avatar) * 0.18), 18px);

  display: flex;
  align-items: center;
  gap: var(--gap);

  text-decoration: none;
  color: inherit;

  padding: var(--pad-y) var(--pad-x);
  border: none;
  border-radius: 14px;

  max-width: var(--card-w);
  width: 100%;
  box-sizing: border-box;

  cursor: pointer;
}

.expert-card:focus-visible{
  outline: 3px solid rgba(0,0,0,.35);
  outline-offset: 3px;
}

.expert-card__avatar{
  background: transparent;
  width: var(--avatar);
  height: var(--avatar);
  flex: 0 0 var(--avatar);
  border-radius: 9999px;
  overflow: hidden;
}

.expert-card__avatar img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.expert-card__text{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: proxima-nova, sans-serif;
  font-style: normal;
  margin-top: 6px;
}

.expert-card__name,
.expert-card__meta{
  display: block;
  line-height: 1.15;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.expert-card__name{
  font-weight: 700;
  font-size: var(--name-size);
}

.expert-card__meta{
  font-weight: 500;
  font-size: var(--meta-size);
  opacity: .85;
}

@media (max-width: 420px){
  .expert-card{
    --gap: 12px;
    --pad-x: 12px;
  }
}