.collections-grid-holder {
	--gap: 1.5rem;
	--row: 25rem; /* row height; tweak to taste */
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: var(--row);
	gap: var(--gap);
	grid-auto-flow: dense; /* helps fill gaps on wrap */
}

/* default card = one column wide, one row tall */
.card {
	position: relative;
	overflow: hidden;
	border-radius: 0.5rem;
	grid-column: span 1;
	grid-row: span 1;

	display: flex;
	align-content: flex-end;
	padding: 1.5rem;
	color: #fff;

	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;

	text-transform: none;
	text-decoration: none;
}

/* the big feature card */
.card--wide {
	grid-column: span 2; /* two columns on desktop */
}

/* background image + dark gradient overlay (optional) */
.card > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	background: linear-gradient(
		0deg,
		rgba(0, 0, 0, 0.85) 12%,
		rgba(0, 0, 0, 0) 94%
	);
	z-index: 1;
}
.card .content {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 24px;
	color: #fff;
}

.card .content-holder {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-content: flex-end;
	align-items: flex-end;
	flex-wrap: wrap;
	position: relative;
	z-index: 2;
}

.card .content-holder .content-left,
.card .content-holder .content-right {
	width: 100%;
}

.card.card--wide .content-holder .content-left {
	width: calc(70% - 2rem);
}

.card.card--wide .content-holder .content-right {
	width: 30%;
}

.card .content-holder h3 {
	color: #fff;
	font-size: var(--text-size-100);
	font-weight: 700;
	letter-spacing: 12%;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
	text-decoration: none;
}

.card .content-holder p.fake-cta-btn {
	background-color: rgba(0, 0, 0, 0);
	padding: 0.75rem 1.5rem;
	margin: 1rem 0 0;
	display: inline-block;
	text-decoration: none;
}

.card.card--wide .content-holder p.fake-cta-btn {
	margin-top: 0;
}

.card:hover {
	color: #fff;
}

.card:hover .content-holder p.fake-cta-btn {
	background-color: var(--global-palette3);
	transition: 0.25s all ease-in-out;
}

/* responsive */
@media (max-width: 900px) {
	.collections-grid-holder {
		grid-template-columns: repeat(2, 1fr);
		--row: 15rem;
	}
	.card--wide {
		grid-column: span 2;
	} /* full width on tablet */
}
@media (max-width: 600px) {
	.collections-grid-holder {
		grid-template-columns: 1fr;
		--row: auto;
	}
	.card--wide {
		grid-column: span 1;
	} /* single column on mobile */

	.card::after {
		background: linear-gradient(
			0deg,
			rgba(0, 0, 0, 0.75) 37%,
			rgba(0, 0, 0, 0.4) 83%,
			rgba(0, 0, 0, 0.1) 100%
		);
	}

	.card.card--wide .content-holder .content-left,
	.card.card--wide .content-holder .content-right {
		width: 100%;
	}

	.card {
		padding-top: 4rem;
	}

	.card .content-holder p.fake-cta-btn,
	.card.card--wide .content-holder p.fake-cta-btn {
		padding: 0.5rem 2rem;
		margin-top: 1rem;
		font-size: var(--text-size-90);
	}
}