.attireAuthor {

    position: relative; margin-bottom: 3em;

    > .imageElement {

        display: inline-block; overflow: hidden; vertical-align: middle; width: 4em; height: 4em; position: relative;
        border-radius: 50%; border-radius: 50%;

        > img { display: block; width: 100%; };

    }

    > .name {

        @include fontSansBold;

        font-size: 1.3em; display: inline-block; vertical-align: middle; position: relative;
        text-transform: uppercase; letter-spacing: 0.1em; padding: 0 1em;
        background-color: #fff; color: $colorGrayDark1;

        &:first-child {

            padding-left: 0;

        }

    }

    @include mediaMaxWidth($breakpointMedium) {

        > .socialBox {

            position: relative; padding: 1em 0 0; margin-top: 0.5em;

            a {

                font-size: 1.4em; display: block; padding: em(8,14) em(5,14) em(8,14) em(55,14);
                color: $colorGrayDark3;

                &:before { font-size: 1.3em; }

            }

            &:before {

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

            }

        }

    }

    @include mediaMinWidth($breakpointMedium) {

        margin-bottom: 5em;

        &.noImage {

            margin-top: 4em;

        }

        > .imageElement {

            width: 5em; height: 5em;

        }

        > .socialBox {

            position: absolute; right: 0; top: 50%; margin-top: -2em; background-color: #fff;
            padding: 0 2em 0 1em;

            a {

                @include iconReplacement(40);
                &:before { font-size: 2em; color: $colorGrayDark2; }
                &:hover:before { color: $colorMain1; }

            }

        }

        &:before {

            content: ""; position: absolute; left: 0; right: 0; top: 50%;
            border-top: 1px solid $colorGrayLight1;

        }

    }

}