.schedule {
		width: 100%;
		border-collapse: collapse;
		border-spacing: 0;
	}

	.fixed-table-layout {
		table-layout: fixed;
	}

	.schedule th {
		background-color: var(--peach-400);
		color: white;
		font-weight: bold;
		text-align: initial;
	}

	.schedule th:hover {
		cursor: pointer;
	}

	.schedule td,
	.schedule th {
		padding-block: calc(var(--size) / 3);
		padding-inline: calc(var(--size) / 2);
	}

	.schedule tr {
		border: 1px solid #ccc;
	}

	.schedule tr:nth-child(odd) {
		background-color: #f6f6f6;
	}

	.schedule-header {
		margin-block-start: calc(var(--size) * 2);
	}

	.schedule-header .filter {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: calc(var(--size) / 3);
		margin-block-start: calc(var(--size));
	}

	@media only screen and (max-width: 47.9em) {
		/* Force table to not be like tables anymore */
		table,
		thead,
		tbody,
		th,
		td,
		tr {
			display: grid;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

		.schedule-classes tr {
			padding-block: var(--size);
		}

		.schedule-classes td::before {
			font-weight: bold;
		}

		.schedule-classes td:nth-of-type(1)::before {
			content: 'Course: ';
		}
		.schedule-classes td:nth-of-type(2)::before {
			content: 'Teacher: ';
		}
		.schedule-classes td:nth-of-type(3)::before {
			content: 'Day: ';
		}
		.schedule-classes td:nth-of-type(4)::before {
			content: 'Time (ET): ';
		}
		.schedule-classes td:nth-of-type(5)::before {
			content: 'Grade: ';
		}
		.schedule-classes td:nth-of-type(6)::before {
			content: 'Semester: ';
		}
	}