/* Experts page — layout override */
body.experts-page #main-content {
  justify-content: start;
}

#main-content > .experts-page {
  display: flex;
  flex-direction: column;
  min-block-size: 100%;
  padding: calc(var(--navbar-height) + var(--block-space)) var(--inline-space) var(--block-space-double);
}

@media (min-width: 100ch) {
  #main-content > .experts-page {
    padding-block-start: var(--block-space);
  }
}

.experts-grid {
  max-inline-size: 80ch;
  margin-inline: auto;
  inline-size: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18ch, 1fr));
  gap: var(--block-space);
}

.expert-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--block-space-half);
  text-align: center;
  padding: calc(var(--block-space) * 1.5) var(--inline-space);
  background: oklch(var(--lch-gray));
  border-radius: 1em;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s;
}

.expert-card:hover {
  background: oklch(var(--lch-black) / 0.08);
}

.expert-card__avatar {
  --avatar-size: 8ch;
}

.expert-card__avatar img {
  border-radius: 50%;
}

/* Expert profile detail */
.expert-profile {
  max-inline-size: 60ch;
  margin-inline: auto;
  padding: calc(var(--navbar-height) + var(--block-space)) var(--inline-space) var(--block-space-double);
}

@media (min-width: 100ch) {
  .expert-profile {
    padding-block-start: var(--block-space);
  }
}

.expert-profile__header {
  margin-block-end: var(--block-space);
}

.expert-profile__avatar {
  --avatar-size: 12ch;
}

.expert-profile__avatar img {
  border-radius: 50%;
}