footer {
    margin-top: var(--size-xxl);
    column-gap: var(--size-m);
    row-gap: var(--size-m);
    z-index: 200;
}

#footer-rabbit {width: 100%;}
#footer-rabbit--container {width: var(--size-l);}

#footer-rabbit svg {width: 100%;}

footer p {width: calc(50% - var(--size-m));}


footer[data-theme="black"] #footer-rabbit svg {fill: black;}
footer[data-theme="black"] p {color: black;}

footer[data-theme="white"] #footer-rabbit svg {fill: white;}
footer[data-theme="white"] p {color: white;}

@media only screen and (min-width: 768px) {
    footer {
        column-gap: var(--size-xl);
        padding-top: var(--size-m) !important;
        padding-bottom: var(--size-m) !important;
    }

    #footer-rabbit {
        position: absolute;
        top: 18px;
        left: 50%;
        transform: translateX(-50%);
    }

    footer p {
        width: calc(50% - var(--size-xl));
    }
}

@media only screen and (min-width: 1096px) {
    #footer-rabbit {top: 20px;}

    body[data-template="work"] footer {
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        background: white;
    }
}