.tournament {
  width: 100%;
  box-sizing: content-box;
  display: flex;
}

.round {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex: 1 1 26%;
}

.round:last-child {
  flex-basis: 22%;
}

.round:first-child .match {
  margin: 10px 0;
  grid-row-gap: 5px;
}

.match {
  display: grid;
  grid-template-columns: auto min(50px, 4vw);
  grid-template-rows: auto auto;
  grid-column-gap: 0px;
  align-items: center;
  flex-grow: 1;
}

.player {
  font-family: arial;
  padding: min(10px, 1.5vw);
  background: #133a7c;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  font-size: min(14px, 2.65vw);
}

.player.winner {
  background: green;
}

.bracket-lines {
  position: relative;
  height: 100%;
  grid-area: 1 / 2 / 3 / 3;
}

.bracket-lines > svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}