a {
	text-decoration: none;
}

.projects {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: calc(100vh - var(--theme__gap-4));
	margin-top: 8rem;
	padding: 0 2rem;
}

.projects__container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 20px;
	width: 100%;
	max-width: 1500px;
	justify-content: center;
}

.projects__card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	justify-content: center;
	align-items: center;
	border: 1px solid rgb(from var(--theme__color-fore) R G B / 30%);
	background: rgb(from var(--theme__color-back) R G B / 50%);
	border-radius: 3px;
	width: 100%;
	max-width: 500px;
	height: 500px;
	text-align: center;
	color: var(--theme__color-accent);
	font-size: 2rem;
	user-select: none;
	transform: scale3d(.98, .98, .98);
	transition: all .1s ease-in-out;
}

.projects__card:hover {
	border-color: rgb(from var(--theme__color-fore) R G B / 50%);
	transform: scale3d(1, 1, 1);
}

.projects__technologies {
	display: flex;
	flex-direction: row;
	gap: 1rem;
	justify-content: center;
	align-items: center;
	height: 50px;
}

.projects__technologies > img {
	width: auto;
	height: 50px;
}

.projects__info {
	margin-top: 0.5rem;
	font-size: 1rem;
	color: rgb(from var(--theme__color-fore) R G B / 60%);
}

.disabled {
	cursor: not-allowed;
}

@media only screen and (max-width: 1200px) {
	.projects__container {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media only screen and (max-width: 800px) {
	.projects {
		margin-top: 8rem;
	}

	.projects__container {
		grid-template-columns: 1fr;
		max-width: 500px;
	}

	.projects__card {
		width: auto;
		padding: 2rem;
		max-width: 400px;
		font-size: 1.5rem;
		gap: 2rem;
	}

	.projects__technologies > img {
		height: 40px;
	}
}