.main.brackets .cards-container .round-matchs.upper {
  grid-template-columns: repeat(7, 317px);
}

.main.brackets .cards-container .round-matchs.lower {
  grid-template-columns: repeat(8, 317px);
}

.main.brackets .cards-container .round-matchs.lower .card-container .border-card .card {
  background: #E1E3E4;
}

.main.brackets .cards-container .round-matchs.upper .cards:first-child .card-container .connector1,
.main.brackets .cards-container .round-matchs.lower .cards:nth-child(-n+2) .card-container .connector1,
.main.brackets .cards-container .round-matchs.upper .cards:first-child .card-container .connector3,
.main.brackets .cards-container .round-matchs.lower .cards:nth-child(-n+2) .card-container .connector3 {
  top: 50%;
  margin-top: 1px;
  height: 64px;
}

.main.brackets .cards-container .round-matchs.upper .cards:nth-child(2) .card-container .connector1,
.main.brackets .cards-container .round-matchs.upper .cards:nth-child(2) .card-container .connector3,
.main.brackets .cards-container .round-matchs.upper .cards:nth-child(3) .card-container .connector1,
.main.brackets .cards-container .round-matchs.upper .cards:nth-child(3) .card-container .connector3,
.main.brackets .cards-container .round-matchs.upper .cards:nth-child(4) .card-container .connector1,
.main.brackets .cards-container .round-matchs.upper .cards:nth-child(4) .card-container .connector3,
.main.brackets .cards-container .round-matchs.lower .cards:nth-child(4) .card-container .connector1,
.main.brackets .cards-container .round-matchs.lower .cards:nth-child(4) .card-container .connector3,
.main.brackets .cards-container .round-matchs.lower .cards:nth-child(6) .card-container .connector1,
.main.brackets .cards-container .round-matchs.lower .cards:nth-child(6) .card-container .connector3 {
  top: 50%;
  height: 90px;
}

.main.brackets .cards-container .round-matchs.upper .cards:nth-child(2) .card-container .connector3,
.main.brackets .cards-container .round-matchs.upper .cards:nth-child(3) .card-container .connector3,
.main.brackets .cards-container .round-matchs.upper .cards:nth-child(4) .card-container .connector3,
.main.brackets .cards-container .round-matchs.lower .cards:nth-child(4) .card-container .connector3,
.main.brackets .cards-container .round-matchs.lower .cards:nth-child(6) .card-container .connector3 {
  top: unset;
  bottom: 50%;
}

.main.brackets .cards-container .round-matchs.upper .cards:nth-child(3) .card-container .connector1,
.main.brackets .cards-container .round-matchs.upper .cards:nth-child(3) .card-container .connector3 {
  height: 160px;
}

.main.brackets .cards-container .round-matchs.upper .cards:nth-child(4) .card-container .connector1,
.main.brackets .cards-container .round-matchs.upper .cards:nth-child(4) .card-container .connector3 {
  height: 440px;
}

.main.brackets .cards-container .round-matchs.lower .cards:nth-child(4) .card-container .connector1,
.main.brackets .cards-container .round-matchs.lower .cards:nth-child(4) .card-container .connector3 {
  height: 110px;
}

.main.brackets .cards-container .round-matchs.lower .cards:nth-child(6) .card-container .connector1,
.main.brackets .cards-container .round-matchs.lower .cards:nth-child(6) .card-container .connector3 {
  height: 200px;
}

.main.brackets .cards-container .round-matchs.lower .cards:first-child .card-container .connector1,
.main.brackets .cards-container .round-matchs.lower .cards:first-child .card-container .connector3,
.main.brackets .cards-container .round-matchs.lower .cards:nth-child(3) .card-container .connector1,
.main.brackets .cards-container .round-matchs.lower .cards:nth-child(3) .card-container .connector3,
.main.brackets .cards-container .round-matchs.lower .cards:nth-child(5) .card-container .connector1,
.main.brackets .cards-container .round-matchs.lower .cards:nth-child(5) .card-container .connector3,
.main.brackets .cards-container .round-matchs.lower .cards:nth-child(+n+7) .card-container .connector1,
.main.brackets .cards-container .round-matchs.upper .cards:nth-child(+n+5) .card-container .connector1,
.main.brackets .cards-container .round-matchs.upper .cards:nth-child(+n+5) .card-container .connector3 {
  border-right: none;
}

.main.brackets .cards-container .round-matchs.lower .cards:last-child .card-container .connector1,
.main.brackets .cards-container .round-matchs.upper .cards:last-child .card-container .connector1 {
  border: none;
}

.main.brackets .cards-container .round-matchs.upper .cards:first-child .card-container .connector3,
.main.brackets .cards-container .round-matchs.lower .cards:nth-child(-n+2) .card-container .connector3 {
  top: unset;
  bottom: 50%;
  top: -3px;
  height: 35px;
}

.main.brackets .cards-container .cards:nth-child(+n+2) .card-container::before {
  margin-top: 1px;
}

.main.brackets .cards-container .cards .card-container .connector3 {
  bottom: 49px;
}

.cards .card-container .border-card .card {
  background: #f6f6f6;
}

.main.brackets .cards-container .round-matchs .cards {
  transition: margin-left .3s ease-in-out;
}

.main.brackets .cards-container .round-matchs .cards:last-child .vertical-line {
  display: none;
}

.main.brackets .cards-container {
  overflow: hidden;
}

@media screen and (min-width: 1024px) {

  .main.brackets .cards-container .round-matchs.upper {
    grid-template-columns: repeat(7, 364px);
  }
  
  .main.brackets .cards-container .round-matchs.lower {
    grid-template-columns: repeat(8, 364px);
  }

  .main.brackets .cards-container .round-matchs .cards span.vertical-line {
    right: 15px;
  }

  .main.brackets .cards-container .round-matchs.lower .cards:nth-child(3) .card-container .connector1,
  .main.brackets .cards-container .round-matchs.lower .cards:nth-child(5) .card-container .connector1,
  .main.brackets .cards-container .round-matchs.lower .cards:nth-child(+n+7) .card-container .connector1 {
    top: 56px;
  }

  .main.brackets .cards-container .round-matchs.lower .cards:nth-child(3) .card-container .connector3,
  .main.brackets .cards-container .round-matchs.lower .cards:nth-child(5) .card-container .connector3 {
    bottom: 53px;
  }

}