.c-download {
    
    &__buttons {
        @extend %flex;
        width: 544px;
        
        @media ( max-width: $design + px ) {
        	@include responsive-width(design(544), rem(370));
        }
        
        @media ( max-width: $tablet_portrait + px ) {
            width: 300px;
        }

        a {
            display: block;
            margin: 0 10px;
            
            .gray & {
                margin: 0 5px;
            }
            
            &:hover {
                opacity: .9;
            }
        }
    }
        
    .o-btn {
        max-width: 544px;
        height: 125px;
        
        .blue & {
            background-image: linear-gradient(-239deg, #0066a3 0%, #00afe9 100%);
        }
        
        .gray & {
            background-image: linear-gradient(45deg, #4f8192 0%, #73a1b0 100%);
        }
        
        .violet & {
            background-image: linear-gradient(-239deg, #5d69b1 0%, #5582d2 100%);
        }

        .green & {
            background-image: linear-gradient(-239deg, #144e2c 0%, #3c7e65 100%);
        }
        
        @media ( max-width: $design + px ) {
        	@include responsive-width(design(544), rem(370));
        	@include responsive-height(design(125), rem(70));
        }
        
        @media ( max-width: $tablet_portrait + px ) {
        	width: 300px;
        	height: 80px;
        }
        
        &:after {
            @extend %abs;
            @extend %abs-pseudo; z-index: -1;
            left: 0; top: 0;
            width: 100%; height: 100%;
            border-radius: 20px;
            background: {
                position: 0 100%;
                repeat: no-repeat;
            }
            
            .blue & {
                background-image: url(../img/assets/button-wave--blue.png);
                background-size: 100% auto;
            }

            .violet & {
                background-image: url(../img/assets/button-wave--violet.png);
            }

            .green & {
                background-image: url(../img/assets/button-wave--green.png);
                height: 77px;
                top: auto; bottom: 0;
                background-position-y: 20px;
            }
        }
        
        span {
            @extend %flex;
            @extend %flex-y;

            &:after {
                content: ' ';
                width: 48px;
                display: inline-block;
                height: 45px;
                margin-left: 30px;
                background: {
                    image: url(../img/icons/download.png);
                    repeat: no-repeat;
                    position: center;
                    size: 100% auto;
                }
                
                @media ( max-width: $design + px ) {
                    @include responsive-margin-left(design(30), rem(10));
                	@include responsive-width(design(40), rem(30));
                }
            }
        }
    }
}