/* Home: Feature Cards */

.gwi-feature-cards {
	/*
	 * Cards are sized as a fraction of the row rather than of the viewport, so
	 * the four of them keep fitting on one line once the section stops growing
	 * at the global wide size.
	 */
	--gwi-cards-width: min(100vw, var(--wp--style--global--wide-size, 1360px));

	margin: 0 auto;
	padding: 0;
	max-width: var(--wp--style--global--wide-size, 1360px);
	box-sizing: border-box;
	gap: calc(var(--gwi-cards-width) * 0.015);
}

.gwi-feature-card {
	position: relative;
	width: calc(var(--gwi-cards-width) * 0.22);
	height: calc(var(--gwi-cards-width) * 0.32);
	border-radius: calc(var(--gwi-cards-width) * 0.01);
	background-size: 100% auto;
	background-position: bottom center;
	background-repeat: no-repeat;
	overflow: hidden;
}

.gwi-feature-card h3 {
	font-family: Poppins, sans-serif;
	margin: calc(var(--gwi-cards-width) * 0.01);
	line-height: 110%;
	font-size: calc(var(--gwi-cards-width) * 0.02);
}

.gwi-feature-card p {
	font-family: Urbanist, sans-serif;
	margin: calc(var(--gwi-cards-width) * 0.01);
	line-height: 125%;
	font-size: calc(var(--gwi-cards-width) * 0.012);
}

/*
 * The heading link covers the whole card, so the tile stays clickable as it was
 * with the old onclick handler while the accessible name comes from the heading.
 */
.gwi-feature-card h3 a {
	color: inherit;
	text-decoration: none;
}

.gwi-feature-card h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.gwi-feature-card h3 a:focus-visible::after {
	outline: 2px solid currentcolor;
	outline-offset: -4px;
}

@media (max-width: 1000px) {
	.gwi-feature-cards {
		gap: 1.5vw;
	}

	.gwi-feature-card {
		width: 44vw;
		height: 60vw;
		border-radius: 2vw;
	}

	.gwi-feature-card h3 {
		margin: 2vw;
		font-size: 4vw;
	}

	.gwi-feature-card p {
		margin: 2vw;
		font-size: 2.4vw;
	}
}

@media (max-width: 500px) {
	.gwi-feature-cards {
		gap: 4vw;
	}

	.gwi-feature-card {
		width: 88vw;
		height: 120vw;
		border-radius: 4vw;
	}

	.gwi-feature-card h3 {
		margin: 4vw;
		font-size: 8vw;
	}

	.gwi-feature-card p {
		margin: 4vw;
		font-size: 4.8vw;
	}
}