@import "bootstrap/scss/functions";
@import "../styles/_bootstrap-variables";

.contributors {
  display: grid;
  grid-template-rows: auto;
  align-items: stretch;

  grid-template-columns: 100%;
  column-gap: 2em;
  row-gap: 2em;
  --photo-size: 7em;
  font-size: .8em;

  @media (min-width: $grid-breakpoint-md) {
    grid-template-columns: 50% 50%;
    column-gap: 2em;
    row-gap: 2em;
    --photo-size: 8em;
    font-size: .9em;
  }

  @media (min-width: $grid-breakpoint-xxl) {
    grid-template-columns: 33% auto 33%;
    column-gap: 2em;
    row-gap: 2em;
    --photo-size: 10em;
    font-size: 1em;
  }
}


.contributor {
  box-sizing: border-box;
  padding: 1em;
  box-shadow: rgb(0 0 0 / 18%) 0px 0.3rem 0.25rem;

  display: grid;
  grid-template-rows: auto 2em;
  grid-template-columns: var(--photo-size) auto;
  column-gap: 1em;
  row-gap: 0;
  grid-template-areas:
    "photo info"
    "photo teams"
    ;

  .photo {
    grid-area: photo;
    img {
      border-radius: var(--photo-size);
      height: var(--photo-size);
      width: var(--photo-size);
    }
  }

  .info {
    grid-area: info;
    margin-top: 2.5em;

    @media (max-width: $grid-breakpoint-md) {
      margin-top: 1.5em;
    }

    .job {
      font-size: 80%;
    }
  }

  .links {
    grid-area: info;
    text-align: right;
    ul {
      font-size: 1.5em;
      @media (max-width: $grid-breakpoint-md) {
        font-size: 2em;
      }
      list-style-type: none;
      padding: 0;
      margin: 0;
      li { display: inline }
    }
  }

  .teams {
    grid-area: teams;
    ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    .team {
      display: inline;
      &:first-child::before {
        content: ''
      }
      &::before {
        content: ', '
      }
    }
  }
}
