.site-footer {
	position: relative;
	background: color(bg, 1i);

	&::before {
		content: '';
		position: absolute;
		top: -76px;
		left: calc(50% - 360px);
		width: 720px;
		height: 291px;
		background-image: url('../images/footer-bg.svg');
		background-size: 720px 291px;
		background-repeat: no-repeat;
	}

	.footer-particles-container {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
}

.site-footer-bottom {
    @include font-size(8, mobile, true, true, true);
    @if ( get-font-size(8, desktop) != get-font-size(8, mobile) ) {
        @include media( '>medium' ) {
            @include font-size(8, desktop, true, true, true);
        }
    }
    color: color(typography, 3);
	z-index: 1;

    a {
        @include anchor-aspect(footer);
    }
}

.site-footer-inner {
    position: relative; /* To display all elements above the background color */
    display: flex;
    flex-wrap: wrap;
    padding-top: 48px;
    padding-bottom: 48px;
	@include divider(before, dark);
}

.footer-brand,
.footer-links,
.footer-social-links,
.footer-copyright {
    flex: none;
    width: 100%;
    display: inline-flex;
    justify-content: center;
}

.footer-brand,
.footer-links,
.footer-social-links {
    margin-bottom: 24px;
}

.footer-links,
.footer-social-links {

    li {

        + li {
            margin-left: 16px;
        }
    }
}

.footer-social-links {

    li {
        display: inline-flex;

        a {
            padding: 8px;
        }
    }
}

@include media( '>medium' ) {

	.site-footer {

		&::before {
			top: -152px;
			left: calc(50% - 720px);
			width: 1440px;
			height: 582px;
			background-size: 1440px 582px;
		}
	}

    .site-footer-inner {
        justify-content: space-between;
		padding-top: 64px;
		padding-bottom: 64px;
    }

    .footer-brand,
    .footer-links,
    .footer-social-links,
    .footer-copyright {
        flex: 50%;
    }

    .footer-brand,
    .footer-copyright {
        justify-content: flex-start;
    }

    .footer-links,
    .footer-social-links {
        justify-content: flex-end;
    }

    .footer-links {
        order: 1;
        margin-bottom: 0;
    }
}
