@charset "utf-8";

.content-match-width {
		max-width: 62rem;
}

.matchsheet {
  grid-area: matchsheet;
  display: none;
}

.scorecards-grid {
  grid-area: scorecards;
  display: none;
	justify-content: center;
}

.sidebar {
  grid-area: sidebar;
}

.pairing-results {
	grid-area: pairing-results;
}

.pairings {
	display: none;
	grid-area: pairings;
}

.pairings-sidebar {
	display: grid;
	grid-area: pairings-sidebar;
}

.matches-in-pairings {
	display: grid;
	grid-area: matches-in-pairings;
}

.matches-in-pairings__grid {
	display: grid;
	grid-template-rows: 1fr 1fr 1fr;
	grid-row-gap: .5rem;
}

.content-container-grid {
  display: grid;
	grid-column-gap: 1rem;
	grid-template-columns: 1fr;
  grid-template-areas:
	 "sidebar"
	 "matches-in-pairings";
	grid-row-gap: .5rem;
}

.comp-table__stats {
	background-color: #FFF;
}

/* 544px */
@media (min-width: 34em) {
	.pairings {
		display: grid;
	}

	.pairings-sidebar {
		display: none;
	}

	.content-container-grid {
		grid-template-columns: 1fr 1fr;
	  grid-template-areas:
		 "sidebar matches-in-pairings"
		 "pairings pairings";
	}
}


/* 720px */
@media (min-width: 45em) {
  .matchsheet {
    display: block;
  }

  .scorecards-grid {
    display: grid;
  }

	.content-container-grid {
	  grid-template-areas:
		"matchsheet matchsheet"
		"scorecards scorecards"
		"sidebar matches-in-pairings"
		"pairings pairings";
	}
}

/* 992px */
@media (min-width: 62em) {
	.pairings {
		display: none;
	}

	.pairings-sidebar {
		display: grid;
	}

	.matches-in-pairings__grid {
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 1fr;
		grid-column-gap: .5rem;
	}

	.content-container-grid {
    grid-template-columns: 2fr 1fr;
		grid-template-areas:
		"matchsheet sidebar"
		"scorecards sidebar"
		"matches-in-pairings sidebar";
	}
}


/*===============
 * Responsive media queries for team roster boxes
=================*/
.stat-table__header--responsive-padding-on th:first-child,
.stat-table__body--responsive-padding-on td:first-child {
	padding-left: 3rem;
}

.stat-table__header--responsive-padding-on th:last-child,
.stat-table__body--responsive-padding-on td:last-child {
	padding-right: 3rem;
}

/* 320px */
@media (min-width: 20em) {
	.stat-table__header--responsive-padding-on th:first-child,
	.stat-table__body--responsive-padding-on td:first-child {
		padding-left: 4rem;
	}

	.stat-table__header--responsive-padding-on th:last-child,
	.stat-table__body--responsive-padding-on td:last-child {
		padding-right: 4rem;
	}
}

/* 544px */
@media (min-width: 34em) {
	.stat-table__header--responsive-padding-on th:first-child,
	.stat-table__body--responsive-padding-on td:first-child {
		padding-left: 10rem;
	}

	.stat-table__header--responsive-padding-on th:last-child,
	.stat-table__body--responsive-padding-on td:last-child {
		padding-right: 10rem;
	}
}

/* 992px */
@media (min-width: 62em) {
	.stat-table__header--responsive-padding-on th:first-child,
	.stat-table__body--responsive-padding-on td:first-child {
		padding-left: 3rem;
	}

	.stat-table__header--responsive-padding-on th:last-child,
	.stat-table__body--responsive-padding-on td:last-child {
		padding-right: 0.5rem;
	}
}