.card {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2em;
	padding: 2em;
	border: 0.1875em var(--accent) solid;
	border-radius: 0.635em;
}

.card h1 {
	margin-top: 0;
}

.card:nth-child(4n + 2) {
	background-color: #ececec;
}
.card:nth-child(4n - 1) {
	background-color: #ececec;
}

.card > div {
	display: flex;
	flex-direction: column;
	margin-right: auto;
}

.card h1 {
	margin: 0;
	margin-right: auto;
}

button {
	font-family: var(--h-font);
	border: none;
	color: white;
	padding-block: 0.6em;
	padding-inline: 1em;
	background-color: var(--accent);
	margin-bottom: 0.5em;
	margin-top: 1em;
	border-radius: 10px;
}

button:hover {
	cursor: pointer;
	background-color: var(--accent-light);
}

article {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1em;
	padding: 1em;
}

.card img {
	height: 10em;
}

[data-lucide] {
	height: 1em;
}

@media (width < 1140px) {
	article {
		grid-template-columns: 1fr;
	}
}

@media (width < 580px) {
	.card {
		flex-direction: column;
	}
}