.contact-masthead
background-image: linear-gradient(to bottom right, $blue , $vivid-pink)
.contact-header
font-weight: 400
.contact-strap
font-family: monospace
.contact-wrapper
background-color: $soft-white
.contact-grid
display: grid grid-template-columns: 1fr grid-template-areas: "contactForm" "contactDetails" "contactFooter" grid-gap: 5vh
.contact-details
grid-area: contactDetails
.contact-form
grid-area: contactForm label display: none
.google-map
//grid-area: googleMap width: 100vw height: 30vh filter: grayscale(1) invert(0.1) // fudge to pull up global container in this one instance margin-bottom: -5vh
.contact-footer
grid-area: contactFooter font-size: 0.8rem
.form-element
width: 100% height: 40px border-radius: 5px font-size: 1rem font-weight: 100 margin: 2vh 0 border: none background-color: $white padding: 0.5rem 0 0.4rem 0 text-indent: 1rem
.btn-contact
box-shadow: $box-shadow $vivid-pink margin: 2vh 0 width: 100% color: $vivid-pink background-color: $pure-white
.social-media
display: flex justify-content: flex-start padding: 0
.social-media-item
list-style: none padding-right: 2rem
.social-media-link
color: $black transition: all 0.3s ease-in-out
.social-media-hover
color: $vivid-pink
.contact-confirm
padding: 5vh 5vw text-align: center span display: none
@media screen and ( min-width: 768px )
.contact-confirm padding: 5vh 10vw span display: inline .contact-grid grid-template-columns: 50% 50% grid-gap: 5vw grid-template-areas: "contactForm contactDetails" "contactFooter contactFooter" .google-map // fudge to pull up global container in this one instance margin-bottom: -15vh
@media screen and ( min-width: 1024px )
.contact-grid grid-template-columns: 60% 40% max-width: 1000px margin: 0 auto