:root {
	--pad-lg: 3em;
	--pad-md: 1em;

	--border-thick: 5px;

	--grid-row: 25%;
	--grid-cellH: 250px;
	--grid-imgH: 110px;

	--time-a: 1s;
}

.assetGrid {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	list-style-type: none;
	width:  100%;
	/*border: 1px solid gray;*/
	justify-content: center; /* center */
}

.assetGrid>* {
	padding: var(--pad-md);
	text-align: center;
	flex: 1 1 var(--grid-row);
	max-width: 600px;
	/*border: 1px solid gray;*/
	min-height: var(--grid-cellH);
	/*border: 1px solid silver;*/
}

.assetGrid>*>a {
	/*border: var(--border-thick) solid transparent;*/
	display: block;
	padding: var(--pad-md);
	box-shadow: 0 0 30 -20px rgba(0, 0, 0, 0.0);
	transition: all var(--time-a);
}

.assetGrid>*>a:hover {
	/*border: var(--border-thick) solid var(--color-pri-aqua-blue);*/
	/*box-shadow: 0 30px 20px -20px rgba(0, 0, 0, 0.3);*/
	box-shadow: 0 var(--pad-lg) var(--pad-lg) calc(-1 * var(--pad-lg)) rgba(0, 0, 0, 0.4), inset 0 0 var(--pad-md) rgba(50, 50, 200, 0.1);
	/*color: var(--color-pri-aqua-blue);*/
}

.assetGrid * img {
	max-height: var(--grid-imgH);
	width: auto;
	max-width: 100%;
}

.assetGrid > * > a .button {
	display: block;
	width:  fit-content;
	margin-top: var(--pad-md);
	margin-right: auto;
	margin-left: auto;
}

.assetGrid > * > a:hover .button {
	text-decoration: none;
}

.benefitsList li {
	list-style: none;
}

@media only screen and (max-width: 700px) {
	#benefits.two>* {

		width: 100%;
	}
}