.footer {
    background: var(--background-dark);
    color: white;
    font-size: 0.925rem;

    a {
        color: inherit;
        text-decoration: none;
    }

    &--content {
        margin: 0 auto;
        padding: var(--space-medium) 0;
        max-width: var(--width);

        display: flex;
        flex-direction: row;
        align-items: start;

        @media($mobile-breakpoint) {
            flex-direction: column;
            align-items: center;
            gap: var(--space-large);
        }
    }

    &--logo {
        width: 100px;
    }

    &--copyright {
        display: flex;
        align-self: center;
        padding: var(--space-medium);
    }

    &--links {
        flex: 1 1 1px;
        display: flex;
        align-self: center;
        align-items: center;
        justify-content: end;

        @media($mobile-breakpoint) {
            flex-direction: column;
        }

        img {
            width: 1.8em;
            filter: invert(100%);
        }
    }

    &--link {
        @extend %button;
        display: flex;
        padding: var(--space-xsmall);
    }
}