.generic-team-list-interlaced {

@mixin phone-ext {
  @include phone {
    @content(2, 2%);
  }
}

@mixin desktop-ext {
  @include desktop {
    @content(5, 1%);
  }
}

@include phone-ext using ($columns, $gutter) {
  margin: 0 $gutter/-2;
}
@include desktop-ext using ($columns, $gutter) {
  margin: 0 $gutter/-2;
}

padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;

@include phone {
  font-size: 4.25vw;
}

li {
  $tile-aspect-ratio: percentage(600/365);
  position: relative;
  display: block;
  z-index: 10;

  @include desktop-ext using ($columns, $gutter) {
    $column-width: 100%/$columns;
    $gutter-per-column: percentage($gutter/($column-width - $gutter));
    width: $column-width;
    padding: $gutter/2;

    &:nth-child(5n+1) .tile,
    &:nth-child(5n+3) .tile,
    &:nth-child(5n) .tile {
      margin-top: -0.5 * ($tile-aspect-ratio + $gutter-per-column);
      .speech-bubble {
        top: 50%;
        bottom: auto;
      }
    }

    &.halfling {
      .tile {
        padding-top: 0.5 * ($tile-aspect-ratio - $gutter-per-column);
      }
    }

    .speech-bubble {
      margin: $gutter-per-column/2 $gutter-per-column;
      min-height: 50% + percentage($gutter-per-column / $tile-aspect-ratio / 2);
    }
  }

  @include phone-ext using ($columns, $gutter) {
    $column-width: 100%/$columns;
    $gutter-per-column: percentage($gutter/($column-width - $gutter));
    width: $column-width;
    padding: $gutter/2;

    &.spacer:nth-child(-n+5),
    &.spacer:nth-last-child(-n+9) {
      display: none;
    }

    &.spacer.halfling:nth-child(-n+2),
    &.spacer.halfling:nth-last-child(-n+2) {
      display: block;
    }

    &:nth-child(2n+1) .tile {
      margin-top: -0.5 * ($tile-aspect-ratio + $gutter-per-column);
      .speech-bubble {
        top: 50%;
        bottom: auto;
      }
    }

    &:nth-child(n+14) {
      display: none;
    }

    &:target, &:target ~ li {
      display: block;
    }

    &.halfling {
      article {
        padding-top: 0.5 * ($tile-aspect-ratio - $gutter-per-column);
      }
    }

    .speech-bubble {
      margin: $gutter-per-column/2 $gutter-per-column;
      min-height: 50% + percentage($gutter-per-column / $tile-aspect-ratio / 2);
    }
  }

  &.spacer {
    z-index: 0;
  }

  &:nth-child(30n+1) .tile,
  &:nth-child(30n+7) .tile,
  &:nth-child(30n+14) .tile,
  &:nth-child(30n+16) .tile,
  &:nth-child(30n+22) .tile,
  &:nth-child(30n+29) .tile {
    background: #60b2a4;
  }
  &:nth-child(30n+2) .tile,
  &:nth-child(30n+9) .tile,
  &:nth-child(30n+11) .tile,
  &:nth-child(30n+17) .tile,
  &:nth-child(30n+24) .tile,
  &:nth-child(30n+26) .tile {
    background: #ff6f6c;
  }
  &:nth-child(30n+3) .tile,
  &:nth-child(30n+10) .tile,
  &:nth-child(30n+13) .tile,
  &:nth-child(30n+20) .tile,
  &:nth-child(30n+23) .tile,
  &:nth-child(30n+30) .tile {
    background: #f5cd47;
  }
  &:nth-child(30n+4) .tile,
  &:nth-child(30n+6) .tile,
  &:nth-child(30n+12) .tile,
  &:nth-child(30n+19) .tile,
  &:nth-child(30n+21) .tile,
  &:nth-child(30n+27) .tile {
    background: #2B8475;
  }
  &:nth-child(30n+5) .tile,
  &:nth-child(30n+8) .tile,
  &:nth-child(30n+15) .tile,
  &:nth-child(30n+18) .tile,
  &:nth-child(30n+25) .tile,
  &:nth-child(30n+28) .tile {
    background: #6d2c64;
  }

  .tile {
    position: relative;
    width: 100%;
    padding-top: $tile-aspect-ratio; // See https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_aspect_ratio_169
  }

  .filler {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    .claim {
      padding: .5em;
      margin: 0;
      color: rgba(255, 255, 255, 0.9);
      font-weight: bold;
      font-size: 1.5em;
      text-align: center;
    }
  }

  .user-image {
    display: block;
    cursor: pointer;

    img {
      cursor: default;
    }

    &:hover + .name-and-meta {
      display: block;
    }
  }

  .name-and-meta {
    hyphens: auto;
    -webkit-hyphens: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
    padding: .5em;
    opacity: 0;
    transition: opacity 0.3s;

    .name {
      margin: 0.5em 0 0.25em;
    }

    .description {
      margin: 0.25em 0 0.5em;
    }

    .personal-claim {
      margin: 1.25em 0 0.5em;

      p {
        margin: 0;
      }

      & > :first-child::before {
        content: '„';
        display: inline;
      }

      & > :last-child::after {
        content: '“';
        display: inline;
      }
    }

    .description, .personal-claim {
      color: $gray-700;
      font-weight: 300;
      font-size: 0.875em;
      line-height: 1.25;
    }
  }

  &:hover .name-and-meta {
    opacity: 1;
  }

  img {
    width: 100%;
    height: auto;
    display: block;
  }

  .speech-bubble {
    hyphens: auto;
    -webkit-hyphens: auto;
    position: absolute;
    left: 100%;
    top: auto;
    bottom: 50%;
    display: block;
    width: 100%;
    font-weight: normal;
    background-color: white;
    padding: 0.5em;

    &:before {
      content: '';
      position: absolute;
      left: -2em;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 1em 2em 1em 0;
      border-color: transparent white transparent transparent;
      top: 50%;
      margin-top: -1em;
    }

    h2 {
      font-weight: 300;
      margin-top: 0;
      font-size: 1em;
      line-height: 1.5;
    }
    p {
      font-weight: 300;
      margin-bottom: 0;
      font-size: 0.66667em;
      line-height: 1.25;
      a {
        font-weight: 300;
        color: inherit;
      }
    }
  }
}

}