.team-list {    
    --columns: 3;
    --item-gap: var(--grid-gap);
    --item-width: calc((100% - (var(--columns) * var(--item-gap))) / var(--columns));
    --margin: var(--page-padding-left);
    
    margin-right: calc(var(--item-gap) * -1);    
    margin-bottom: calc(var(--margin) * -1);
    
    display: flex;
    flex-flow: row wrap;
  }
  
  .team-list > li {
    width: var(--item-width);
    margin-right: var(--item-gap);
    margin-bottom: var(--margin);
    flex-shrink: 0;
  }

  article.team-article figure {
    max-width: var(--grid-3-fixed-);
    position: relative;
    margin-bottom: 1.875em;
  }
  
  
  
  article.team-article .image-copyright {
    position: absolute;
    bottom: 1px;
    left: 10px;
    z-index: 3;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
  }
  
  .image-copyright .icon {
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
    margin-right: 3px;
  }
  
  .image-copyright .icon span {
    font-size: 24px;
    bottom: -6px;
    position: relative;
  }
  
  .image-copyright .text {
    opacity: 0;
    transform: translateX(-10px);
    transition: all 250ms;
    pointer-events: none;
    font-size: 14px;
  }
  
  .image-copyright:hover .text {
    opacity: 1;
    transform: none;
    pointer-events: all;
  }
  
  
  
  article.team-article figure > span {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 0;
    transition: opacity 500ms;
    transition-timing-function: var(--ttf-2);
  }
  
  article.team-article:hover figure > span {
    opacity: 1;
  }
  
  article.team-article .name-and-role + .bio {
    margin-top: 1em;
    padding-top: 1.5em;
    position: relative;
  }
  
  article.team-article .name-and-role + .bio::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: var(--grid-1-fixed-);
    height: 1px;
    background: var(--base-color-gray);
    pointe-events: none;
  }
  
  article.team-article .meta-role {
    color: var(--base-color-gray);
    margin-top: .25em;
  }
  
  article.team-article .article-footer > div {
    padding-top: 1.875em;
  }
  
  article.team-article .btn-icon-only {
    --size: 1.5em;
  }
  
  article.team-article .toggle-more {
    display: block;
  }
  
  article.team-article.is-expanded .toggle-more {
    display: none;
  }
  
  article.team-article *[data-max-height-on-demand] {
    transition: 750ms var(--ttf);
    transition-property: transform, opacity, max-height;
  }
  
  article.team-article:not(.is-expanded) *[data-max-height-on-demand] {
    max-height: 0px;
    overflow: hidden;
    transform: translateY(-20px);
    opacity: 0;
  }
  
  article.team-article:not(.is-expanded) .article-footer[data-max-height-on-demand] {
    transform: none;
  }
  
  article.team-article.is-expanded *[data-max-height-on-demand] {
    opacity: 1;
    transform: none;
    max-height: var(--max-height, 500px);
  }
  
  
  
  
  
  
  
  @media (max-width: 900px) {
    
    .team-list {
      --columns: 2;
    }
    
    article.team-article figure {
      max-width: 220px;
    }
    
  }
  
  
  
  
  
  
  
  @media (max-width: 600px) {
    
    .module-team .module-body {
      margin-left: calc(var(--page-padding-left) * -1);
      margin-right: calc(var(--page-padding-right) * -1);
      overflow: hidden;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
    }
    
    .team-list {
      --columns: 1;
      --margin: 0;
      --item-gap: var(--page-padding-left);
      --item-width: calc(100vw - (var(--page-padding-left) * 2) - (var(--page-padding-right) * 2));
      flex-flow: row nowrap;
      padding-left: var(--page-padding-left);
      padding-right: var(--page-padding-right);
      width: fit-content;
    }
    
    .team-list > li {
      scroll-snap-align: center;
    }
    
    article.team-article figure {
      max-width: none;
      margin-bottom: 1.2em;
    }
    
    article.team-article .name-and-role + .bio {
      padding-top: 0;
    }
    
    article.team-article .name-and-role + .bio::after {
      display: none;
    }
    
    article.team-article .toggle-more {
      display: none;
    }
    
    article.team-article:not(.is-expanded) *[data-max-height-on-demand] {
      max-height: none;
      opacity: 1;
      transform: none;
    }
    
  }