/* footer 1 */
.footer1__container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    justify-items: center;
    white-space: nowrap;
}

.footer1__site-logo-container {
    order: 1;
    grid-area: 1 / 1 / 4 / 2;
}

.footer1__image {
    width: 300px;
}

.footer1__navigation-container {
    order: 3;
    grid-area: 2 / 2 / 3 / 3;
    justify-self: left;
}

    .footer1__navigation-container > div {
        white-space: nowrap;
    }

.footer1__social-media {
    order: 2;
    grid-area: 1 / 2 / 2 / 3;
    justify-self: left;
}

    .footer1__social-media .fa-stack {
        color: var(--tertiary-color);
    }

    .footer1__social-media .fa-stack-2x {
        color: var(--tertiary-color);
    }

.footer1 .footer-donate-button {
    margin-left: 1rem;
}

.footer1 .donate-nav-item a {
    margin-top: 0px; /* override site.css */
}

.footer1__disclaimer {
    order: 4;
    grid-area: 3 / 2 / 4 / 3;
    justify-self: left;
    border: 1px solid var(--tertiary-color);
}

@media (max-width: 767px) {
    .footer1__container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, min-content);
    }

    .footer1__navigation-container {
        grid-area: 3 / 1 / 4 / 2;
        justify-self: center;
    }

    .footer1__site-logo-container {
        grid-area: 1 / 1 / 2 / 2;
    }

    .footer1__disclaimer {
        grid-area: 4 / 1 / 5 / 2;
        justify-self: center;
        text-align: center;
        word-break: break-all;
        white-space: normal;
    }

    .footer1__social-media {
        grid-area: 2 / 1 / 3 / 2;
        justify-self: center;
    }
}

@media (max-width: 480px) {
    .footer1__navigation-container {
        justify-content: center;
    }
}

/* footer 2 */
.footer2__social-media .fa-stack {
    color: var(--tertiary-color);
}

.footer2__social-media .fa-stack-2x {
    color: var(--tertiary-color);
}

.footer2__container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    justify-items: center;
    white-space: nowrap;
}

.footer2__image {
    width: 300px;
}

.footer2__social-media-donate__container {
    grid-area: 2 / 2 / 3 / 3;
    justify-self: right;
    display: flex;
}

.footer2__navigation-container {
    grid-area: 1 / 2 / 2 / 3;
    justify-self: right;
}

.footer2__disclaimer {
    grid-area: 3 / 1 / 4 / 3;
    border-width: 1px;
    border-style: solid;
    justify-self: center;
}

.footer2__site-logo-container {
    grid-area: 1 / 1 / 3 / 2;
    justify-self: left;
}

.footer2 .footer-donate-button {
    margin-left: 1rem;
}

.footer2 .donate-nav-item a {
    margin-top: 0px; /* override site.css */
}

@media (max-width: 767px) {
    .footer2__container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, min-content);
    }

    .footer2__navigation-container {
        grid-area: 3 / 1 / 4 / 2;
        justify-self: center;
    }

    .footer2__site-logo-container {
        grid-area: 1 / 1 / 2 / 2;
        justify-self: center;
    }

    .footer2__disclaimer {
        grid-area: 4 / 1 / 5 / 2;
        justify-self: center;
        text-align: center;
        word-break: break-all;
        white-space: normal;
    }

    .footer2__social-media-donate__container {
        grid-area: 2 / 1 / 3 / 2;
        justify-self: center;
    }
}

@media (max-width: 480px) {
    .footer2__navigation-container {
        justify-content: center;
    }
}

/* footer 3 */
.footer3__social-media .fa-stack {
    color: var(--tertiary-color);
}

.footer3__social-media .fa-stack-2x {
    color: var(--tertiary-color);
}

.footer3__image {
    width: 300px;
}

.footer3__disclaimer {
    border: 1px solid var(--tertiary-color);
}

/* footer 4 */
.footer4__social-media .fa-stack {
    color: var(--primary-color);
}

.footer4__social-media .fa-stack-2x {
    color: var(--primary-color);
}

.footer4__container {
}

.footer4__image {
    width: 300px;
}

.footer4__button {
}

.footer4__disclaimer {
    border-width: 1px;
    border-style: solid;
}

@media (max-width: 767px) {
    .footer4__disclaimer {
        text-align: center;
        word-break: break-all;
    }
}

/* --- dynamic elements --- */

div[grapes-name="Footer"] .donate-nav-item {
    padding-left: 0 !important;
}

    div[grapes-name="Footer"] .donate-nav-item a,
    div[grapes-name="Footer"] #footer-donate-button a {
        font-family: var(--headline-font);
    }

div[grapes-name="Footer"] #footer-navigation-items a {
    font-family: var(--headline-font);
}