.tooltip-container {
	display: inline-block;
	position: relative;

	&:hover {
		.tooltip {
			display: block;
		}
	}
}

.tooltip-link {
	background: $gray-light;
}

.tooltip {
	display: none;
	position: absolute;
	top: 1.5em;
	left: 0;
	width: 18em;
	padding: $pad;
	background: $white;
	border: 1px solid $gray;
	box-shadow: 0.3em 0.3em 1em 0 rgba(0,0,0,0.2);

	h2 {
		margin-top: 0;
	}

	@media all and (min-width: $bp-small) {
		width: 22em;
	}

	@media all and (min-width: $bp-small-2) {
		width: 27em;
	}

	@media all and (min-width: $bp-small-3) {
		width: 30em;
	}
}