footer {
    background-color: var(--background-colour);

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 8px;

    @media screen and (min-width: 512px) {
        flex-direction: row;
        text-align: initial;
    }
}

.footer-item {
    flex: 1;
    display: flex;
    flex-direction: row;
    gap: .5rem;

    @media screen and (min-width: 512px) {
        flex-direction: column;
    }
}

.footer-item:not(:last-child) {
    flex-grow: 1;
}

.footer-item:not(:first-child, :last-child) {
    text-align: center;
}

.footer-item:last-child {
    text-align: center;

    @media screen and (min-width: 512px) {
        text-align: right;
    }
}