<h1>Tournament Bracket</h1>
<!--<div class="bracket">
  <section aria-labelledby="round-1">
    <h2 id="round-1">Round 1</h2>
    <ol>
      <li>
        <div>
          <span>Player 1</span>
          <span>Player 2</span>
          <span>Date: 01.01. 1pm</span>
          </div>
      </li>
      <li>
        <div>
          <span>Player 3</span>
          <span>Player 4</span>
          <span>Date: 01.01. 1.30pm</span>
        </div>
      </li>
      <li>
        <div>
          <span>Player 5</span>
          <span>Player 6</span>
          <span>Date: 01.01. 2pm</span>
        </div>
      </li>
      <li>
        <div>
          <span>Player 7</span>
          <span>Player 8</span>
          <span>Date: 01.01. 2.30pm</span>
        </div>
      </li>
      <li>
        <div>
          <span>Player 9</span>
          <span>Player 10</span>
          <span>Date: 01.01. 3pm</span>
        </div>
      </li>
      <li>
        <div>
          <span>Player 11</span>
          <span>Player 12</span>
          <span>Date: 01.01. 3.30pm</span>
        </div>
      </li>
      <li>
        <div>
          <span>Player 13</span>
          <span>Player 14</span>
          <span>Date: 01.01. 4pm</span>
        </div>
      </li>
      <li>
        <div>
          <span>Player 15</span>
          <span>Player 16</span>
          <span>Date: 01.01. 4.30pm</span>
        </div>
      </li>
    </ol>
  </section>
  <section aria-labelledby="round-2">
    <h2 id="round-2">Round 2</h2>
      <ol>
        <li>
          <div>
            <span>Player 1</span>
            <span>Player 3</span>
            <span>Date: 05.01. 1pm</span>
          </div>
        </li>
        <li>
          <div>
            <span>Player 5</span>
            <span>Player 7</span>
            <span>Date: 05.01. 1.30pm</span>
          </div>
        </li>
        <li>
          <div>
            <span>Player 9</span>
            <span>Player 11</span>
            <span>Date: 05.01. 2pm</span>
          </div>
        </li>
        <li>
          <div>
            <span>Player 13</span>
            <span>Player 15</span>
            <span>Date: 05.01. 2.30pm</span>
          </div>
        </li>
      </ol>
  </section>
  <section aria-labelledby="round-3">
    <h2 id="round-3">Round 3</h2>
    <ol>
      <li>
        <div>
          <span>Player 1</span>
          <span>Player 5</span>
          <span>Date: 07.01. 1pm</span>
        </div>
      </li>
      <li>
        <div>
          <span>Player 9</span>
          <span>Player 13</span>
          <span>Date: 07.01. 1.30pm</span>
        </div>
      </li>
    </ol>
  </section>
  <section aria-labelledby="round-4">
    <h2 id="round-4">Round 4</h2>
    <ol>
      <li>
        <div>
          <span>Player 1</span>
          <span>Player 9</span>
          <span>Date: 10.01. 1pm</span>
        </div>
      </li>
    </ol>
  </section>
  <section aria-labelledby="winner">
    <h2 id="winner">Winner</h2>
    <ol>
      <li>
        <div>
          <span>Player 1</span>
        </div>
      </li>
    </ol>
  </section>
</div>-->

