@media screen {

    body {
        display: grid;
        grid-template-rows: 90px 20vh minmax(300px, 40vh) minmax(200px, calc(40vh - 90px)); /* don't forget to account for grid-gap in total height */
        grid-template-columns: 1fr 1fr;
        align-items: center;
        justify-items: center;
    }

    .header {
        grid-column: 1/3;
    }

    .contact-tagline {
        grid-row: 2/3;
        grid-column: 1/3;
        text-align: center;
        align-self: end;
        margin-bottom: 20px;
        padding: 0 20px;
        display: grid;
        grid-template-rows: 35px 25px;
        grid-gap: 30px;
    }

    .contact-tagline-heading {
        font-family: 'Times New Roman', serif;
        font-size: 3rem;
    }

    .contact-tagline-body {
        font-size: 1.6rem;
        font-family: 'Roboto', sans-serif;
    }

    .contact {
        grid-row: 3/4;
        grid-column: 1/2;
        display: grid;
        grid-template-rows: 25px 25px 40px 25px;
        grid-template-columns: 300px;
        grid-gap: 2.2vh;
        align-content: center;
        height: calc(120px + 12vh);
        margin: 20px 15px 57px 30px;
        justify-self: right;
        align-self: start;
        border: 1px solid #a3a3a3;
        border-radius: 4px;
        padding: 0 50px;
        /*background-color: #27313f;*/
    }

    .contact__phone,
    .contact__email,
    .contact__address,
    .contact__hours {
        display: grid;
        grid-template-columns: 30px 270px;
        align-content: center;
        transition: color .2s ease-out;
        /*padding-bottom: 1vh;*/
        /*grid-template-columns: 20px 250px;*/
    }

    .contact__address {
        grid-template-rows: 25px 15px;
    }

    .contact__address-addendum {
        grid-column: 2/3;
        font-size: 1.3rem;
        color: #929292;
    }

    .contact__phone-symbol,
    .contact__email-symbol,
    .contact__address-symbol,
    .contact__hours-symbol {
        font-size: 2.5rem;
        justify-self: center;
    }

    .contact__phone-text,
    .contact__email-text,
    .contact__address-text,
    .contact__hours-text {
        align-self: center;
        line-height: 2.5rem;
    }

    .contact__phone:hover,
    .contact__email:hover,
    .contact__address:hover,
    .contact__hours:hover {
        color: #ff5cdf;
        transition: color .2s ease-out;
    }

    .form {
        grid-row: 3/4;
        grid-column: 2/3;
        display: grid;
        grid-template-rows: 40px 40px 40px 9vh 40px;
        grid-template-columns: 370px;
        grid-gap: 1vh;
        margin: 20px 30px 0 15px;
        justify-self: left;
        align-self: start;
    }

    .form__name,
    .form__phone,
    .form__email,
    .form__message {
        padding: 12px;
        background-color: #27313f;
        color: #fff;
        border: 1px solid #a3a3a3;
        border-radius: 4px;
        resize: none;
        font-family: 'Roboto', sans-serif;
        font-size: 1.5rem;
        transition: border .5s;
    }

    .form__name:valid,
    .form__phone:valid,
    .form__email:valid,
    .form__message:valid {
        border: 1px solid #99dc6f;
    }

    /*.form__name:invalid,*/
    /*.form__email:invalid,*/
    /*.form__message:invalid {*/
    /*    border: 1px solid #ee4e59;*/
    /*    outline: 0;*/
    /*    box-shadow: none;*/
    /*}*/

    /*.form__name:required,*/
    /*.form__email:required,*/
    /*.form__message:required {*/
    /*!*border: 1px solid pink;*!*/
    /*}*/
    /*.form__name:invalid:placeholder-shown,*/
    /*.form__phone:invalid:placeholder-shown,*/
    /*.form__email:invalid:placeholder-shown,*/
    /*.form__message:invalid:placeholder-shown {*/
    /*    border: 1px solid #a3a3a3;*/
    /*}*/

    .form__message {
        height: 9vh;
    }

    .form__submit {
        width: 150px;
        justify-self: right;
        background-color: unset;
        color: white;
        border: 1px solid #a3a3a3;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color .2s;
    }

    /*.form__submit:hover {*/
    /*    background-color: #ee0024 !important;*/
    /*    transition: background-color .2s;*/
    /*}*/

    /*.form__submit--valid:hover {*/
    /*    background-color: #37ee28 !important;*/
    /*    transition: background-color .2s;*/
    /*}*/

    #map {
        grid-row: 4/5;
        grid-column: 1/3;
        width: 100%;
        height: 100%;
        background-color: #212121;
        display: grid;
    }

    #map__loading {
        align-self: center;
        justify-self: center;
    }

}

@media screen and (max-width: 850px) {

    body {
        grid-template-rows: 90px 110px 275px 360px 100vh; /* don't forget to account for grid-gap in total height */
        grid-template-columns: 1fr;
    }

    .header {
        grid-column: 1/2;
    }

    .contact-tagline {
        grid-row: 2/3;
        grid-column: 1/2;
        margin: 0;
        font-size: 2.3rem;
        align-self: center;
        grid-gap: 10px;
    }

    .contact {
        grid-row: 3/4;
        grid-column: 1/2;
        height: 240px;
        width: 290px;
        justify-self: center;
        align-self: center;
        margin: 1vh 1vw;
        padding: 0 12vw;
        grid-gap: 20px;
    }

    .form {
        grid-row: 4/5;
        grid-column: 1/2;
        grid-template-rows: 40px 40px 40px 100px 40px;
        grid-template-columns: calc(270px + 28vw);
        justify-self: center;
        align-self: center;
        margin: 0;
    }

    .form__message {
        height: 100px;
    }

    #map {
        grid-row: 5/6;
        grid-column: 1/2;
    }

}

@media screen and (max-width: 420px) {

    body {
        grid-template-columns: minmax(360px, 420px);
    }

    .contact-tagline {
        padding: 0 20px;
        grid-template-rows: 35px 40px;
        grid-gap: 10px;
    }

    .contact {
        width: 90%;
        padding: 0;
        justify-content: center;
        align-content: center;
    }

    .form {
        grid-template-columns: minmax(325px, 385px);
        /*align-self: center;*/
        margin: 0;
        padding: 0 20px;
    }

    .form__message {
        height: 100px;
    }

    /*.form {*/
    /*    grid-row: 3/4;*/
    /*    grid-column: 2/3;*/
    /*    display: grid;*/
    /*    grid-template-rows: 40px 40px 12vh 40px;*/
    /*    grid-template-columns: minmax(300px, 500px);*/
    /*    grid-gap: 20px;*/
    /*    margin: 0 30px 0 15px;*/
    /*    justify-self: left;*/
    /*}*/

    /*.form__name,*/
    /*.form__email,*/
    /*.form__message {*/
    /*    padding: 12px;*/
    /*    background-color: #27313f;*/
    /*    color: #fff;*/
    /*    border: 1px solid #a3a3a3;*/
    /*    border-radius: 4px;*/
    /*    resize: none;*/
    /*    font-family: 'Roboto', sans-serif;*/
    /*    font-size: 1.5rem;*/
    /*    transition: border .5s;*/
    /*}*/

}