#header-inner {
    display: grid;
    grid-template-areas: 
    "business-name business-name business-name business-name business-name business-name phone"
    "tag-line tag-line tag-line tag-line tag-line tag-line owner-pic"
    "tick s e e a a mosquito"
    "owner owner owner . website website website"
    "service-location service-location service-location service-location service-location service-location service-location";
}

#header-inner .phone{
    grid-area: phone;
    margin: auto;
}

#header-inner .business-name{
    grid-area: business-name;
}

#header-inner .tag-line{
    grid-area: tag-line;
    margin: auto;
}

#header-inner .tag-footer{
    grid-area: tag-footer;
    margin: auto;
}

.owner-pic{
    grid-area: owner-pic;
}

#header-inner .owner{
    grid-area: owner;
    margin: inherit;
}

#header-inner .website{
    grid-area: website;
    margin: inherit;
}

#header-inner .mosquito{
    grid-area: mosquito;
    margin: auto;
}

#header-inner .tick{
    grid-area: tick;
    margin: auto;
}

#header-inner .s{
    grid-area: s;
    margin: auto;
}
#header-inner .e{
    grid-area: e;
    margin: auto;
}
#header-inner .a{
    grid-area: a;
    margin: auto;
}
#header-inner .service-location{
    grid-area: service-location;
    text-align: center;
    margin: auto;
    font-size: smaller;
}

nav{
    display: grid;
    grid-template-columns: auto auto auto auto auto;
}
article{
    display: grid;
    grid-template-areas: 
    "h2 h2"    
    "boxContentOne boxLogo" 
        "boxContentThree boxContentTwo"
        "boxPhotoTwo boxPhotoOne"
}

.h2{
    grid-area: h2;
}

.boxLogo{
    grid-area: boxLogo;
}

.boxPhotoOne{
    grid-area: boxPhotoOne;
}

.boxPhotoTwo{
    grid-area: boxPhotoTwo;
    margin-top: -5em;
}

.boxContentOne{
    grid-area: boxContentOne;
}

.boxContentTwo{
    grid-area: boxContentTwo;
}
.boxContentThree{
    grid-area: boxContentThree;
}

.boxContentOne{
    grid-area: boxContentOne;
}

/*product page */
#product article{
    grid-template-areas:
    "h2" 
        "boxLogo"
        "boxContentOne"  
        "boxContentThree" 
        "boxContentTwo"
        "boxPhotoTwo" 
        "boxPhotoOne"
}


body {
    display: grid;
    grid-template-areas: "nav" "header" "main" "footer";
}

nav {
    grid-area: "nav";
    position: sticky;
    top: 0;
}

header {
    grid-area: "header";
}

main {
    grid-area: "main";
}

footer {
    grid-area: "footer";
}

@media print  {
    body{
        transform: scale(0.6);
    }
    article{
        grid-template-areas: 
        "h2 h2"
        "boxContentOne boxLogo" 
        "boxPhotoOne boxContentThree"
        "boxContentTwo boxPhotoTwo";
        width: 100%;
    }
    h2 span{
        font-size: medium;
    }
    footer{
        display:none;
    }
}