<div></div>

$gs: 2em;
$ms: 2*$gs;
$c: fuchsia;

html, body, div { display: grid }

html { min-height: 100% }

body { background: #262626 }

div {
	place-self: center;
	overflow: hidden;
	border-radius: 7px;
	box-shadow: 2px 2px 5px #141414;
	
	&::before, &::after {
		--pattern: 
			linear-gradient(90deg, #000, #{$c}, #000);
		grid-area: 1/ 1;
		padding: Round(down, Min(23em, 45vmin), #{$gs});
		background: 
			/* map */
			linear-gradient(rgba($c, .47), #000), 
			linear-gradient($c, rgba(#000, .47)), 
			/* pattern */
			var(--pattern) 0 0/ #{$gs $gs};
		background-blend-mode: screen, multiply;
		filter: contrast(35) contrast(.65);
		content: ''
	}
	
	&::after {
		--pattern: 
			radial-gradient(#{$c}, #000 71%);
		mask: 
			repeating-conic-gradient(
					red 0% 25%, transparent 0% 50%) 
				0 0/ #{$ms $ms}
	}
}