/* Container: stable 4/2/1 columns using CSS Grid (no flex width math weirdness) */
.d101-state-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
	margin: 0 auto;
	max-width: 1200px;
}

/* Card */
.d101-state-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 2px solid #e7e7e7;
	border-radius: 14px;
	overflow: hidden;
	/* clips image to rounded corners */
	text-decoration: none;
	box-sizing: border-box;
	min-height: 260px;
}

/* NO hover movement. Just a subtle border color change is fine. */
.d101-state-card:hover {
	border-color: #0069e2;
}

/* Flag: force consistent 5:3 display ratio so odd SVGs (Hawaii etc) don’t look “short” */
.d101-flag-img {
	display: block;
	width: 100%;
	aspect-ratio: 5/3;
	object-fit: cover;
	/* fills the box consistently */
	height: auto;
	background: #fff;
}

/* Body */
.d101-card-body {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px 14px;
	text-align: center;
}

/* You wanted to control H3 sizing in Divi, but here’s your forced override */
.d101-state-grid .d101-card-h3 {
	margin: 0;
	line-height: 1.15;
	font-size: 26px !important;
}

/* State name */
.d101-state-name {
	display: block;
	font-weight: 800;
	color: #333;
}

/* Subtitle: small accent */
.d101-state-sub {
	display: block;
	margin-top: 8px;
	color: #0069e2;
	font-weight: 600;
	font-size: .6em;
	text-transform: none;
}

/* 2 columns (tablet) */
@media (max-width: 980px) {
	.d101-state-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* 1 column (phone) */
@media (max-width: 560px) {
	.d101-state-grid {
		grid-template-columns: 1fr;
	}
}