.site-footer{
    @apply relative bg-black text-white pb-10 text-size-sm md:text-size-base;
    &__backTop{
        background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 27'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m11.5 4.289-7.32 6.778L2.82 9.6 12.5.637 22.18 9.6l-1.36 1.467L13.5 4.29V27h-2V4.289Z' fill='%23fff'/%3E%3C/svg%3E");
        background-size: 24px;
        @apply absolute top-7.5 right-[calc(var(--grid-gutter)*2)] -indent-[9999px] w-8 h-8 bg-no-repeat;
    }
    &__title{
        @apply flex items-start mb-12.5 pt-8 md:pt-6.25;
        svg{
            @apply w-7.5 mr-5 md:hidden;
        }
        p{
            @apply text-size-md md:text-size-base md:font-bold text-white -translate-y-2 md:translate-y-0;
            span{
                @apply block md:inline;
            }
        }
    }
    &__main{
        @apply grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-x-[calc(var(--grid-gutter)*2)];
        > div{
            p{
                @apply text-size-sm md:text-size-base text-white mb-0;
            }
            > span{
                @apply font-bold;
            }
        }
    }
    &__nav, &__social-links{
        ul{
            @apply mt-3.75;
            li{
                @apply border-t border-grey-500 md:border-t-0 flex items-center;
                &:last-child{
                    @apply border-b md:border-b-0;
                }
                &::before{
                    content: '';
                    @screen md{
                        content: none;
                    }
                    background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37 37'%3E%3Cpath d='m21.441 12.5 5.556 6m0 0-5.556 6m5.556-6H10' stroke='%23fff'/%3E%3C/svg%3E");
                    @apply inline-block w-9 h-9 mr-2.5 bg-no-repeat;
                }
            }
        }
    }
    &__colophon{
        nav{
            @apply pt-6.25 border-t border-white mt-12.5;
            ul{
                @apply flex;
                li{
                    &:not(:last-child){
                        @apply mr-7.5;
                    }
                    a{
                        @apply text-sm md:text-base;
                    }
                }
            }
        }
    }
}