.contact__column,
.contact__content__inner,
.contact__info {
	display: grid;
	grid-template-columns: subgrid;
	grid-auto-rows: min-content;
}

.contact__column {
	box-sizing: border-box;
	padding-right: var(--grid-margin);
	position: relative;
}

.contact__block__description + .contact__block__description {
	margin-top: calc(2em * 1.25);
}

.contact__block__description a {
	display: inline-block;
	position: relative;
}

	.contact__block__description a:before,
	.contact__block__description a:after {
		content: '';
		background: currentcolor;
		bottom: 0;
		height: 1px;
		left: 0;
		position: absolute;
		width: 100%;
	}
	
	.contact__block__description a:after {
		transform-origin: right;
		transform: scaleX(0);
	}
	
	.contact__block__description a:before {
		transform-origin: left;
		transform: scaleX(1);
	}

.form__results {
	position: fixed;
	bottom: 0;
	right: 0;
	height: 100%;
	padding: var(--grid-margin);
	pointer-events: none;
	width: 100%;
	z-index: 10;
}

.form__results.success,
.form__results.error {
	pointer-events: auto;
}

.form__overlayer {
	background: rgba(var(--rgb-black), 0.4);
	opacity: 0;
	transition: opacity 1s var(--transition-handle);
}

.success .form__overlayer,
.error .form__overlayer {
	opacity: 1;
}

.form__results__messages {
	background: var(--color-white);
	border-left: solid 1px currentcolor;
	border-top: solid 1px currentcolor;
	box-sizing: border-box;
	font-weight: 600;
	position: absolute;
	bottom: 0;
	right: 0;
	padding: calc(var(--grid-margin) * 2);
	transform: translate3d(0, 100%, 0);
	transition: transform 1s var(--transition-handle);
	width: calc(50vw + var(--grid-gutter) / 2 + 1px);
}

.success .form__results__messages,
.error .form__results__messages {
	transform: translate3d(0, 0, 0);
}
	
@media (hover: hover) {
	
	.contact__block__description a:hover:before {
		transform-origin: right;
		transform: scaleX(0);
		transition: transform 0.6s var(--transition-handle);
	}
		
	.contact__block__description a:hover:after { 
		transform-origin: left;
		transform: scaleX(1);
		transition: transform 0.6s var(--transition-handle) 0.3s;
	}
	
}

@media (min-width: 981px) {

	.form__container {
		grid-column: span 4;	
	}

}

@media (max-width: 980px) {

	.form__container {
		grid-column: span var(--grid-columns);
	}

}

@media (max-width: 980px) and (min-width: 681px) and (orientation: landscape) {
	
	.form__container {
		grid-column: span 5;	
	}
	
}

@media (min-width: 681px) {
	
	.contact__column:first-child {
		height: fit-content;
		position: sticky;
		top: var(--header-height);
	}
	
	.contact__column + .contact__column:before {
		content: '';
		border-left: solid 1px currentcolor;
		height: 100%;
		left: calc(-1px - var(--grid-gutter));
		position: absolute;
		top: 0;
	} 
	
	.contact__column,
	.contact__content__inner,
	.contact__column .hero__main,
	.contact__column .hero__title,
	.contact__info {
		grid-column: span calc(var(--grid-columns) / 2);
	}
	
	.contact__block {
		grid-column: span calc(var(--grid-columns) / 4);
	}
	
}

@media (max-width: 680px) {
	
	.contact__content__inner,
	.form__container {
		grid-column: span var(--grid-columns);
		padding-left: var(--grid-margin);
	}
	
	.contact__column + .contact__column {
		border-top: solid 1px currentcolor;
	} 
	
	.contact__block + .contact__block {
		margin-top: calc(2em * 1.25);
	}
	
}