/* A code component's Shadow DOM doesn't inherit the prototype's global box-sizing reset. */
.bcJvDUUh48GerXm7LMiv,
.bcJvDUUh48GerXm7LMiv * {
  box-sizing: border-box;
}

/* The photo, then the name with the LinkedIn link on its right, the title under them. */
.bcJvDUUh48GerXm7LMiv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'photo photo'
    'name link'
    'title title';
  align-items: center;
  gap: 6px 12px;
  color: var(--text-primary, #171717);
  font-family: var(--type-family-base, 'Raleway', system-ui, sans-serif);
}

/* Square (the portraits are about 1:1), rounded, on white (they are cut-outs); the soft grey placeholder until a photo is set. */
.ccTElEdqLtw6bseViFtq {
  grid-area: photo;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: 12px;
  border-radius: 16px;
  background-color: var(--background-default, #ffffff);
  object-fit: cover;
}

.X7NL_ALzdalxCO3w28fT {
  background: linear-gradient(160deg, #e7e3e9, #cfc7d4);
}

/* Heading XS, Medium. */
.nRfa6KXwUoprAKH0hdcu {
  grid-area: name;
  margin: 0;
  font-size: var(--type-heading-xs-size, 20px);
  font-weight: 500;
  line-height: var(--type-heading-xs-lh, 26px);
  letter-spacing: var(--type-heading-xs-ls, 0);
}

/* Body / Default, softened. */
.JQhhxbg9hcFmd7dvMMnD {
  grid-area: title;
  margin: 0;
  color: var(--neutral-700, #353535);
  font-size: var(--type-default-size, 16px);
  line-height: var(--type-default-lh, 23px);
  letter-spacing: var(--type-default-ls, 0);
}

/* A small square outlined button, soft black on hover (as the Contact page's social links). */
.GXOBuLqOLGCM3rXkqm2G {
  grid-area: link;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-default, #595959);
  border-radius: 8px;
  color: var(--text-primary, #171717);
  transition:
    background-color 250ms ease,
    color 250ms ease;
}

.GXOBuLqOLGCM3rXkqm2G svg {
  width: 15px;
  height: 15px;
}

.GXOBuLqOLGCM3rXkqm2G:hover,
.GXOBuLqOLGCM3rXkqm2G:focus-visible {
  background: var(--text-primary, #171717);
  color: var(--text-inverse, #fff);
}

.GXOBuLqOLGCM3rXkqm2G:focus-visible {
  outline: 2px solid var(--action-primary-default, #0073e6);
  outline-offset: 2px;
}

/* Tablets and phones (the prototype's breakpoint): the link under the title. */
@media (max-width: 1100px) {
  .bcJvDUUh48GerXm7LMiv {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'photo'
      'name'
      'title'
      'link';
    align-items: start;
  }

  .GXOBuLqOLGCM3rXkqm2G {
    margin-top: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .GXOBuLqOLGCM3rXkqm2G {
    transition: none;
  }
}