body {
    flex-direction: column;
}

body section.space {
    margin: auto;
}

main {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-top: 80px;
}

section#contact {
    width: 100%;
    margin: 96px 0px;
    display: flex;
    align-items: center;
}

section#contact .stuff {
    width: 100%;
    display: grid;
    grid-template-columns: 33% 54%;
    gap: 12%;
    padding-right: 50px;
}

div.image img {
    height: -webkit-fill-available;
    object-fit: cover;
    object-position: 70% 50%;
}

#contact div.social {
    bottom: auto;
    position: unset;
    padding: 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 30px 100px;
    grid-template-areas:
        "header header"
        "content-1 content-2"
        "content-3 content-4";
  }
  
  .contact-grid h1 {
    grid-area: header;
    margin-bottom: 60px;
  }
  
  .contact-grid .mailhead {
    grid-area: content-1;
    align-self: end;
  }
  
  .contact-grid .email {
    grid-area: content-2;
    align-self: end;
  }
  
  .contact-grid .socialhead {
    grid-area: content-3;
    align-self: end;
  }
  
  .contact-grid .social {
    grid-area: content-4;
    align-self: end;
    z-index: 0;
    position: relative;
  }


@media only screen and (max-width: 850px) {
    .contact-grid {
        grid-gap: 30px 40px;
        padding: 0 20px 0 30px;
    }

    section#contact .stuff {
        grid-template-columns: 35% 65%;
        margin-right: 0;
        gap: 0;
        padding-right: 0;
    }
}

@media only screen and (max-width: 600px) {
    .contact-grid {
       padding: 0 20px 0 20px;
    }
    
    .contact-grid {
        grid-template-columns: 100%;
        grid-gap: 10px;
        grid-template-areas:
            "header"
            "content-1"
            "content-2"
            "content-3"
            "content-4";
    }

    .contact-grid .email {
        margin-bottom: 30px;
    }

    div.image img {
        max-height: 320px
    }
}

@media only screen and (max-width: 380px) {
    .contact-grid p, a.email {
        font-size: 16px;
        line-height: 16px;
    }

    div.image img {
        object-position: 64% 50%;
    }
}