.block-cooking-resources {
	counter-reset: resources;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.block-cooking-resource,
.wp-block-cwp-cooking-resource {
	--_accent: var(--wp--preset--color--primary);
	--_text: var(--wp--preset--color--background);
	display: flex;
	flex-basis: 240px;
	flex-grow: 1;
	min-width: calc(33% - 4px);
}

.block-cooking-resource {
	background-color: var(--wp--preset--color--background);
	box-shadow: var(--wp--custom--box-shadow--1);
	counter-increment: resources;
	flex-direction: column;
	gap: 8px;
	padding: 24px;
}

.block-cooking-resource::before {
	border: 4px solid var(--_accent);
	border-radius: var(--wp--custom--border-radius--large);
	content: counter(resources);
	display: grid;
	font-family: var(--wp--preset--font-family--secondary);
	font-size: 3rem;
	font-weight: 800;
	height: 72px;
	letter-spacing: var(--wp--custom--letter-spacing--loose);
	line-height: var(--wp--custom--line-height--small);
	place-content: center;
	width: 72px;
}

.block-cooking-resource__content {
	--wp--custom--layout--block-gap: 8px;
}

.block-cooking-resource__subheading {
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--secondary);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--small);
}

.block-cooking-resource__buttons {
	margin-block-start: auto;
}

.block-cooking-resource__buttons .wp-element-button {
	background-color: var(--_accent);
	color: var(--_text);
}

.block-cooking-resource:nth-child(3n + 2),
.wp-block-cwp-cooking-resource:nth-child(3n + 2) .block-cooking-resource {
	--_accent: var(--wp--preset--color--secondary);
	--_text: var(--wp--preset--color--foreground);
}

.block-cooking-resource:nth-child(3n + 3),
.wp-block-cwp-cooking-resource:nth-child(3n + 3) .block-cooking-resource {
	--_accent: var(--wp--preset--color--tertiary);
	--_text: var(--wp--preset--color--foreground);
}

@media only screen and (min-width: 992px) {
	.block-cooking-resources {
		gap: 16px;
	}

	.block-cooking-resource,
	.wp-block-cwp-cooking-resource {
		min-width: calc(33% - 8px);
	}
}