.o-cols {
    @extend %flex;
    @extend %flex-wrap;    

    &--2,
    &--3 {
        width: calc(100% + 40px);
        margin: 0 -20px;
        
        @media ( max-width: $tablet_portrait + px ) {
            width: calc(100% + 30px);
            margin: 0 -15px;
        }
        
        .o-cols__item {
            @extend %rel;
            margin-bottom: 40px;
            padding: 0 grid(20);
    
            @media ( max-width: $tablet_portrait + px ) {
            	margin-bottom: 30px;
            	padding: 0 15px;
            }
        }
    }    
    
    &--2 {
        .o-cols__item {
            width: calc(100% / 2);
        }
    }

    &--3 {
        .o-cols__item {
            width: calc(100% / 3);
        }
    }
}

