/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */
/* =====================================
=                Person                =
===================================== */
@layer sdc {
  .person__detail {
    padding: 5rem 0 4rem;
  }
  @media (min-width: 64em) {
    .person__detail {
      display: flex;
      column-gap: 3rem;
    }
  }
  .person__info {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .person__info__contact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 2rem;
    column-gap: 2rem;
  }
  @media (min-width: 64em) {
    .person__info__contact {
      justify-content: flex-start;
    }
  }
  .person__info-content {
    padding-top: 2rem;
  }
  @media (min-width: 64em) {
    .person__info-content {
      padding-top: 0;
    }
    .person__info {
      flex-basis: 18.125rem;
      flex-shrink: 0;
      align-items: flex-start;
    }
  }
  .person__image {
    padding-bottom: 1.875rem;
    border-bottom: 1px solid var(--color-black-light);
  }
  .person__image img {
    border-radius: 100%;
  }
  @media (min-width: 64em) {
    .person__image {
      width: 100%;
    }
  }
  .person__email,
  .person__telephone {
    display: flex;
    align-items: center;
    padding-bottom: 1.2rem;
    column-gap: 1rem;
  }
  .person__telephone {
    color: var(--color-black-soft);
  }
  .person__email-link {
    -webkit-text-decoration: underline;
    text-decoration: underline;
  }
  .person__email-link:link,
  .person__email-link:visited {
    color: var(--color-action);
  }
  .person__email-link:hover {
    -webkit-text-decoration: none;
    text-decoration: none;
  }
  .person__position {
    padding-top: 0.5rem;
    color: var(--color-black-soft);
    font-size: clamp(1rem, 0.5313rem + 2.5vw, 2.25rem);
  }
  @media (min-width: 64em) {
    .person__position {
      padding: 1rem 0;
    }
  }
  .person .description {
    padding: 1rem 0;
  }
  .person__components {
    padding: 3rem 0;
  }
  @media (min-width: 64em) {
    .person__components {
      padding: 4rem 0;
    }
  }
}