div.reflected#pic
	img(src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/tiger.jpg')
div.reflected#vid
	video(src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/video_ex_flower_640x360.mp4' loop, autoplay muted)

svg
	linearGradient#lg(gradientTransform='rotate(90)')
		stop(offset='0%' stop-color='#000')
		stop(offset='100%' stop-color='#fff')
	mask#m(maskContentUnits='objectBoundingBox')
		rect(width='1' height='1' fill='url(#lg)')

$off: .25em;

html {
	height: 100vh;
	background: repeating-linear-gradient(45deg, gold 1px, gold 3px, tan 4px, tan 7px);
}

.reflected {
	display: inline-block;
	position: relative;
	margin-right: 1em;
	width: 16em; height: 10em;
	
	/* WebKit-only solution */
	-webkit-box-reflect: below $off linear-gradient(transparent, white);
	/**/
	
	/* Firefox-only solution */
	&:after {
		position: absolute;
		top: calc(100% + #{$off}); left: 0;
		width: inherit; height: inherit;
		transform: scaleY(-1);
		
		/* only works in Firefox */
		mask: url(#m);
		/**/
		
		content: '';
	}
}

img, video {
	width: inherit; height: inherit;
	object-fit: cover;
}

/* only works in Firefox */
#pic:after {
	background: -moz-element(#pic);
}

#vid:after {
	background: -moz-element(#vid);
}