src/style.css

.mrs-grid-player {
  font-size: x-small;
  margin-bottom: 5px;
  padding-left: 4px;
  padding-right: 4px;
}

.tier {
  text-align: center;
}

.timeslot {
  text-align: center;
}

.tier1 {
  border: 2px solid blue;
}
.tier2 {
  border: 2px solid gold;
}

.tier3 {
  border: 2px solid silver;
}

.tier4 {
  border: 2px solid brown;
}

.drop-player {
  color: red;
}

.light-hold-player {
  color: yellow;
}

.hold-player {
  color: rgba(68, 235, 62, 0.774);
}

.playerslot {
  border-left: 1px solid white;
  border-right: 1px solid white;
}

.grid-legend {
  color: white;
  border: 1px solid white;
  display: flex;
  gap: 5px;
  justify-content: center;
  font-size: x-small;
}

.grid-container-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(9, auto);
  grid-column-gap: 0px;
  grid-row-gap: 10px;
  color: white;
  
  .timeslot1 { grid-area: 1 / 1 / 2 / 2; }
  .timeslot2 { grid-area: 1 / 2 / 2 / 3; }
  .timeslot3 { grid-area: 1 / 3 / 2 / 4; }
  .timeslot4 { grid-area: 1 / 4 / 2 / 5; }
  .timeslot5 { grid-area: 1 / 5 / 2 / 6; }
  .timeslot6 { grid-area: 1 / 6 / 2 / 7; }
  .tier1 { grid-area: 2 / 1 / 3 / 7; }
  .playerslot1 { grid-area: 3 / 1 / 4 / 2; }
  .playerslot2 { grid-area: 3 / 2 / 4 / 3; }
  .playerslot3 { grid-area: 3 / 3 / 4 / 4; }
  .playerslot4 { grid-area: 3 / 4 / 4 / 5; }
  .playerslot5 { grid-area: 3 / 5 / 4 / 6; }
  .playerslot6 { grid-area: 3 / 6 / 4 / 7; }
  .tier2 { grid-area: 4 / 1 / 5 / 7; }
  .playerslot7 { grid-area: 5 / 1 / 6 / 2; }
  .playerslot8 { grid-area: 5 / 2 / 6 / 3; }
  .playerslot9 { grid-area: 5 / 3 / 6 / 4; }
  .playerslot10 { grid-area: 5 / 4 / 6 / 5; }
  .playerslot11 { grid-area: 5 / 5 / 6 / 6; }
  .playerslot12 { grid-area: 5 / 6 / 6 / 7; }
  .tier3 { grid-area: 6 / 1 / 7 / 7; }
  .playerslot13 { grid-area: 7 / 1 / 8 / 2; }
  .playerslot14 { grid-area: 7 / 2 / 8 / 3; }
  .playerslot15 { grid-area: 7 / 3 / 8 / 4; }
  .playerslot16 { grid-area: 7 / 4 / 8 / 5; }
  .playerslot17 { grid-area: 7 / 5 / 8 / 6; }
  .playerslot18 { grid-area: 7 / 6 / 8 / 7; }
  .tier4 { grid-area: 8 / 1 / 9 / 7; }
  .playerslot19 { grid-area: 9 / 1 / 10 / 2; }
  .playerslot20 { grid-area: 9 / 2 / 10 / 3; }
  .playerslot21 { grid-area: 9 / 3 / 10 / 4; }
  .playerslot22 { grid-area: 9 / 4 / 10 / 5; }
  .playerslot23 { grid-area: 9 / 5 / 10 / 6; }
  .playerslot24 { grid-area: 9 / 6 / 10 / 7; }

}

.grid-container-7 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(9, auto);
  grid-column-gap: 0px;
  grid-row-gap: 10px;
  color: white;
  
  .timeslot1 { grid-area: 1 / 1 / 2 / 2; }
  .timeslot2 { grid-area: 1 / 2 / 2 / 3; }
  .timeslot3 { grid-area: 1 / 3 / 2 / 4; }
  .timeslot4 { grid-area: 1 / 4 / 2 / 5; }
  .timeslot5 { grid-area: 1 / 5 / 2 / 6; }
  .timeslot6 { grid-area: 1 / 6 / 2 / 7; }
  .timeslot7 { grid-area: 1 / 7 / 2 / 8; }
  .tier1 { grid-area: 2 / 1 / 3 / 8; }
  .playerslot1 { grid-area: 3 / 1 / 4 / 2; }
  .playerslot2 { grid-area: 3 / 2 / 4 / 3; }
  .playerslot3 { grid-area: 3 / 3 / 4 / 4; }
  .playerslot4 { grid-area: 3 / 4 / 4 / 5; }
  .playerslot5 { grid-area: 3 / 5 / 4 / 6; }
  .playerslot6 { grid-area: 3 / 6 / 4 / 7; }
  .playerslot7 { grid-area: 3 / 7 / 4 / 8; }
  .tier2 { grid-area: 4 / 1 / 5 / 8; }
  .playerslot8 { grid-area: 5 / 1 / 6 / 2; }
  .playerslot9 { grid-area: 5 / 2 / 6 / 3; }
  .playerslot10 { grid-area: 5 / 3 / 6 / 4; }
  .playerslot11 { grid-area: 5 / 4 / 6 / 5; }
  .playerslot12 { grid-area: 5 / 5 / 6 / 6; }
  .playerslot13 { grid-area: 5 / 6 / 6 / 7; }
  .playerslot14 { grid-area: 5 / 7 / 6 / 8; }
  .tier3 { grid-area: 6 / 1 / 7 / 8; }
  .playerslot15 { grid-area: 7 / 1 / 8 / 2; }
  .playerslot16 { grid-area: 7 / 2 / 8 / 3; }
  .playerslot17 { grid-area: 7 / 3 / 8 / 4; }
  .playerslot18 { grid-area: 7 / 4 / 8 / 5; }
  .playerslot19 { grid-area: 7 / 5 / 8 / 6; }
  .playerslot20 { grid-area: 7 / 6 / 8 / 7; }
  .playerslot21 { grid-area: 7 / 7 / 8 / 8; }
  .tier4 { grid-area: 8 / 1 / 9 / 8; }
  .playerslot22 { grid-area: 9 / 1 / 10 / 2; }
  .playerslot23 { grid-area: 9 / 2 / 10 / 3; }
  .playerslot24 { grid-area: 9 / 3 / 10 / 4; }
  .playerslot25 { grid-area: 9 / 4 / 10 / 5; }
  .playerslot26 { grid-area: 9 / 5 / 10 / 6; }
  .playerslot27 { grid-area: 9 / 6 / 10 / 7; }
  .playerslot28 { grid-area: 9 / 7 / 10 / 8; }

}