.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