.project {
	width: calc(90vw - 10em);
	max-width: 48em;
	margin: 2em auto;
	padding: 2em 5em;
	background-color: var(--background-secondary);
	header {
		margin: 1em 0;
		h1 {
			margin: 0;
		}
		> p {
			font-size: 0.75em;
			opacity: 0.5;
			margin: 0;
		}
	}
	@media (max-width: 600px) {
		width: calc(90vw - 3em);
		margin: 0.5em auto;
		padding: 0.5em 1.5em;
	}

	ul {
		border-left: solid 0.25em var(--border-secondary);
		padding-left: 2em;
		margin-left: 0.5em;
	}

	li {
		padding: 0.2em 0;
	}

	li span.tag {
		display: inline-block; padding: 0.1em 0.5em;
		background: var(--background);
		font-family: monospace;
	}

	li span[data-type="feature"].tag {
		background: rgba(10, 106, 255, 0.4);
	}

	li span[data-type="fix"].tag {
		background: rgba(126, 245, 92, 0.4);
	}

	li span[data-type="bug"].tag {
		background: rgba(255, 83, 83, 0.4);
	}
	.gallery {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		flex-wrap: wrap;
		width: 100%;
		figure {
			min-width: 50%;
			width: 15em;
			max-width: calc(65vw);
			padding: 0;
			margin: 0;
			display: flex;
			align-items: center;
		}
		img {
			width: 95%;
			margin: 0.5em auto;
		}
	}
}