/*
 * Original Design Specifications
 * Target: > 1800px
 * Test Resolution: 1920 x 1080
 */
:root {
  --author-card-small-gap: 2.2rem;
  --author-card-small-image-dimensions: 6.2rem;
  --author-card-small-image-border-radius: 0.6rem;
  --author-card-small-caption-font-size: 2.2rem;
}

/*
 * XL Media Query (1280px)
  * Target: 1535px > 1280px
  * Test Resolution: 1280 x 720
  */
@media screen and (max-width: 1535px) {
  :root {
    --author-card-small-gap: 1.6rem;
    --author-card-small-image-dimensions: 5.6rem;
    --author-card-small-image-border-radius: 0.5rem;
    --author-card-small-caption-font-size: 1.8rem;
  }
}

/*
 * L Media Query (1024px)
 * Target: 1279px > 1024px
 * Test Resolution: 1024 x 768
 */
@media screen and (max-width: 1279px) {
  :root {
    --author-card-small-caption-font-size: var(
      --typography-content-text-font-size
    );
  }
}

.team-member-card-small {
  display: flex;
  gap: var(--author-card-small-gap);
  align-items: center;
}

.team-member-card-small-image {
  display: block;
  width: var(--author-card-small-image-dimensions);
  height: var(--author-card-small-image-dimensions);
  border-radius: var(--author-card-small-image-border-radius);
  object-fit: cover;
  flex-shrink: 0;
}

.team-member-card-small-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--author-card-small-image-dimensions);
  height: var(--author-card-small-image-dimensions);
  border-radius: var(--author-card-small-image-border-radius);
  background-color: var(--theme-color-placeholder);
}

.team-member-card-small-image-placeholder-icon {
  width: calc(var(--author-card-small-image-dimensions) * 0.5);
  height: calc(var(--author-card-small-image-dimensions) * 0.5);
}

.team-member-card-small-image-placeholder-icon svg path {
  fill: var(--theme-color-placeholder-secondary);
}

.team-member-card-small-caption {
  font-weight: 600;
  font-size: var(--author-card-small-caption-font-size);
}