.address,
.links {
    font-family: hm-title;
}

.header-wrapper {
    display: grid;
}

.logomark {
    grid-area: a;
}

.address {
    grid-area: b;
    min-width: max-content;
    height: fit-content;
}

.socials {
    grid-area: c;
    min-width: max-content;
    height: 22px;
}

.links {
    grid-area: d;
    margin-top: 15px;
}

.motto {
    grid-area: e;
    margin-top: 15px;
}

.motto-image {
    aspect-ratio: 77/50;
}

.favicon-link {
    padding: 1.5px;
}

footer {
    height: 30px;
}

@media only screen and (min-width: 1000px) {
    html {
        background-image: url("../backgrounds/dots.png");
        background-repeat: repeat-x;
        width: 100%;
        height: 131px;
    }

    .header-wrapper {
        justify-content: center;
        grid-template-areas: "a . b""a . c""d d d""e e e";
    }

    .logomark {
        width: 320px;
    }

    .address,
    .socials {
        justify-self: end;
    }

    .links,
    .motto {
        display: flex;
        width: 1000px;
    }

    .motto-image {
        width: 1000px;
    }

    .text-link {
        margin: auto;
    }

    .body-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 504px);
        justify-content: center;
        margin-top: 25px;
    }

    .mobile-only {
        display: none;
    }

    .display-image {
        width: 496px;
    }

    .text-block {
        width: 450px;
        margin-left: 30px;
    }
}

@media only screen and (max-width: 1000px) {
    html {
        background-image: url("../backgrounds/dots-large.png");
        background-repeat: repeat-x;
        width: 100%;
        height: 372px;
    }

    .header-wrapper {
        align-content: center;
        grid-template-areas: "a a""d b""d c""e e";
    }

    .logomark {
        margin: 2px;
        max-width: 98%;
    }

    .address {
        justify-self: end;
        margin-right: 1%;
        margin-top: 15px;
    }

    .socials {
        justify-self: end;
        margin-right: 1%;
        position: relative;
        top: -75px;
    }

    .links {
        display: block;
        width: 107px;
        justify-self: start;
    }

    .motto {
        display: flex;
    }

    .motto-image {
        width: 100%;
    }

    .body-wrapper {
        display: block;
    }

    .display-image:not(.mobile-only):not(.mobile) {
        display: none;
    }

    .display-image {
        width: 98%;
    }
}