@import url("glitchcandy.css");

.project-card {
	background-color: var(--bg-alt);
	padding: 0.75em;
	max-width: 75%;
	min-width: 20em;
	margin-right: auto;
	margin-left: auto;
	margin-top: 1em;
	margin-bottom: 1em;
	display: grid;
	grid-template-rows: auto auto;
	grid-template-columns: 10em auto;
	grid-column-gap: 2em;
}
.project-card .project-image {
	grid-row-start: 1;
	grid-row-end: 3;
	grid-column-start: 1;
	grid-column-end: 1;
	width: 8em;
	height: 8em;
	justify-self: start;
	align-self: center;
	border: solid 0.1em var(--fg-alt);
	padding: 1em;
}
.project-card .project-name {
	background-color: var(--bg-alt);
	text-decoration: none;
	font-size: 2.5em;
	grid-row: 1 / 2;
	grid-column: 2 / 3;
	justify-self: start;
}
.project-card .project-desc {
	background-color: var(--bg-alt);
	margin: 0;
	grid-row: 2 / 3;
	grid-column: 2 / 3;
}
.project-desc a {
	background-color: var(--bg-alt);
}

@media (max-width: 720px) {
	.project-card {
		justify-items: center;
		grid-template-rows: auto auto auto;
		grid-template-columns: auto;
		row-gap: 1em;
	}
	.project-card .project-image {
		justify-self: center;
		grid-row: 2 / 3;
		grid-column: 1 / 1;
	}
	.project-card .project-name {
		font-size: 2.5em;
		justify-self: center;
		grid-row-start: 1 / 2;
		grid-column: 1 / 1;
	}
	.project-card .project-desc {
		margin: auto 0.5em;
		background-color: var(--bg-alt);
		justify-self: center;
		grid-row: 3 / 4;
		grid-column: 1 / 1;
	}
}