.components__project_card {
	min-width: 30rem;
	aspect-ratio: 2 / 1;
	display: grid;
	grid-template-columns: 1fr 2fr;
	padding: var(--_gap-half);
	gap: var(--_gap);
	box-shadow: 0 0 0.4rem 0.2rem var(--_translucent);
	border: var(--_border-size) solid transparent;

	&:has(a:focus-visible),
	&:hover {
		border: var(--_border-size) solid var(--_accent-color);
	}

	& h3 {
		margin: 0;
	}

	& a {
		outline: none;
		text-decoration: none;
		background-color: var(--_accent-color);
		padding: var(--_gap-half);
		color: var(--_background-color);
		border: var(--_border-size) solid var(--_accent-color);

		&:hover,
		&:focus-visible {
			color: var(--_accent-color);
			background-color: var(--_background-color);
		}
	}
}

.components__project_card__icon {
	height: 100%;
	object-fit: cover;
	overflow: hidden;
}

.components__project_card__content {
	display: flex;
	flex-direction: column;
}

.components__project_card__state {
	padding: var(--_gap-half);
	font-weight: bold;
}

.components__project_card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--_gap-half);

	& span {
		padding: var(--_gap-half);
		background-color: var(--_translucent);
	}
}

.components__project_card__summary {
	text-wrap: balance;
	flex-grow: 1;
}