[data-grid-type="table"] {

  .list-item {
    margin: 0;
    padding: 0;
    &:nth-child(even){
      background: $light-gray;
    }
  }
}

table.team-table {
  background-color:white;
  width:100%;
  text-align:left;
  border-collapse:collapse;
  font-size:16px;
  overflow-x: auto;
  white-space: nowrap;
  @media only screen and (max-width: 768px){
    display: block;
  }

  thead, tbody {
    td, th {
      padding: 8px 16px;
      vertical-align: middle;
    }

    tr td:first-of-type {
      @media only screen and (min-width: 768px) {
        width: 30%;
      }
    }
  }

  thead tr {
    border-width:1px 1px 1px 1px;
    border-style:solid;
    border-color:$light-gray;
    background: $light-gray;
    @media only screen and (max-width: 768px){
      display: none;
    }

    th {
      height: 30px;
    }
  }

  tbody {
    @media only screen and (max-width: 768px){
      width: 100%;
      display: block;
    }

    tr {
      border-width:0 1px 1px 1px;
      border-style:solid;
      border-color:$light-gray;
      @media only screen and (max-width: 768px){
        width: 100%;
        display: block;
        border: 0;
        padding: 16px 0;
      }

      &:hover {
        background-color:$light-gray;
      }
    }

    tr td {
      line-height:63px;
      @media only screen and (max-width: 768px){
        display: block;
        text-align: left;
        line-height: 1;
        padding: 4px 16px;
      }

      > a{
        display:block;
        text-decoration:none;
        color:inherit;
      }
    }
  }

  .contact-function{
    @media only screen and (max-width: 768px){
      margin-bottom: 16px;
    }
  }

  .contact-image {
    overflow:hidden;
    width:40px;
    height:40px;
    border-radius:50%;
    margin-right:16px;

    img {
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:top;
    }
  }

  .contact-image,
  .contact-name {
    @media only screen and (min-width: 768px) {
      display:inline-block;
      vertical-align:middle;
    }
  }

  .contact-image{
    @media only screen and (max-width: 768px) {
      width: 80px;
      height: 80px;
    }
  }

  .contact-name {
    @media only screen and (max-width: 768px) {
      margin-top: 16px;
      font-weight: bold;
    }
  }
  .contact-social {

    .meta-social {
      display:inline-block;
      margin:0 8px 0 0;
    }
  }

  .aws-icon {
    width: 24px;
    height: 24px;
  }
}