$size: 10px;

$t: transparent;
$blk: #333;
$wht: #fff;
$red: #E2001B;
$gry: #9498A3;


$heart: (
	( $t, $t, $t, $blk, $blk, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $blk, $blk ),
	( $t, $t, $blk, $wht, $blk, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $blk, $wht, $blk ),
	( $t, $blk, $blk, $wht, $blk, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $blk, $wht, $blk, $blk ),
	( $blk, $wht, $blk, $wht, $blk, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $blk, $wht, $blk, $wht, $blk ),
	( $blk, $wht, $blk, $gry, $wht, $blk, $t, $t, $t, $blk, $blk, $t, $t, $t, $blk, $blk, $t, $t, $t, $blk, $wht, $gry, $blk, $wht, $blk ),
	( $blk, $gry, $wht, $blk, $wht, $wht, $blk, $t, $blk, $red, $red, $blk, $t, $blk, $red, $red, $blk, $t, $blk, $wht, $wht, $blk, $wht, $gry, $blk ),
	( $t, $blk, $gry, $wht, $gry, $wht, $wht, $blk, $red, $wht, $wht, $red, $blk, $red, $red, $red, $red, $blk, $wht, $wht, $gry, $wht, $gry, $blk ),
	( $blk, $wht, $blk, $wht, $wht, $wht, $wht, $blk, $red, $wht, $red, $red, $red, $red, $red, $red, $red, $blk, $wht, $wht, $wht, $wht, $blk, $wht, $blk ),
	( $blk, $gry, $wht, $gry, $wht, $wht, $wht, $blk, $red, $red, $red, $red, $red, $red, $red, $red, $red, $blk, $wht, $wht, $wht, $gry, $wht, $gry, $blk ),
	( $t, $blk, $gry, $blk, $wht, $wht, $wht, $gry, $blk, $red, $red, $red, $red, $red, $red, $red, $blk, $gry, $wht, $wht, $gry, $blk, $gry, $blk ),
	( $t, $t, $blk, $gry, $gry, $gry, $gry, $blk, $t, $blk, $red, $red, $red, $red, $red, $blk, $t, $blk, $gry, $gry, $gry, $gry, $blk ),
	( $t, $t, $t, $blk, $blk, $blk, $blk, $t, $t, $t, $blk, $red, $red, $red, $blk, $t, $t, $t, $blk, $blk, $blk, $blk ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $blk, $red, $blk ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $blk )
);



@function pixelize($colors, $size) {
	$result: '';
	$numRows: length($colors);

	@for $rowIndex from 1 through $numRows {
		$y: ($rowIndex - 1);
		$row: nth($colors, $rowIndex);
		$numCols: length($row);

		@for $cellIndex from 1 through $numCols {
			$x: ($cellIndex - 1);
			$color: nth($row, $cellIndex);

			$sep: ',';
			@if $x == 0 and $y == 0 {
				$sep: '';
			}

			$result: $result + '#{$sep} #{$x * $size} #{$y * $size} #{$color}'
		}
	}

	$result: unquote($result);
	@return $result;
}


#main {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	height: 100vh;

	#heart {
		position: relative;
		width: calc( 25 * #{$size} );
		height: calc( 14 * #{$size} );
	
		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: $size;
			height: $size;
			box-shadow: pixelize($heart, $size);
		}
	}
}