#jobs {
	> header {
		@media (width < 40rem) {
		}
	}
}

#calendar {
	/* TODO: this is not great CSS */
	height: 70vh;
}

.job-time {
	display: flex;
	align-items: center;
	gap: calc(3 * var(--spacing));
	font-size: var(--text-base);
	font-weight: 600;

	> .hr {
		height: 1px;
		flex-grow: 1;
		background-color: var(--bg-color-dark);
	}
}

.job-lineitem {
	border-radius: var(--rounded-md);

	> header {
		color: white;
		font-size: var(--text-base);
		text-transform: uppercase;
		padding: calc(2.4 * var(--spacing)) calc(4 * var(--spacing));
	}

	> ul {
		padding: calc(4 * var(--spacing));
		background-color: white;
		border-radius: var(--rounded-md);

		> li {
			margin-bottom: calc(3 * var(--spacing));
			&:last-child { margin-bottom: 0 }
		}
	}

	&.green {
		border: 2px solid var(--color-emerald);
		> header { background-color: var(--color-emerald) }
	}

	&.orange {
		border: 2px solid var(--color-orange);
		> header { background-color: var(--color-orange) }
	}

	&.blue {
		border: 2px solid var(--color-sky);
		> header { background-color: var(--color-sky) }
	}
}