.home .section-contact {display: flex; flex-direction: column; background-color: var(--color-primary);}

.home .section-contact .imageCol {flex-shrink: 0; height: 18rem; background-size: cover; background-position: center;}

.home .section-contact .panel {display: flex; align-items: center; padding: 3rem 1.5rem;}
.home .section-contact .panelInner {width: 100%; max-width: 28rem; margin: 0 auto;}
.home .section-contact .panelInner .sectionTitle {margin-bottom: 1.5rem;}
.home .section-contact .panelInner .text {line-height: 1.8; font-size: .9rem; color: rgba(255,255,255,.85); text-align: center;}
.home .section-contact .panelInner .text b {color: #fff;}

.home .section-contact .panelInner .componentContactForm {margin-top: 2.5rem;}

.home .section-contact .socials {display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: 2.5rem;}
.home .section-contact .socials .hashtag {direction: ltr; font-size: .9rem; color: rgba(255,255,255,.7);}
.home .section-contact .socials .icons {display: flex; gap: .75rem;}
.home .section-contact .socials .icons a {
	display: flex; align-items: center; justify-content: center;
	width: 2.5rem; height: 2.5rem; border-radius: 50%;
	background-color: rgba(255,255,255,.12);
}
.home .section-contact .socials .icons a:hover {background-color: rgba(255,255,255,.22);}
.home .section-contact .socials .icons img {display: block; width: auto; height: 1.3rem; object-fit: contain;}

@media screen and (min-width: 40em) {
	.home .section-contact {flex-direction: row; align-items: stretch;}
	.home .section-contact .imageCol {flex: 1 1 50%; height: auto;}
	.home .section-contact .panel {flex: 1 1 50%; padding: 5rem 3rem;}
}