mixin heading(className)
	p(class=className) Hello
	
.grid
	+heading('stroke shadow')
	+heading('stroke-shadow')
	+heading('stroke halftone')
	+heading('stroke halftone halftone-color')

$body: #fef3c7;
$stroke: #111827;
$shadow: #db2777;
$halftone: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAHElEQVQYV2NUVFT8f//+fUYGBgYGMAEDcA5IBQCKJQVmn76DhAAAAABJRU5ErkJggg==");

@mixin stroke-width($property) {
	-webkit-text-stroke-width: $property;
	-moz-text-stroke-width: $property;
}

@mixin stroke-color($property) {
	-webkit-text-stroke-color: $property;
	-moz-text-stroke-color: $property;
}

@mixin background-clip($property) {
	-webkit-background-clip: $property;
	-moz-background-clip: $property;
	background-clip: $property;
}

@mixin fill-color($property) {
	-webkit-text-fill-color: $property;
	-moz-text-fill-color: $property;
}

.stroke {
	@include stroke-width(2px);
	@include stroke-color($stroke);
	color: transparent;
}

.shadow {
	text-shadow: 6px 6px $shadow;
}

.stroke-shadow {
	color: $body;
	text-shadow: -2px 0 $stroke, 0 -2px $stroke, 2px 0 $stroke, 0 2px $stroke,
		2px 2px $stroke, -2px -2px $stroke, -2px 2px $stroke, 2px -2px $stroke,
		6px 6px $shadow;
}

.halftone {
	position: relative;

	&:after {
		content: "Hello";
		background: $halftone repeat;
		font-size: 15vw;
		letter-spacing: 6px;
		left: calc(50% + 6px);
		position: absolute;
		top: calc(50% + 6px);
		transform: translate(-50%, -50%);
		z-index: -1;
		@include stroke-width(0);
		@include background-clip(text);
		@include fill-color(transparent);
	}
}

.halftone-color {
	&:after {
		background-color: $shadow;
	}
}

body {
	background-color: $body;
	display: grid;
	height: 100vh;
	place-content: center;
	text-align: center;

	p {
		font-size: 15vw;
		font-weight: bold;
		letter-spacing: 5px;
		margin: 0;
	}

	.grid {
		display: grid;
		grid-gap: 5vw;
		grid-template-columns: 1fr;

		@media screen and (min-width: 768px) {
			grid-template-columns: 1fr 1fr;
		}
	}
}