.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-link: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