#ultimate-cards {
	width: 1400px;
	max-width: 100%;	
}
.intro-box {
	text-align: center;
	color: var(--fossil-rim);
	margin-bottom: 48px;	
}
.card-grid {
	display: grid; 	
}
.card { background: white; }
.card a:not(.cta) {
	padding-bottom: 8px;
	border-bottom: 1px solid var(--serengeti);
	position: absolute;	
	width: max-content;
}
.card:hover a:not(.cta) {
	border-bottom-color: var(--monarch);	
}
.card .card-title, .card .card-text { margin-bottom: 12px; }
.card .card-text { color: var(--dark-grey); }
.card a.cta { 
	display: flex; 
	column-gap: 4px; 
	justify-content: center; 
	display:block; 
	position: absolute;
	width: max-content; 
}
.card .image-box {
	width: 100%;
	height: 0;	
	flex-shrink:0;
}
.card .card-content {	
	width: 100%;
}
.card-flex {
	display: flex;
	column-gap: 0;
	align-items: center;	
}
.card .card-flex .image-box {
	width: 31.67%;
	height: 0;
	padding-bottom: 16% !important;
	flex-shrink:0;
}
@media screen and (max-width: 640px) {
	.card { width: 100%; }
	.card .card-content { text-align: center; }
	.card a.cta, .card a:not(.cta) { width: var(--uc-cta-w); text-align: center; }
}
@media screen and (max-width: 1024px) {
	.uc-resp-a .card-grid { display: flex; flex-wrap: wrap; justify-content: center; }
	.uc-resp-a .card { width: 300px; }
}
@media screen and (max-width: 1200px) {
	.uc-resp-b .card-grid { display: flex; flex-wrap: wrap; justify-content: center; }
	.uc-resp-b .card { width: 250px; }
}