.contact {
	max-width: 1000px;
}

.contact .heading {
	font-size: 3em;
	margin: 0 0 20px;
}

.contact .grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 80px;
	grid-row-gap: 40px;
}

.contact .grid > .flex {
	display: flex;
	flex-direction: column;
}

.contact .grid .flex > div {
	margin: auto;
}

.contact .django-message {
	border-width: 1px;
	border-style: solid;
	border-radius: 10px;
	color: var(--color-primary);
	padding: 10px 20px;
}

.contact form {
	max-width: 400px;
	box-sizing: border-box;
}

.contact form > * {
	margin-bottom: 20px;
}

.contact form > *:nth-last-child(1) {
	margin-bottom: 0;
}

.contact form .grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 20px;
}

.contact form input, .contact form textarea {
	display: block;
	width: 100%;
	border-width: 1px;
	border-style: solid;
	border-radius: 10px;
	border-color: #DDD;
	box-sizing: border-box;
	padding: 20px;
}

.contact form input[hidden] {
	display: none;
}

.contact form input::placeholder, .contact form textarea::placeholder {
	color: #BBB;
}

.contact form textarea {
	min-height: 200px;
	max-height: 400px;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin-bottom: 15px;
	resize: vertical;
}

.contact form .textarea-wrapper {
	border-width: 1px;
	border-style: solid;
	border-radius: 10px;
	border-color: #DDD;
	padding: 20px;
}

.contact form button {
	width: 100%;
	border-radius: 10px;
	padding: 10px;
	background-color: var(--color-primary);
	color: #FFF;
}

.contact form button:hover {
	background-color: #000;
	color: #FFF;
}

.contact .contact-phone {
	margin-bottom: 0;
}

.contact .contact-email {
	margin-top: 0;
}

.contact .contact-phone svg, .contact .contact-email svg {
	margin-right: 10px;
	vertical-align: bottom;
}

@media only screen and (max-width: 800px) {
	.contact .grid {
		grid-column-gap: 30px;
	}
}

@media only screen and (max-width: 600px) {
	.contact > .grid {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
	}
	.contact .flex:nth-child(1) {
		grid-row-start: 2;
		grid-row-end: 3;
	}
	.contact .grid .flex > div {
		margin: 0;
	}
	.contact form {
		max-width: none;
	}
}