.o-circleicon {
    @extend %flex;
    @extend %flex-xy;
    @extend %rel;
    width: 184px;
    height: 184px;
    border-radius: 50%;

    margin: 0 auto 20px auto;
    
    .blue & {
        background-image: linear-gradient(-239deg, #0066a3 0%, #00afe9 100%);
    }
    
    .gray & {
        background-color: $c-gray-06;
    }
    
    .violet & {
        background-image: linear-gradient(-239deg, #5d69b1 0%, #5582d2 100%);
    }

    .green & {
        background-image: linear-gradient(-239deg, #12562f 0%, #114b30 100%);
    }
    
    @media ( max-width: $base + 80px ) {
    	@include responsive-width(base(184), rem(100));
    	@include responsive-height(base(184), rem(100));
    }
}
