/* Cards */

.card {
	container: card / inline-size;
	background-color: white;
	border-radius: var(--standard-radius);
	color: var(--teal);
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	align-content: flex-start;
	margin: 0;
	height: 100%;
}
.card-image,
.featured-event-card .tribe-events-event-image {
	aspect-ratio: 392 / 234;
	object-fit: cover;
	border-radius: var(--standard-radius);
	flex: 0 0 auto;
	width: 100%;
}
.card-image[src*="Default-post-image.png"] {
	object-fit: contain;
	padding: 3.5rem;
}
.card-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	position: relative;
	padding: 4.5rem 3.5rem;
}
.card-content > .brxe-icon {
	font-size: 4rem;
	position: absolute;
	top: -3px;
	left: 1.5rem;
}
.card-content .brxe-heading {
	margin: 0 0 1rem;
}
.card-content .brxe-heading a:is(:hover, :focus) {
	color: var(--bright-green);
}
.card-content .brxe-text,
.card-content .brxe-text-basic {
	margin-bottom: 2.5rem;
}
.card-content .post-meta,
.mini-card .post-meta {
	font-size: var(--font-size--small);
	font-weight: 500;
}
.card-content .post-meta .fas,
.mini-card .post-meta .fas {
	margin-right: 2px;
}
.card-content .bricks-button {
	margin-top: auto;
}
@container card (width >= 50rem) {
	.card-content,
	.resource-cards .card-content {
		padding: 5.5rem 3.5rem 5rem;
	}
	:is(.horizontal-layout .card-image) {
		object-fit: cover;
		width: 43%;
		max-width: 52.5rem;
		height: 100%;
	}
	:is(.horizontal-layout .card-content) {
		aspect-ratio: auto;
		object-fit: contain;
		flex: 1 0 57%;
		padding: 4rem 3rem;
	}
	:is(.horizontal-layout .card-content .brxe-heading) {
		margin-bottom: 3rem;
	}
}
@container card (width >= 90rem) {
	.card-image,
	.featured-event-card .tribe-events-event-image {
		object-fit: cover;
		width: 43%;
		max-width: 52.5rem;
	}
	.card-content,
	.resource-cards .card-content {
		aspect-ratio: auto;
		object-fit: contain;
		flex: 1 0 57%;
		padding-left: 6rem;
		padding-right: 5rem;
	}
	.card-content .brxe-heading {
		margin-bottom: 3rem;
	}
}
@container card (width < 40rem) {
	.card-content {
		padding: 3rem;
	}
	.card-content:has(> .brxe-icon) {
		padding-top: 6rem;
	}
}
@container card (width < 30rem) {
	.card-content {
		padding: 2rem;
	}
}