@import 'variables.module';
@import 'global.module';

.teamList {
  display: grid;

  gap: 1rem;

  grid-template-columns: repeat(3, minmax(200px, 1fr));

  > .teamCard {
    padding: 0;
    
    width: 100%;
    
    > .memberBanner {
      position: relative;
  
      height: 150px;
  
      background: #537f53;
  
      border-top-left-radius: calc(1rem - 1px);
      border-top-right-radius: calc(1rem - 1px);
  
      > img {
        position: absolute;
  
        bottom: -52px;
        left: 16px;
  
        border: 4px solid $colorSurfaceLight2;
        border-radius: 1rem;
  
        @media (prefers-color-scheme: dark) {
          border-color: $colorSurfaceDark2;
        }
      }

      &[data-has-background] {
        background: var(--background);
      }
    }
  
    > .memberContent {
      padding: 1rem;
  
      > .memberLinks {
        display: flex;
  
        justify-content: end;
        align-items: end;
  
        gap: .5rem;
  
        list-style: none;
        
        margin: 0 0 .5rem;
  
        > li {
          > a {
            display: flex;
  
            align-items: center;
  
            padding: 4px;
  
            color: $colorBorderLight3;

            &:hover {
              color: $colorPrimary;
            }

            @media (prefers-color-scheme: dark) {
              color: $colorBorderDark3;
            }
          }
        }
      }
  
      > h3 {
        margin: 0;
      }
    }
  }

  @media (max-width: 992px) {
    grid-template-columns: repeat(2, minmax(200px, 1fr));
  }

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}