codesignd Patterns

.contact {
	position: relative;
	
	display: flex;
	justify-content: space-between;
	
	@media (max-width: 50em) {
		flex-direction: column;
	}
}

.contact__main {
	flex: 1;
}

.contact__form {
	position: relative;
}

.contact__stamp {
	position: absolute;
	bottom: -1.5rem;
	right: 1rem;
	width: 6rem;
	
	visibility: hidden;
	opacity: 0;
	filter: blur(2px);
	transform: scale(1.3);
	transition: visibility 0s linear 0.3s, opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
	
	.form--sent & {
		visibility: visible;
		opacity: 1;
		filter: none;
		transform: none;
		transition-delay: 0s;
	}
}

.contact__thank-you {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;
}

.contact__sidebar {
	max-width: 16rem;
	margin-left: 2rem;
	
	@media (max-width: 50em) {
		max-width: 100%;
		margin: 0;
		margin-top: 2rem;
		
		display: flex;
		flex-wrap: wrap;
	}
}

.contact__detail {
	@media (min-width: 50em), (max-width: 42em) {
		&:not(:last-child) {
			margin-bottom: 1.8rem;
		}
	}
	
	@media (max-width: 50em) {
		width: 50%;
	}
	
	@media (max-width: 42em) {
		width: 100%;
	}
}

.contact__heading {
	font-size: -cdd-rem(20);
	margin-bottom: 0.3em;
}

.contact__email {
	display: flex;
	margin-bottom: 0.3rem;
	
	> :nth-child(1) {
		margin-right: 0.5rem;
		padding-right: 0.5rem;
		border-right: 1px solid $color--passive;
	}
	
	> :nth-child(2) {
		align-self: center;
		
		font-size: -cdd-rem(22);
	}
}