.preFoot{
    display: grid;
    grid-template-columns: 1fr;
    grid-row: 350px;   
}

.preFoot h1{
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    align-items: center;
    padding-top: 30px;
    padding-bottom: 30px;
    font-family: 'amsterdam', Fallback, brush script MT;
    letter-spacing: 2px;
    font-size: 36px;
}

.preFoot h1:before, .preFoot h1:after{
    display: block;
    content: ' ';
    height: 8px;
    background-image: linear-gradient(right,  #cb5827, transparent);
    background-image: -moz-linear-gradient(right,  #cb5827, transparent);
    background-image:-webkit-linear-gradient(right,  #cb5827, transparent);
    background-image:-ms-linear-gradient(right,  #cb5827, transparent);
    background-image:-o-linear-gradient(right,  #cb5827, transparent);
}

.preFoot h1:after{
    background-image: linear-gradient(left, #cb5827, transparent);
    background-image: -moz-linear-gradient(left,   #cb5827, transparent);
    background-image:-webkit-linear-gradient(left,  #cb5827, transparent);
    background-image:-ms-linear-gradient(left,  #cb5827, transparent);
    background-image:-o-linear-gradient(left,  #cb5827, transparent);
}

.preFooter{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 2em;
    grid-template-areas: 
    "wales llamau";
    padding-bottom: 2em;
}

.preFooter img{
    height: 125px;
    width: 150px; 
}

.preFooter h4{
    color: black;
    font-family: 'dual', Fallback, sans-serif;
    text-align: center;
    padding: 1em;
}

.preFooter p{
    color: black;
    font-family: 'dual', Fallback, sans-serif;
    text-align: center;
    padding-bottom: 1em;
    line-height: 1.5;
}

.preFooter1{
    grid-area: wales;
    padding-left: 2em;
}

.preFooter1a{
    grid-area: llamau;
    padding-right: 2em;
}

.clients{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto;
    gap: 1em;
    grid-template-areas: 
    ". external external external ." 
    "footer2 footer1 footer3 footer5 footer6"
    "footer2a footer1a footer3a footer5a footer6a";
    background-color: #cb5827;
    border-top: black 0.1em solid;
    padding-bottom: 2em;
}

.externalClients{
    grid-area: external;
    color: black;
    font-family: 'amsterdam', Fallback, sans-serif;
    align-items: center;
    justify-self: center;
    letter-spacing: 0.2em;
}

.clients img{
    height: 7em;
    width: 7em;
}

.clients h4{
    color: black;
    font-family: 'dual', Fallback, sans-serif;
    text-align: center;
}

.footer1{grid-area: footer1; display: flex; justify-content: center;}
.footer1 img{width: 8em;}
.footer1a{grid-area: footer1a;}
.footer2{grid-area: footer2; display: flex; justify-content: center;}
.footer2a{grid-area: footer2a;}
.footer3{grid-area: footer3; display: flex; justify-content: center;}
.footer3a{grid-area: footer3a;}
.footer5{grid-area: footer5; display: flex; justify-content: center;}
.footer5a{grid-area: footer5a;}
.footer6{grid-area: footer6; display: flex; justify-content: center;}
.footer6a{grid-area: footer6a;}

#footer4{
    display: grid;
    grid-template-columns: 0.3fr 0.5fr 2fr;
    grid-template-rows: 4.5em;
    grid-template-areas: "mark media docs" ". . weddings" "copy copy info";
    /* gap: 1em; */
    font-size: 0.85em;
    color: #fff;
    font-family: 'dual', Fallback, sans-serif;
    background-color: #000;
    background-size: cover;
}

#mark{
    grid-area: mark;
    align-items: flex-start;
    margin: 1.5em;
}

/* #mark:hover{
    border: #cb5827 0.5em solid;
} */

#media{
    grid-area: media;
    display: flex;
    flex-direction: row;
    align-self: center;
    justify-content: center;
}

#media img{
    border: #000 0.25em solid;
    border: hidden;
}

#media img:hover{
    border: #cb5827 2px solid;
} 

#docs{
    grid-area: docs;
    display: flex;
    align-items: center;
    justify-self: flex-end;
    text-align: right;
    margin-right: 1em;
}

#docs a, #weddingLinks a{
    color: #fff;
    font-style: normal;
    font-size: 1em;
}

#docs a:hover, #weddingLinks a:hover {
    color: #cb5827;
}

#weddingLinks{
    grid-area: weddings;
    text-align: right;
    margin-right: 1em;
}

#instafoot{
    margin-right: 7px;
}

#facefoot{
    padding-bottom: 3px;
    margin-right: 7px;
}

#copy{
    grid-area: copy;
    margin: 1em;
    margin-left: 1.5em;
}

#info {
    grid-area: info;
    text-align: right;
    margin: 1em;
}

/*Medium Desktop*/
@media (max-width:1000px){
    #footer4{grid-template-columns: 1fr 1fr; grid-template-rows: auto; grid-template-areas: "mark media" "docs docs" "weddings weddings" "copy copy" "info info";}
    #mark{display: grid; justify-items:center; align-items:center; margin: 0;}
    #mark a{padding: 0.25em;}
    #media a{padding: 0.25em;}
    #docs{padding: 0; margin: 0; text-align: center; justify-self: center;}
    #weddingLinks{margin: 0.5em; text-align: center; padding: 0;}
    #copy{margin: 0.5em; text-align: center;}
    #info{margin: 0.5em; text-align: center;}
}

/*Small desktop*/
@media (max-width:800px){
    .clients{grid-template-columns: repeat(6, 1fr);
        grid-template-areas: 
        ". external external external external ." 
        "footer2 footer2 footer1 footer1 footer3 footer3"
        "footer2a footer2a footer1a footer1a footer3a footer3a"
        ". footer5 footer5 footer6 footer6 ."
        ". footer5a footer5a footer6a footer6a .";}
    #footer4{font-size: 0.75em;}
}

/*Tablet*/
@media (max-width:600px){
    .preFoot h1{font-size: 24px;}
    .preFooter{grid-template-columns: 1fr; grid-template-areas: "wales" "llamau";}
    .preFooter1, .preFooter1a{padding: 0 1em;}
    .clients{grid-template-columns: repeat(2, 1fr);
        grid-template-areas: 
        "external external" "footer1 footer1a" "footer2 footer2a"
        "footer3 footer3a" "footer5 footer5a" "footer6 footer6a";
        padding-bottom: 1em;}
    .externalClients{letter-spacing: 1px;}
    .footer1 img{width: 150px;}
    div .footer1a, div .footer2a, div .footer3a, div .footer4a, div .footer5a, div .footer6a{display:flex; justify-content: center; align-items: center;}
    #footer4{grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "mark" "media" "docs" "weddings" "copy" "info"; font-size: 0.5em;}
}

/*mobile*/
@media (max-width:375px){
    .preFoot h1{letter-spacing: 1px; font-size: 18px;}
    .preFoot h1:before, .preFoot h1:after{height: 6px;}
}