.popout_box {
	background: linear-gradient(var(--bgc-mdk), var(--bgc-dk));
	border: 2px solid var(--bgc-lt);
	border-radius: 1em;
	margin: 1em 0em;
	padding: 1em;
	box-sizing: border-box;

	em {
		color: var(--fgc-white);
	}

	ul {
		margin:0.5em;
		padding:0em;
	}
}

/* Color Variants */
.popout_box.blue {
	border-color: var(--fgc-cold);
	em {color: var(--fgc-cold)}
}
.popout_box.orange {
	border-color: var(--fgc-hot);
	em {color: var(--fgc-hot)}
}


.button-row2 {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;

	text-align: center;
	margin-top: 5%;

	a {
		flex: 350px;
		margin: 0em 0.5em;

		div {
			display: grid;
			grid-template-columns: 6em calc(100% - 6em);
			grid-template-rows: 3em calc(100% - 3em);

			padding: 0.5em;
			min-height: 4em;
			align-content: center;
			vertical-align: middle;
			background: linear-gradient(var(--bgc-mdk), var(--bgc-dk));
			border: 2px solid black;
			border-radius: 1em;

			img {
				grid-area: 1 / 1 / 3 / 2;
				height: 6em;
				width: 6em;
				mask-image: radial-gradient(closest-side, black, transparent); /* must override */
				mask-size: contain;
				mask-repeat: no-repeat;
				mask-composite: exclude;
				mask-position: center;
			}

			h4 {
				margin: auto 0em;
				grid-area: 1 / 2 / 2 / 3;
			}

			span {
				grid-area: 2 / 2 / 3 / 3;
			}
		}
	}

	/* Color Variants */
	div {
		color: var(--fgc-main);
		border-color: var(--fgc-main);
		box-shadow: 0px 0px 12px 0px inset var(--fgc-main);
		h4 {color: var(--fgc-main)}
		img {background-color: var(--fgc-main)}
		span {color: var(--fgc-main)}
	}
	div.blue {
		border-color: var(--fgc-cold);
		box-shadow: 0px 0px 12px 0px inset var(--fgc-cold);
		h4 {color: var(--fgc-cold)}
		img {background-color: var(--fgc-cold)}
	}
	div.orange {
		border-color: var(--fgc-hot);
		box-shadow: 0px 0px 12px 0px inset var(--fgc-warm);
		h4 {color: var(--fgc-hot)}
		img {background-color: var(--fgc-hot)}
	}

	/* Hover props */
	div:hover {
		background: var(--bgc-dk);
		box-shadow:
			0px 0px 12px 2px inset var(--fgc-main),
			0px 0px 12px 2px var(--fgc-main);
	}
	div:hover.blue {
		box-shadow:
			0px 0px 12px 2px inset var(--fgc-cold),
			0px 0px 12px 2px var(--fgc-cold);
	}
	div:hover.orange {
		box-shadow:
			0px 0px 12px 2px inset var(--fgc-hot),
			0px 0px 12px 2px var(--fgc-hot);
	}
}