.c-review {
    @extend %rel;
    overflow: hidden;
    background: {
        image: url(../img/review/bg.png);
        repeat: no-repeat;
        position: center 0;
        color: transparent;
    }
    padding-top: 180px;
    margin-top: -460px;    
    
    .blue & {
        margin-top: -360px;
        
        @media ( min-width: $tablet + 1px ) {
        	padding-bottom: 100px;
        }
        
        @media ( max-width: $base + 80px ) {
        	@include responsive-margin-top(base(-360), 0);
        }
    }
    
    .gray & {
        margin-top: -420px;
        pointer-events: none;
        
        @media ( min-width: $tablet + 1px ) {
        	//padding-bottom: 100px;
        }

        @media ( max-width: $base + 80px ) {
        	@include responsive-margin-top(base(-420), 0);
        }
    }
    
    .violet & {
        @media ( max-width: $base + 80px ) {
        	@include responsive-margin-top(base(-460), rem(-460));
        }
        
        @media ( max-width: $smartphone + px ) {
        	margin-top: -220px;
        }
    }
    
    
    @media ( max-width: $tablet + px ) {
        background-image: none;
    }

    .o-cols {
        
        @media ( max-width: $tablet + px ) {
            flex-direction: column-reverse;
            flex-wrap: wrap;
        }
        
        &__item {
            &:first-of-type {
                @media ( min-width: $tablet + 1px ) {
                    width: grid(528);
                    
                    .gray & {
                        position: relative; z-index: 10;
                        width: grid(728);
                        margin: {
                            top: -150px;
                            left: grid(-60);
                            right: grid(-140);
                        }
                    }
                }
                
                img {
                    @media ( max-width: $tablet + px ) {
                    	margin: 50px auto 0 auto;
                    }
                }
            }
            
            &:last-of-type {
                @extend %rel;

                @media ( min-width: $tablet + 1px ) {
                    width: grid(692);
                }
                
                @media ( max-width: $tablet + px ) {
                	margin-bottom: 160px;
                }
                
                @media ( max-width: $smartphone_portrait + px ) {
                	margin-bottom: 100px;
                }
            }
        }
    }
}
