.attireUserRepositories {

    padding: 2em;
    background-color: #FBFBFB; border-top: 1px solid $colorGrayLight1;

    > .loader {

        @include fontSansLight;

        font-size: 1.6em; padding: em(20, 16) 0; text-align: center;
        color: $colorGrayDark3;

    }

    > .title {

        @include fontSansLight;

        font-size: 1.5em; padding-bottom: em(20, 15);
        color: $colorGrayDark3;

    }

    > ul {

        > li {

            padding: 2em 0; position: relative;

            &:last-child {

                padding-bottom: 0;

            }

            &:before {

                content: ""; position: absolute; left: 0; top: 0; width: 3em;
                border-top: 1px solid $colorGrayLight1;

            }

        }

    }

    @include mediaMinWidth($breakpointMedium) {

        > .title {

            text-align: center; position: relative; padding: em(5, 15) 0 em(25, 15);

            &:before {

                content: "";
                position: absolute; top: 100%; left: 50%; width: em(50, 15); margin-left: em(-25,15);
                border-top: 1px solid $colorGrayLight1;

            }

        }

        > ul {

            max-width: 110em; margin: 0 auto; overflow: hidden;

            > li {

                float: left; width: percentage(1/3); box-sizing: border-box; padding: 3em 4em 4em;
                // text-align: center;

                &:before { display: none; }

            }

        }

    }

}

.attireUserRepo {

    display: block;

    > .title {

        @include fontSansBold;

        font-size: 2.4em; margin-bottom: em(15, 20);
        color: $colorGrayDark1;

    }

    > .description {

        font-size: 1.6em; line-height: 1.6;
        color: $colorGrayDark2;

    }

}