painted-footer {
    justify-self: flex-end;
    --footer-background-color: var(--bright-brown);
    background-color: var(--footer-background-color);
    z-index: 0;
    margin-top: auto;

    & > footer {
        --footer-persistent-height: 2rem;

        & > * {
            padding-left: 1rem;
            padding-right: 1rem;
            box-sizing: border-box;
        }

        & > .footer-banner {
            width: 100%;
            height: 7rem;
            display: flex;
            padding-top: 1rem;
            padding-bottom: 0.5rem;
            margin-bottom: var(--footer-persistent-height);
            background-color: var(--footer-background-color);
            align-items: center;
            overflow: hidden;

            & > div {
                height: 100%;
            }

            & img {
                height: 100%;
                width: auto;
            }

            & > .resisense {
                display: flex;
                gap: 1rem;

                & > .resisense-logo-aside {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    color: var(--deep-green);

                    & > .resisense-name {
                        --size: 2.6rem;
                        font-size: var(--size);
                        line-height: var(--size);
                        font-weight: 700;
                        flex-grow: 1;
                        display: flex;
                        align-items: center;
                    }

                    & > .socials {
                        font-size: 1rem;
                        display: flex;
                        flex-direction: column;

                        & > .social {
                            width: fit-content;

                            & > a {
                                line-height: 1rem;
                                display: flex;
                                align-items: center;
                                gap: 0.2rem;
                                width: fit-content;
                                padding-right: 1rem;

                                & > img {
                                    max-width: 1rem;
                                }
                            }
                        }
                    }
                }
            }

            & .divider {
                margin: 0 1rem;
                border-left: 2px dashed var(--desaturated-orange);
            }

            & > .logo-container-wrapper {
                display: grid;
                grid-template-columns: auto auto;
                grid-template-rows: 50% 50%;
                gap: 0.2rem;

                & > .cuhk-department-logo-container,
                & > .sponsor-logo-container {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    gap: 0.5rem;

                    & > a {
                        height: 100%;

                        & > img {
                            width: 100%;
                            height: 100%;
                            object-fit: contain;
                        }
                    }
                }
            }
        }

        & > .footer-persistent {
            background-color: var(--footer-background-color);
            position: fixed;
            bottom: 0;
            display: flex;
            padding-top: 0.1rem;
            padding-bottom: 0.1rem;
            height: var(--footer-persistent-height);
            width: 100%;
            justify-content: space-between;
            align-items: center;
            flex-direction: row;

            & > div {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: row;

                & > span > a {
                    height: 100%;

                    & > img {
                        vertical-align: middle;
                        height: 20px;
                        aspect-ratio: 1/1;
                        object-fit: contain;
                    }
                }

                &.license-container a {
                    font-weight: 700;
                    text-decoration: underline;
                }
            }
        }
    }
}