.two-columns,
.three-columns {
	display: flex;
	height: 100%;
	justify-content: center;
	padding: 0 ($gutters / 2);
	position: relative;
}

// only allow hover state for link headers
a.column-header:hover {
	background-color: $background-lightishgray;
	border-radius: $border-radius;
	transition: all 0.22s ease-in-out;
}

.column-header {
	align-items: center;
	color: $foreground-black;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 1em;
	padding: 1em;
	text-decoration: none;

	h1 {
		margin: 0;
	}

	a {
		color: inherit;
		text-decoration: inherit;
	}

	img {
		height: 8px;
		width: 5px;
	}

	.drilldown {
		align-items: baseline;
		display: flex;

		> *:not(:last-child) {
			margin-right: 1em;
		}
	}

	.heading-with-button {
		align-items: baseline;
		display: flex;
		justify-content: space-between;

		.plus-button {
			background-color: $background-green;
			border: 2px solid $background-green;
			border-radius: 10000px;
			cursor: pointer;
			height: 2em;
			padding: 0;
			width: 2em;
		}
	}
}

.column {
	border-image: linear-gradient(to top, #ebebeb, #f7f7f7) 1 100%;
	border-right-style: solid;
	border-right-width: 5px;
	overflow-y: scroll;
	padding-left: 20px;
	padding-right: 20px;
	width: 33.33333%;

	&::-webkit-scrollbar {
		display: none;
	}

	&:first-child {
		padding-left: 0;
	}

	&:last-child {
		border-right: none;
		padding-right: 0;
	}

	h1,
	h2 {
		color: $foreground-black;
		font-size: 1.25em;
		margin: 0;
	}

	.sub-link {
		color: $foreground-green;
		display: block;
		margin-bottom: 0.5em;
		text-decoration: none;
	}

	h2,
	h3,
	h4,
	h5,
	h6 {
		flex: 1;
		font-weight: 400;
		text-decoration: none;
	}

	h1 {
		font-size: 25px;
		font-weight: $bold;
		letter-spacing: 0.04em;
		margin-bottom: 30px;
		text-decoration: none;
	}

	h2 {
		font-weight: $bold;
		margin-bottom: 0.5em;
	}

	.section-heading {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 1em;
	}

	.column-content {
		height: 100%;
		overflow-y: scroll;

		&::-webkit-scrollbar {
			display: none;
		}
	}
}

.two-columns {
	> .column:last-child {
		width: 66.66666%;
	}
}
