@import "../sass/config";

.trees {
  display: flex;
  justify-content: center;
}

.tree {
  position: relative;
  min-width: 300px;  
  color: white;
  margin-right: 1em;
  background-color: #111;

  .talent {
    position: absolute;

    // Rows
    @for $i from 0 through 6 {
      &[data-row="#{$i}"] {
        top: $row-offset + (($i) * $row-distance);
      }
    }

    // Columns
    @for $i from 0 through 3 {
      &[data-col="#{$i}"] { 
        left: $col-offset + ($col-distance * $i); 
      }
    }
  }

  &:last-child {
    margin-right: 0;
  }

  &__header {
    text-align: center;

    h3 {
      margin-top: .75em;
      margin-bottom: .75em;
    }
  }

  &__body {
    position: relative;
    height: 520px;
    border: 1px solid black;
    background-size: cover;
    background-position: center;
  }
}