$d: 2em;

/* grid everything! */
html, body, div, ::after { display: grid }
/* stretch across entire viewport */
html { min-height: 100% }
/* shadow on clipped card (clip-path cuts off box-shdow) */
body { filter: drop-shadow(2px 2px 5px) }

div {
	background: 
		/* gold to reddish gradient */
		linear-gradient(#f99a00, #ac1a1a), 
		/* base image */
		url(https://images.unsplash.com/photo-1611146479742-12b6cdacfbab?w=1400) 50%/ cover;
	/* image tint using gold to reddish gradient on top of it */
	background-blend-mode: color;
	/* fix for ugly edges, round corners as extra */
	clip-path: inset(1px round 7px);
	
	&::before, &::after {
		grid-area: 1/ 1; /* stack grid items */
		content: '' /* pseudos need it to be displayed */
	}
	
	&::before {
		/* halftone technique */
		background: 
			/* pattern */
			radial-gradient(#fff, #888) 0 0/ #{$d $d}, 
			/* map */
			radial-gradient(circle at 0, #fff, #000);
		background-blend-mode: multiply;
		filter: contrast(50) blur(2px) contrast(4);
		/* blend halftone with tinted image background of parent
		 * image replaces white in dots area, the rest remains black */
		mix-blend-mode: darken
	}
	
	&::after {
		place-content: center end; /* position text content box */
		z-index: 1; /* needed because ::before has filter */
		padding: 1em .5em 1em 50%;
		background: /* this is what breaks Firefox */
			/* need to make 1st line white & 2n salmon like this
			 * because we need grid for text content positioning 
			 * and ::first line doesn't work with grid */
			linear-gradient(#fff 50%, #ff4141 0) text, 
			/* can't set different background-clip 
			 * on background-color layer */
			conic-gradient(#1a1c33 0 0) border-box;
    color: #0000; /* allow text gradient to show */
		font: 2.875vw rubik, sans-serif;
		/* text alignment *within* text content box */
		text-align: right;
		text-transform: uppercase;
		/* blend with result of blending halftone 
		 * with card tinted image backdrop
		 * black is replaced with this ::after */
		mix-blend-mode: lighten;
		content: "You don't have to be original, just try to be good"
	}
}