#project-tasks {
	max-width: 50%;

	@media (width < 40rem) {
		max-width: initial;
	}
}

.task-list {
	display: flex;
	flex-direction: column;
	gap: calc(4 * var(--spacing));
	margin-top: calc(4 * var(--spacing));
}

.task-lineitem {
	position: relative;

	.icon {
		position: absolute;
		top: calc(3 * var(--spacing));
		width: calc(5 * var(--spacing));
		height: calc(5 * var(--spacing));

		&:nth-of-type(1) {
			left: calc(3 * var(--spacing));
		}

		&:nth-of-type(2) {
			right: calc(3 * var(--spacing));
		}
	}

	.body {
		margin-left: calc(8 * var(--spacing));
		display: flex;
		flex-direction: column;
		gap: calc(2 * var(--spacing));
	}
}