<div class="wrapper">
	<div class="container">
		<div class="element">
			<p>LESS Example</p>
			<svg width="400" height="250" viewBox="0 0 400 250">
				<rect x="0" y="0" width="400" height="250" fill="#eeeeee" />
				<text transform="translate(50, 50)" font-size="16" font-family="Arial">Ahh, I resize just in time...</text>
			</svg>
		</div>
	</div>
</div>
.viewport(@property, @initialsize, @maxwidth, @unit:vw) {
	@{property}: unit((@initialsize*100)/@maxwidth, @unit);
}

.wrapper {
	width: 100%;
	height: 100%;
	font-family: Arial;
}

.container {
	max-width: 1000px;
	width: 90%;
}

.element {
	width: 50%;
	background-color: #cccccc;
	padding: 20px;
}

p {
	text-align: center;
	font-size: 24px;
}

svg {width: 100%;}

@media only screen and (max-width: 910px) {
	p {.viewport(font-size, 24, 910);}
	svg {
		.viewport(width, 400, 910);
		.viewport(height, 250, 910);
	}
}
View Compiled
// For a Medium post
// 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.