/*customized header with logo*/
.header-main {
    gap: 30px;
}

.site-name-with-logo {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.site-name {
    display: none;
}

/*adjusted footer to display address and contact details in 2 columns on desktop only*/
@media screen and (min-width: 992px) {

    .contact {
        display: grid;
        grid-template-areas:
            "title title"
            "address phone"
            "address email"
            "address directions";
    }
    .footer-heading {
        grid-area: title;
    }
    .address {
        grid-area: address;
    }
    .phone {
        grid-area: phone;
    }
    .directions {
        grid-area: directions;
    }

}