<header>
  <ol>
    <li>Round 1 <br/><span>Mar 16/17</span></li>
    <li>Round 2 <br/><span>Mar 18/19</span></li>
    <li>Sweet 16 <br/><span>Mar 23/24</span></li>
    <li>Elite 8 <br/><span>Mar 25/26</span></li>
    <li>Final 4 <br/><span>Apr 1/3</span></li>
    <li>Elite 8 <br/><span>Mar 25/26</span></li>
    <li>Sweet 16<br/><span>Mar 23/24</span></li>
    <li>Round 2 <br/><span>Mar 18/19</span></li>
    <li>Round 1 <br/><span>Mar 16/17</span></li>
  </ol>
</header>
<div class="bracket">
  <figure class="logo"><img src="https://assets.codepen.io/732/march-madness.png" alt="" /></figure>
  <div class="region region-1">
  <!-- Region 1 Round 1-->
    <ul class="matchup matchup-1">
      <li class="team team-top winner">1 Alabama</li>
      <li class="team team-bottom">16 Texas A&M-CC</li>
    </ul>

    <ul class="matchup matchup-2">
      <li class="team team-top winner">8 Maryland</li>
      <li class="team team-bottom">9 West Virginia</li>
    </ul>

    <ul class="matchup matchup-3">
      <li class="team team-top winner">5 SD State</li>
      <li class="team team-bottom">12 Charleston</li>
    </ul>

    <ul class="matchup matchup-4">
      <li class="team team-top">4 Virginia</li>
      <li class="team team-bottom winner">13 Furman</li>
    </ul>

    <ul class="matchup matchup-5">
      <li class="team team-top winner">6 Creighton</li>
      <li class="team team-bottom">11 NC State</li>
    </ul>

    <ul class="matchup matchup-6">
      <li class="team team-top winner">3 Baylor</li>
      <li class="team team-bottom">14 UCSB</li>
    </ul>

    <ul class="matchup matchup-7">
      <li class="team team-top winner">7 Missouri</li>
      <li class="team team-bottom">10 Utah State</li>
    </ul>

    <ul class="matchup matchup-8">
      <li class="team team-top">2 Arizona</li>
      <li class="team team-bottom winner">15 Princeton</li>
    </ul>
  
  <!-- Region 1 Round 2 -->
    <ul class="matchup matchup-33">
      <li class="team team-top winner">1 Alabama</li>
      <li class="team team-bottom">8 Maryland</li>
    </ul>
  
    <ul class="matchup matchup-34">
      <li class="team team-top winner">5 SD State</li>
      <li class="team team-bottom">13 Furman</li>
    </ul>
  
    <ul class="matchup matchup-35">
      <li class="team team-top winner">6 Creighton</li>
      <li class="team team-bottom">3 Baylor</li>
    </ul>
  
    <ul class="matchup matchup-36">
      <li class="team team-top">7 Missouri</li>
      <li class="team team-bottom winner">15 Princeton</li>
    </ul>
  
  <!-- Region 1 Sweet 16 -->
    <ul class="matchup matchup-49">
      <li class="team team-top">1 Alabama</li>
      <li class="team team-bottom winner">5 SD State</li>
    </ul>
    <ul class="matchup matchup-50">
      <li class="team team-top winner">6 Creighton</li>
      <li class="team team-bottom">15 Princeton</li>
    </ul>
  <!-- End Region 1 Sweet 16 -->
  
  <!-- Region 1 Final -->
    <ul class="matchup matchup-57">
      <li class="team team-top winner">5 SD State</li>
      <li class="team team-bottom">6 Creighton</li>
    </ul>
    
  </div>
  <div class="region-2 region">
    <!-- Region 2 Round 1 -->
    <ul class="matchup matchup-9">
      <li class="team team-top">1 Purdue</li>
      <li class="team team-bottom winner">16 FDU</li>
    </ul>
  
    <ul class="matchup matchup-10">
      <li class="team team-top">8 Memphis</li>
      <li class="team team-bottom winner">9 FAU</li>
    </ul>

    <ul class="matchup matchup-11">
      <li class="team team-top winner">5 Duke</li>
      <li class="team team-bottom">12 Oral Roberts</li>
    </ul>

    <ul class="matchup matchup-12">
      <li class="team team-top winner">4 Tennessee</li>
      <li class="team team-bottom">13 LA Lafeyette</li>
    </ul>

    <ul class="matchup matchup-13">
      <li class="team team-top winner">6 Kentucky</li>
      <li class="team team-bottom">11 Providence</li>
    </ul>

    <ul class="matchup matchup-14">
      <li class="team team-top winner">3 Kansas State</li>
      <li class="team team-bottom">14 Montana State</li>
    </ul>

    <ul class="matchup matchup-15">
      <li class="team team-top winner">7 Michigan State</li>
      <li class="team team-bottom">10 USC</li>
    </ul>

    <ul class="matchup matchup-16">
      <li class="team team-top winner">2 Marquette</li>
      <li class="team team-bottom">15 Vermont</li>
    </ul>
    <!-- End Region 2 Round 1 -->
    
    <!-- Region 2 Round 2 -->
    <ul class="matchup matchup-37">
      <li class="team team-top">16 FDU</li>
      <li class="team team-bottom winner">9 FAU</li>
    </ul>

    <ul class="matchup matchup-38">
      <li class="team team-top">5 Duke</li>
      <li class="team team-bottom winner">4 Tennessee</li>
    </ul>

    <ul class="matchup matchup-39">
      <li class="team team-top">6 Kentucky</li>
      <li class="team team-bottom winner">3 Kansas State</li>
    </ul>

    <ul class="matchup matchup-40">
      <li class="team team-top winner">7 Michigan State</li>
      <li class="team team-bottom">1 Marquette</li>
    </ul>
    <!-- End Region 2 Round 2 -->
    
    <!-- Region 2 Sweet 16 -->
    <ul class="matchup matchup-51">
      <li class="team team-top winner">9 FAU</li>
      <li class="team team-bottom">4 Tennesssee</li>
    </ul>
    <ul class="matchup matchup-52">
      <li class="team team-top winner">3 Kansas State</li>
      <li class="team team-bottom">7 Michigan State</li>
    </ul>
    <!-- End Region 2 Sweet 16 -->
    
    <!-- Region 2 Final -->
    <ul class="matchup matchup-58">
      <li class="team team-top winner">9 FAU</li>
      <li class="team team-bottom">3 Kansas State</li>
    </ul>
    
  </div>
  <div class="region-3 region">
  
    <!-- Region 3 Round 1 -->
    <ul class="matchup matchup-17">
      <li class="team team-top winner">1 Houston</li>
      <li class="team team-bottom">16 Morthern Kentucky</li>
    </ul>

    <ul class="matchup matchup-18">
      <li class="team team-top">8 Iowa</li>
      <li class="team team-bottom winner">9 Auburn</li>
    </ul>

    <ul class="matchup matchup-19">
      <li class="team team-top winner">5 Miami</li>
      <li class="team team-bottom">12 Drake</li>
    </ul>

    <ul class="matchup matchup-20">
      <li class="team team-top winner">4 Indiana</li>
      <li class="team team-bottom">13 Kent State</li>
    </ul>

    <ul class="matchup matchup-21">
      <li class="team team-top">6 Iowa State</li>
      <li class="team team-bottom winner">11 Pitt</li>
    </ul>

    <ul class="matchup matchup-22">
      <li class="team team-top winner">3 Xavier</li>
      <li class="team team-bottom">14 Kennesaw State</li>
    </ul>

    <ul class="matchup matchup-23">
      <li class="team team-top">7 Teaxs A&M</li>
      <li class="team team-bottom winner">10 Penn State</li>
    </ul>

    <ul class="matchup matchup-24">
      <li class="team team-top winner">2 Texas</li>
      <li class="team team-bottom">15 Colgate</li>
    </ul>
    <!-- End Region 3 Round 1 -->
    
    <!-- Region 3 Round 2 -->
    <ul class="matchup matchup-41">
      <li class="team team-top winner">1 Houston</li>
      <li class="team team-bottom">9 Auburn</li>
    </ul>

    <ul class="matchup matchup-42">
      <li class="team team-top winner">5 Miami</li>
      <li class="team team-bottom">4 Indiana</li>
    </ul>

    <ul class="matchup matchup-43">
      <li class="team team-top">11 Pitt</li>
      <li class="team team-bottom winner">3 Xavier</li>
    </ul>

    <ul class="matchup matchup-44">
      <li class="team team-top">10 Penn State</li>
      <li class="team team-bottom winner">2 Texas</li>
    </ul>
    <!-- End Region 3 Round 2 -->
    <!-- Region 3 Sweet 16 -->
    <ul class="matchup matchup-53">
      <li class="team team-top">1 Houston</li>
      <li class="team team-bottom winner">5 Miami</li>
    </ul>
    <ul class="matchup matchup-54">
      <li class="team team-top">3 Xavier</li>
      <li class="team team-bottom winner">2 Texas</li>
    </ul>
    <!-- Region 3 Final -->
    <ul class="matchup matchup-59">
      <li class="team team-top winner">5 Miami</li>
      <li class="team team-bottom">2 Texas</li>
    </ul>
  </div>
  
  <div class="region-4 region">
    <!-- Region 4 Round 1 -->
    <ul class="matchup matchup-25">
      <li class="team team-top winner">1 Kansas</li>
      <li class="team team-bottom">16 Howard</li>
    </ul>

    <ul class="matchup matchup-26">
      <li class="team team-top winner">8 Arkansas</li>
      <li class="team team-bottom">9 Illinois</li>
    </ul>

    <ul class="matchup matchup-27">
      <li class="team team-top winner">5 St. Mary's</li>
      <li class="team team-bottom">12 VCU</li>
    </ul>

    <ul class="matchup matchup-28">
      <li class="team team-top winner">4 UConn</li>
      <li class="team team-bottom">13 Iola</li>
    </ul>

    <ul class="matchup matchup-29">
      <li class="team team-top winner">6 TCU</li>
      <li class="team team-bottom">11 Arizona State</li>
    </ul>

    <ul class="matchup matchup-30">
      <li class="team team-top winner">3 Gonzaga</li>
      <li class="team team-bottom">14 Grand Canyon</li>
    </ul>

    <ul class="matchup matchup-31">
      <li class="team team-top winner">7 Northwestern</li>
      <li class="team team-bottom">10 Boise State</li>
    </ul>

    <ul class="matchup matchup-32">
      <li class="team team-top winner">2 UCLA</li>
      <li class="team team-bottom">15 UNC Asheville</li>
    </ul>
    <!-- End Region 4 Round 1 -->
    
    <!-- Region 4 Round 2 -->
    <ul class="matchup matchup-45">
      <li class="team team-top">1 Kansas</li>
      <li class="team team-bottom winner">8 Arkansas</li>
    </ul>

    <ul class="matchup matchup-46">
      <li class="team team-top">5 St. Mary's</li>
      <li class="team team-bottom winner">4 UConn</li>
    </ul>

    <ul class="matchup matchup-47">
      <li class="team team-top">6 TCU</li>
      <li class="team team-bottom winner">3 Gonzaga</li>
    </ul>

    <ul class="matchup matchup-48">
      <li class="team team-top">7 Northwestern</li>
      <li class="team team-bottom winner">2 UCLA</li>
    </ul>
    <!-- End Region 4 Round 2 -->
    <!-- Region 4 Sweet 16 -->
    <ul class="matchup matchup-55">
      <li class="team team-top">8 Arkansas</li>
      <li class="team team-bottom winner">4 UConn</li>
    </ul>
    <ul class="matchup matchup-56">
      <li class="team team-top winner">3 Gonzaga</li>
      <li class="team team-bottom">2 UCLA</li>
    </ul>
    <!-- End Region 4 Sweet 16 -->
    <!-- Region 4 Final -->
    <ul class="matchup matchup-60">
      <li class="team team-top winner">4 UConn</li>
      <li class="team team-bottom">3 Gonzaga</li>
    </ul>
  </div>
  <div class="final-four">
    <!-- Final Four Game 1-->
    <ul class="matchup matchup-61">
      <li class="team team-top">5 SD State</li>
      <li class="team team-bottom">9 FAU</li>
    </ul>
    <!-- Final Four Game 2-->
    <ul class="matchup matchup-62">
      <li class="team team-top">5 Miami</li>
      <li class="team team-bottom ">4 UConn</li>
    </ul>

    <ul class="matchup championship">
      <li class="team team-top"></li>
      <li class="team team-bottom"></li>
    </ul>
  </div>
