.components__machine_card {
	min-width: 10rem;
	aspect-ratio: 1 / 2;
	display: flex;
	flex-direction: column;
	padding: var(--_gap-half);
	gap: var(--_gap);
	box-shadow: 0 0 0.4rem 0.2rem var(--_translucent);
	border: var(--_border-size) solid transparent;
	background-repeat: no-repeat;
	background-size: contain;

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

	& h3 {
		margin: 0;
	}
}

.components__machine_card__spacer {
	height: 50%;
}

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

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

.components__machine_card__footer {
	height: fit-content;
	display: flex;
	gap: var(--_gap);
	justify-content: space-between;

	a {
		width: 100%;
		padding: var(--_gap);
		color: currentColor;
		outline: none;
		text-decoration: none;
		border: var(--_border-size) solid currentColor;
	}

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