/* ==========================================================
   Footer - Structure
   1) Footer Shell
   2) Footer Copy
   3) Responsive
   ========================================================== */

/* ==========================================================
   Footer Shell
   ========================================================== */
.site-footer {
    position: relative;
    left: 50%;
    width: calc(100dvw - (2 * var(--dark-block-margin)));
    margin-inline: 0;
    margin-bottom: var(--dark-block-bottom-margin);
    transform: translateX(-50%);
    background-color: var(--bg-dark);
    border-bottom-left-radius: var(--dark-block-radius);
    border-bottom-right-radius: var(--dark-block-radius);
    text-align: center;
    padding-bottom: 20px;
    padding-top: 30px;
}

/* ==========================================================
   Footer Copy
   ========================================================== */
.site-footer-copy {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 300;
    color: var(--text-grey);
    opacity: 1;
    letter-spacing: 0.02em;
}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 640px) {
    .site-footer {
        left: 0;
        width: 100dvw;
        transform: none;
        margin-inline: 0;
        margin-bottom: 0;
        border-radius: 0;
        padding-bottom: 18px;
    }

    .project-page .site-footer {
        left: 50%;
        width: calc(100dvw - (2 * var(--page-gutter)));
        transform: translateX(-50%);
        border-top: 1px solid var(--grey);
        padding-top: 14px;
    }
}