</div>

body {
  background-color: #eee;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/732/wood-floor.jpg) no-repeat;
  background-size: cover;
  font-family: 'Signika', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
header {
  margin-bottom:50px;
  ol {
    margin:0;
    padding:0;
    list-style-type: none;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-gap: 0 6px;
    width:1200px;
    margin: 0 auto;
    overflow: scroll;
    
    @media (min-width:1400px) {
      grid-template-columns: repeat(11, 1fr);
      width:1400px;
      
      li:nth-child(5) {
        grid-column: span 3;
      }
    }
    
  }
  
  li {
    background-color:darken(#0A6FAC, 20%);
    color: white;
    font-size:11px;
    font-weight:600;
    text-align:center;
    line-height:16px;
    letter-spacing:2px;
    text-transform: uppercase;
    padding:3px 0;
    
    span {
      font-size:10px;
      font-weight:400;
    }
  }
}
.bracket {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(94,8px);
  grid-gap: 2px 6px;
  grid-auto-flow: column;
  margin: 20px auto;
  width:1200px;
  overflow-y:scroll;
  
  @media (min-width:1400px) {
    grid-template-columns: repeat(11, 1fr);
    width:1400px;
  }
} 

.region {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(46,8px);
  grid-gap: 2px 6px;
  grid-auto-flow: column;
}

.region-1 {
  grid-column: 1 / span 4;
  grid-row: 1 / span 47;
}

.final-four {
  grid-column: 4 / span 3;
  grid-row: 45 / span 6;
  
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(6,8px);
  grid-gap: 2px 6px;
  grid-auto-flow: column;
  
  @media (min-width:1400px) {
    grid-column: 5 / span 3;
  }
}

.region-2 {
  grid-column: 1 / span 4;
  grid-row: 49 / span 47
}

.region-3 {
  grid-column: -5 / span 4;
  grid-row: 1 / span 47;
}

.region-4 {
  grid-column: -5 / span 4;
  grid-row: 49 / span 47
}


ul {
  margin:0;
  padding:0;
  list-style-type:none;
}

.team {
  background-color: white;
  font-size:11px;
  height:18px;
  line-height:18px;
  padding:0 5px;
}

.team-top {
  margin-bottom:2px;
}

.winner {
  background-color:#005eb8;
  color: white;
}

.matchup {
  grid-column:span 1;
  grid-row:span 4;
  box-shadow:1px 1px 10px rgba(0,0,0,.5);
}

.matchup-1,
.matchup-9 {
  grid-column:span 1;
  grid-row:span 4;
}

.matchup-2,
.matchup-10 {
  grid-row: 7 / span 4;
}

.matchup-3,
.matchup-11 {
  grid-row: 13 / span 4;
}

.matchup-4,
.matchup-12 {
  grid-row: 19 / span 4;
}

.matchup-5,
.matchup-13 {
  grid-row: 25 / span 4;
}

.matchup-6,
.matchup-14 {
  grid-row: 31 / span 4;
}

.matchup-7,
.matchup-15 {
  grid-row: 37 / span 4;
}

.matchup-8,
.matchup-16 {
  grid-row: 43 / span 4;
}

.matchup-17,
.matchup-25 {
  grid-column: -2/span 1;
  grid-row: 1/span 4;
}

.matchup-18,
.matchup-26 {
  grid-column:-2/span 1;
  grid-row:7/span 4;
}

.matchup-19,
.matchup-27 {
  grid-column:-2/span 1;
  grid-row:13/span 4;
}

.matchup-20,
.matchup-28 {
  grid-column:-2/span 1;
  grid-row:19/span 4;
}

.matchup-21,
.matchup-29 {
  grid-column:-2/span 1;
  grid-row:25/span 4;
}

.matchup-22,
.matchup-30 {
  grid-column:-2/span 1;
  grid-row:31/span 4;
}

.matchup-23,
.matchup-31 {
  grid-column:-2/span 1;
  grid-row:37/span 4;
}

.matchup-24,
.matchup-32 {
  grid-column:-2/span 1;
  grid-row:43/span 4;
}

.matchup-33,
.matchup-37 {
  grid-column: 2 / span 1;
  grid-row: 4 / span 4;
}

.matchup-34,
.matchup-38 {
  grid-column: 2 / span 1;
  grid-row: 16 / span 4;
}

.matchup-35,
.matchup-39 {
  grid-column: 2 / span 1;
  grid-row: 28 / span 4;
}

.matchup-36,
.matchup-40 {
  grid-column: 2 / span 1;
  grid-row: 40 / span 4;
}

.matchup-41,
.matchup-45 {
  grid-column: -3 / span 1;
  grid-row: 4 / span 4;
}

.matchup-42,
.matchup-46 {
  grid-column: -3 / span 1;
  grid-row: 16 / span 4;
}

.matchup-43,
.matchup-47 {
  grid-column: -3 / span 1;
  grid-row: 28 / span 4;
}

.matchup-44,
.matchup-48 {
  grid-column: -3 / span 1;
  grid-row: 40 / span 4;
}

.matchup-49,
.matchup-51 {
  grid-column: 3 / span 1;
  grid-row: 10 / span 4;
}

.matchup-50,
.matchup-52 {
  grid-column: 3 / span 1;
  grid-row: 34 / span 4;
}

.matchup-53,
.matchup-55 {
  grid-column: -4 / span 1;
  grid-row: 10 / span 4;
}

.matchup-54,
.matchup-56 {
  grid-column: -4 / span 1;
  grid-row: 34 / span 4;
}

.matchup-57,
.matchup-58 {
  grid-column: 4 / span 1;
  grid-row: 22 / span 4;
}

.matchup-59,
.matchup-60 {
  grid-column: -5 / span 1;
  grid-row: 22 / span 4;
}

.matchup-61 {
  grid-column: 1 / span 1;
  grid-row: 2/ span 4;
}

.matchup-62 {
  grid-column: 3 / span 1;
  grid-row: 2/ span 4;
}

.championship {
  grid-column: 2 / span 1;
  grid-row: 1/ span 4;
  .team {
    height:28px;
    line-height: 28px;
  }
}

.logo {
  grid-column: 4 / span 3;
  grid-row: 1;
  margin:0;
  
  @media (min-width: 1400px) {
    grid-column: 5 / span 3;
  }
  
  img {
  //  max-width: 100%;
    display: block;
    max-width: 350px;
    margin-inline: auto;
  }
}