
    .social {

        font-size: 2em;
        position: relative;
        display: inline-block;
        left: 0.3em;

        &__item {

            display: inline-block;
            padding: 0;
            opacity: 0.3;

            transition: transform 0.3s ease, opacity 0.15s ease;

            &:nth-of-type(1) { transition-delay: 0s; }
            &:nth-of-type(2) { transition-delay: 0.1s; }
            &:nth-of-type(3) { transition-delay: 0.2s; }

            &.twitter svg { top: 4px; }
            &.github svg { top: 4px; }
            &.codepen svg { top:  4.5px; }

            @media screen and ( max-width: 440px ) {

                opacity: 0.8;
                font-size: 1.2em;

            }

        }

        &__link {
            
            padding: 1em 1.5em;
            margin-left: -4px;
            color: lighten( $bg, 50% );

            &:hover {
                color: white;
            }

            &:visited {
                color: lighten( $bg, 50% );
            }

        }

    }

@media screen and ( min-width: 441px ) {

    header:hover .social {

        &__item {

            transform: translateY(-0.2em);
            opacity: 1;

        }

    }

}

    .social {

        font-size: 2em;
        position: relative;
        display: inline-block;
        left: 0.3em;

        &__item {

            display: inline-block;
            padding: 0;
            opacity: 0.3;

            transition: transform 0.3s ease, opacity 0.15s ease;

            &:nth-of-type(1) { transition-delay: 0s; }
            &:nth-of-type(2) { transition-delay: 0.1s; }
            &:nth-of-type(3) { transition-delay: 0.2s; }

            &.twitter svg { top: 4px; }
            &.github svg { top: 4px; }
            &.codepen svg { top:  4.5px; }

            @media screen and ( max-width: 40em ) {

                opacity: 0.8;
                font-size: 1.2em;

            }

        }

        &__link {
            
            padding: 1em 1.5em;
            margin-left: -4px;
            color: lighten( $bg, 50% );

            &:hover {
                color: white;
            }

            &:visited {
                color: lighten( $bg, 50% );
            }

        }
            
        @media screen and ( max-width: 40em ) {
            
            font-size: 1.4em;
            left: 0;

        }

    }

@media screen and ( min-width: 40em ) {

    header:hover .social {

        &__item {

            transform: translateY(-0.2em);
            opacity: 1;

        }

    }

}
Scale social icons for mobile
Scale social icons for mobile
