////
/// @group layout/responsive
////

/// Template for styling responsive layouts. 
/// @todo Make it functional!
@mixin os-responsive {
	.l-csslayout {
		background: green;
		}
		
	.l-csslayout .v-caption-os-box {
		background: yellow;
		}

	.l-csslayout[width-range~="0-399px"]    {
	 	.os-box {
	 		width: 100%;
	 		}
	 	.v-caption-os-box {
	 		width: 100%;
	 		}
		}

	.l-csslayout[width-range~="400-499px"]    {
	 	.os-box {
	 		width: 50%;
	 		}
	 	.v-caption-os-box {
	 		width: 50%;
	 		}
		}
 
.l-csslayout[width-range~="500px-599px"] .os-box {width: 40%}
.l-csslayout[width-range~="500px-599px"] .v-caption-os-box {width: 10%}

.l-csslayout[width-range~="600px-799px"] .os-box {width: 20%}
.l-csslayout[width-range~="600px-799px"] .v-caption-os-box {width: 13%}
	
.l-csslayout[width-range~="800px-"]      .os-box {width: 20%}
.l-csslayout[width-range~="800px-"]      .v-caption-os-box {width: 5%}
 }