.projects {
	container-name: projects;
	container-type: inline-size;

	--image-coming-soon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100"><text x="50%" y=".9em" style="font: bold 80px/1 system-ui, sans-serif; text-anchor: middle; fill-opacity: .4; text-transform: uppercase">Image Coming Soon</text></svg>');
	--image-coming-soon-background: radial-gradient(hsl(var(--gray) 90%), hsl(var(--gray) 60%));
	--footer-background: var(--color-gray-95);
}

.projects-list {
	display: grid;
	gap: 1em;

	@container (inline-size > 30em) {
		grid-template-columns: 1fr 1fr;
	}
}

.project {
	position: relative;
	display: flex;
	flex-flow: column;
	gap: .5em;
	container-name: projects;
	container-type: inline-size;
	border: 1px solid var(--color-gray-90);
	border-radius: .2rem;
	background: white;
	box-shadow: 0 0.1em 0.2em -0.05em var(--color-gray-30a);
	--padding: 1rem;
	font-size: 75%;
	order: calc(5 - var(--featured-weight, 0));

	.featured {
		aspect-ratio: 2 / 1;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		display: flex;
		flex-flow: column;
		align-items: center;
		justify-content: flex-end;

		width: 12ch;
		padding-bottom: .4em;
		box-sizing: border-box;
		clip-path: polygon(50% 0, 100% 100%, 0 100%);

		background: var(--color-orange);
		font: bold 75%/1 var(--font-sans);
		color: white;

		transform: rotate(-45deg) translateX(-50%);
		transform-origin: 0 0;

		&::before {
			content: "★";
			display: block;
			font-size: 200%;
			text-align: center;
			opacity: .5;
		}
	}

	& .image-container {
		position: relative;
		overflow: hidden;
		height: 8rem;

		& img {
			width: 100%;
			object-fit: cover;
			object-position: top;
		}
	}

	& .main-content {
		flex: 1;
		padding: var(--padding);
		padding-bottom: 0;

		& h4 {
			all: unset;

			font: 600 80%/1.1 var(--font-sans);
			text-transform: uppercase;
			letter-spacing: normal;
			color: var(--color-gray-60);
		}
	}

	& h3 {
		margin: 0;

		& > a {
			color: inherit;
		}

		& .released {
			margin-left: auto;
			color: hsl(var(--gray) 50%);
			font: italic .9em var(--font-serif);
			letter-spacing: normal;
		}
	}

	.project-meta {
		display: flex;
		gap: .4em;
		margin-bottom: 1em;

		> span {
			display: inline-block;
			vertical-align: .3em;
			padding: .3em .5em;
			border-radius: .2em;
			background: var(--color, var(--color-gray-50));
			color: white;
			font: bold 75%/1.1 var(--font-sans);
			text-transform: uppercase;

			&.mv-empty:not([mv-mode=edit]) {
				display: none;
			}
		}

		.type {
			.type-app & {
				--color: var(--color-accent);
			}

			.type-lib & {
				--color: var(--color-accent2);
			}
		}
	}

	& footer {
		background: var(--footer-background);
		display: flex;
		flex-wrap: wrap;
		gap: 1em;
		align-items: center;
		padding-inline: calc(var(--padding) - .2em);
		padding-block: calc(var(--padding) / 2);

		& a {
			mix-blend-mode: multiply;
			&:where(:not(:hover, .focus)) {
				color: inherit;
			}
		}

		& > :is(a, span) {
			white-space: nowrap;
			font: 500 90%/1.5 var(--font-sans);
			text-decoration: none;

			&::before,
			.stat::before {
				content: var(--icon);
				display: inline-block;
				margin-right: .3em;
				font: var(--icon-font);
				opacity: .4;
			}

			&.url {
				--icon: var(--icon-link);
			}

			&.repo {
				--icon: var(--icon-github);

				.stars {
					--icon: var(--icon-star);
					--icon-weight: bold;
				}
			}

			&.npm {
				--icon: var(--icon-npm);

				.downloads {
					--icon: var(--icon-arrow-down-to-line);
				}
			}

			.stat {
				display: inline-block;
				vertical-align: .1em;
				background: var(--color-gray-20a);
				padding: .2em .7em;
				border-radius: 99em;
				font-weight: 700;
				font-size: 75%;
				text-decoration: none;

				&:hover {
					background: var(--color-accent2);
					color: white;

					&::before {
						opacity: .7;
					}
				}

				&::before {
					content: var(--icon);
					display: inline-block;
					margin-right: .3em;
					font: var(--icon-font, var(--icon-font));
					font-weight:  var(--icon-weight, inherit);
					opacity: .4;
				}
			}
		}

		& > img {
			margin-left: auto;
		}
	}
}