
/*--------------------------------------------------------------
# Site Footer
--------------------------------------------------------------*/

.site-footer {
    background-color: $chia-green;
    background-image: url(/img/bg/tiling-abstract-shapes.png);
    background-position: -(rem(342)) 0;
    background-repeat: no-repeat;
    color: $white;
    padding: rem(36) 3.125%;
    a, a:visited {
        color: $white;
        &:hover, &:active {
            color: rgba($white, 0.4);
        }
    }
    @include breakpoint(460) {
        background-position: -(rem(257)) 0;
        padding: rem(60) 3.125%;
    }
    @include breakpoint(900) {
        background-position: -(rem(171)) 0;
    }
    @include breakpoint(1200) {
        background-position: 0 0;
    }
}

/*--------------------------------------------------------------
# Footer Content Container
--------------------------------------------------------------*/

.footer-content-container {
    @include breakpoint(460) {
        margin-left: rem(100);
    }
    @include breakpoint(768) {
        margin-left: 15%;
    }
    @include breakpoint(900) {
        margin-left: 20%;
        margin-right: 8.4722%;
    }
    @include breakpoint(1200) {
        margin-left: 33.89%;
    }
}

/*--------------------------------------------------------------
# Logo
--------------------------------------------------------------*/

.footer-logo {
    margin-bottom: rem(36);
}

/*--------------------------------------------------------------
# Company Links
--------------------------------------------------------------*/

.footer-company-links {
    display: grid;
    gap: rem(24) rem(24);
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    @include breakpoint(576) {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/*--------------------------------------------------------------
# Footer Columns
--------------------------------------------------------------*/

.footer-col {
    ul {
        @include reset-list;
        @include typeset($responsive-body-font-size, 21);
        @include breakpoint(768) {
            @include typeset($body-font-size, 21);
        }
    }
    li {
        margin-bottom: rem(8);
    }
}

/*--------------------------------------------------------------
# Social Icons
--------------------------------------------------------------*/
.social-icon {
    max-width: 24px;
    margin-right: 0.5rem;
}