<div class="bracket br-2">
  <section aria-labelledby="round-1">
    <h2 id="round-1">Round 1</h2>
    <ol>
      <li>
          <a href="#">Player 1</a>
          <a href="#">Player 2</a>
          <span>Date: 01.01. 1pm</a>

      </li>
      <li>
        <div>
          <a href="#">Player 3</a>
          <a href="#">Player 4</a>
          <span>Date: 01.01. 1.30pm</span>
        </div>
      </li>
      <li>
        <div>
          <a href="#">Player 5</a>
          <a href="#">Player 6</a>
          <span>Date: 01.01. 2pm</s>
        </div>
      </li>
      <li>
        <div>
          <a href="#">Player 7</a>
          <a href="#">Player 8</a>
          <span>Date: 01.01. 2.30pm</span>
        </div>
      </li>
      <li>
        <div>
          <a href="#">Player 9</a>
          <a href="#">Player 10</a>
          <span>Date: 01.01. 3pm</span>
        </div>
      </li>
      <li>
        <div>
          <a href="#">Player 11</a>
          <a href="#">Player 12</a>
          <span>Date: 01.01. 3.30pm</span>
        </div>
      </li>
      <li>
        <div>
          <a href="#">Player 13</a>
          <a href="#">Player 14</a>
          <span>Date: 01.01. 4pm</span>
        </div>
      </li>
      <li>
        <div>
          <a href="#">Player 15</a>
          <a href="#">Player 16</a>
          <span>Date: 01.01. 4.30pm</span>
        </div>
      </li>
    </ol>
  </section>
  <section aria-labelledby="round-2">
    <h2 id="round-2">Round 2</h2>
      <ol>
        <li>
          <div>
            <a href="#">Player 1</a>
            <a href="#">Player 3</a>
            <span>Date: 05.01. 1pm</span>
          </div>
        </li>
        <li>
          <div>
            <a href="#">Player 5</a>
            <a href="#">Player 7</a>
            <span>Date: 05.01. 1.30pm</span>
          </div>
        </li>
        <li>
          <div>
            <a href="#">Player 9</a>
            <a href="#">Player 11</a>
            <span>Date: 05.01. 2pm</span>
          </div>
        </li>
        <li>
          <div>
            <a href="#">Player 13</a>
            <a href="#">Player 15</a>
            <span>Date: 05.01. 2.30pm</span>
          </div>
        </li>
      </ol>
  </section>
  <section aria-labelledby="round-3">
    <h2 id="round-3">Round 3</h2>
    <ol>
      <li>
        <div>
          <a href="#">Player 1</a>
          <a href="#">Player 5</a>
          <span>Date: 07.01. 1pm</span>
        </div>
      </li>
      <li>
        <div>
          <a href="#">Player 9</a>
          <a href="#">Player 13</a>
          <span>Date: 07.01. 1.30pm</span>
        </div>
      </li>
    </ol>
  </section>
  <section aria-labelledby="round-4">
    <h2 id="round-4">Round 4</h2>
    <ol>
      <li>
        <div>
          <a href="#">Player 1</a>
          <a href="#">Player 9</a>
          <span>Date: 10.01. 1pm</span>
        </div>
      </li>
    </ol>
  </section>
  <section aria-labelledby="winner">
    <h2 id="winner">Winner</h2>
    <ol>
      <li>
        <div>
          <a href="#">Player 1</a>
        </div>
      </li>
    </ol>
  </section>
</div>

:root {
  --border: 1px solid black;
}

.bracket {
  display: flex;
  justify-content: space-between;
  margin-bottom: 100px;
  overflow: visible;
  width: 100%;
}

section {
  max-width: 200px;
  min-width: 100px;
  padding: 0 20px 0 10px;
  width: 17%;
}

ol {
  display: flex;
  flex-flow: row wrap;
  /*list-style-type: "";*/
  margin: 0;
  min-height: 100%;
  padding: 0;
}

li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 20px 0;
  position: relative;
  width: 100%;
}

div:not(.bracket) {
    border: var(--border);
}

a, span {
  display: block;
}

section:not(:nth-child(4), :last-child) {
  & li:after, li:before {
    content: "";
    display: block;
    position: absolute;
  }

  & li:after {
    right: -16px;
    width: 15px;
  }

  & li:nth-child(even):after {
    border-bottom: var(--border);
    border-bottom-right-radius: 0.3em;
    border-right: var(--border);
    bottom: 50%;
    height: 80%;
  }

  & li:nth-child(odd):after {
    border-right: var(--border);
    border-top: var(--border);
    border-top-right-radius: 0.3em;
    height: 80%;
    top: 50%;
  }

  & li:nth-child(odd):before {
    border-top: var(--border);
    bottom: -32%;
    right: -27px;
    width: 12px;
  }
}

section:nth-child(4) li:before {
  border-top: var(--border);
  bottom: 50%;
  content: "";
  display: block;
  position: absolute;
  right: -12px;
  width: 12px;
}