#projects {
	margin-top: calc(6 * var(--spacing));
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: calc(4 * var(--spacing));
}

.project-lineitem {
	header { height: calc(36 * var(--spacing)) }

	.body {
		padding: calc(4 * var(--spacing));

		h2 { font-size: var(--text-lg) }

		.details {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: calc(1 * var(--spacing));
			font-size: var(--text-sm);
		}
	}
}

#project-details .body {
	padding: calc(3 * var(--spacing));
}

.empty-copy {
	max-width: 30%;
	text-align: center;
	font-size: var(--text-lg);
	margin: calc(30 * var(--spacing)) auto;

	a {
		text-decoration: underline;
		color: var(--bg-color-xdark);
	}
}

.project-details {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	gap: calc(8 * var(--spacing));
	padding-top: calc(4 * var(--spacing));

	> * {
		display: flex;
		flex-direction: column;
		gap: calc(2 * var(--spacing));
	}

	> *:nth-child(1) { grid-column: span 6 / span 6 }
	> *:nth-child(2) { grid-column: span 3 / span 3 }
	> *:nth-child(3) { grid-column: span 3 / span 3 }
}

.project-card {
	min-height: calc(60 * var(--spacing));
}

.project-moving-status {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 600;
	margin-bottom: calc(2 * var(--spacing));
}

.project-availability {
	text-align: center;
	margin-bottom: calc(2 * var(--spacing));

	p {
		font-size: var(--text-lg);
		font-weight: 600;
	}
}

.message-preview {
	background-color: var(--color-gray);
	border-radius: var(--rounded-lg);
	padding: calc(2 * var(--spacing));
}

.floorplan {
	details {
		border-radius: var(--radius-lg);
		border: 1px solid var(--bg-color-md);

		@media (width < 40rem) {
			background-color: var(--bg-color-light);
		}
	}
}

.floorplan-room {
	display: flex;
	gap: calc(6 * var(--spacing));
	margin-top: calc(2 * var(--spacing));

	> * {
		flex: 1;
	}

	.field {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: var(--bg-color-light);
		padding: calc(2 * var(--spacing));
		border: 1px solid var(--bg-color);
		border-radius: var(--rounded);
	}

	@media (width < 40rem) {
		flex-direction: column;

		.field {
			background-color: initial;
			padding: 0;
			border: 0;
			border-radius: 0;
		}

		.attachment {
			background-color: var(--bg-color-dark);
		}
	}
}

.risk-assessment {
	display: flex;
	gap: calc(6 * var(--spacing));

	> * {
		flex: 1;
	}

	@media (width < 40rem) {
		flex-direction: column;
	}
}

.risk-assessment-photo {
	width: 100%;
	max-height: calc(32 * var(--spacing));
	object-fit: cover;
}