/**********************************************************
// Block >> Example
**********************************************************/
a.Block-Feature-Card:hover { var(--Links); }
a.Block-Feature-Card {
	color: var(--Dark);
	}

.Block-Feature-Card h2 { font-size: 1.5rem; padding: 0; }

.Block-Feature-Card-Image {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3; /* or use fixed height instead */
	overflow: hidden;
}

a.Block-Feature-Card:hover .Block-Feature-Card-Content { background: var(--Dark); color: #fff; }
.Block-Feature-Card-Content { padding: 20px 20px 30px; }

a.Block-Feature-Card:hover .Block-Feature-Card-Image img { opacity: 1; }
.Block-Feature-Card-Image img {
	width: 100%;
	height: 100%;
	object-fit: cover;       /* or 'contain' if you want full image visible */
	object-position: center; /* or 'top', 'bottom', etc. */
	display: block;
}

.Association-Logos .Block-Feature-Card-Image { aspect-ratio: 16 / 9; padding: 0 20px; }
.Association-Logos .Block-Feature-Card-Image img {
	object-fit: contain;
}

a.Block-Feature-Card:hover .Block-Feature-Card-LinkTitle { color: var(--Alt); }
a.Block-Feature-Card .Block-Feature-Card-LinkTitle { 
	color: var(--Links);
	margin-top: 15px;
	font-size: 18px;
	display: block;
}

.Block-Feature-Top-Border {
	height: 10px;
	width: 100%;
	background: var(--Blue);
}

a.Block-Feature-Card:hover .Block-Feature-Top-Border  {
	background: var(--Yellow);
}

/**********************************************************
// Media Queries
**********************************************************/
@media
all and (max-width: 768px),
all and (max-device-width: 768px)
{
	.Block-Feature-Card-Content { padding: 20px 0; }
}