<div class='card'></div>
<div class='card'></div>
<div class='card'></div>
<div class='card'></div>
<div class='card'></div>
<div class='card'></div>
<div class='card'></div>
<div class='card'></div>
<div class='card'></div>
<div class='card'></div>

$w: 13em;
$f: 19/13;
$g: 1em;
$n: 7;
$c: #4B384C;

body {
	--h: #{$f*$w};
	display: grid;
	grid-template-columns: repeat(var(--n, #{$n}), var(--w, #{$w}));
	grid-gap: 1em;
	place-content: center;
	margin: 0;
	min-height: 100vh;
	background: #333;
	
	@for $i from 1 through $n {
		@media (max-width: ($n - $i + 1)*$w + ($n - $i + 2)*$g) {
			@if $i == $n {
				--w: 100%;
				--h: #{$f*100vw};
			}
			@else { --n: #{$n - $i} }
		}
	}
}

.card {
	overflow: hidden;
	position: relative;
	height: var(--h);
	border-radius: 7px;
	box-shadow: 2px 2px 17px #000;
	background: 
		linear-gradient(90deg, 
				#632C65, #E2A9E5);
	
	&:before, &:after {
		--p: 0;
		--s: calc(1 - 2*var(--p));
		position: absolute;
		top: 0; right: 0; bottom: 0; left: 0;
		mask: var(--m);
		content: ''
	}
	
	&:after { --p: 1 }
	
	&:nth-child(1) {
		$s: 19px;
		
		&:before, &:after {
			background: 
				linear-gradient(calc(var(--s)*45deg), 
						transparent calc(50% - 1px), $c 0, $c calc(50% + 1px), transparent 0) 
					0 0/ #{$s $s};
			--m: linear-gradient(red 50%, transparent 50%) 
							0 calc(var(--p)*#{$s})/ 100% #{2*$s};
		}
	}
	
	&:nth-child(2) {
		$s: 4em;
		
		&:before, &:after {
			--c0: hsla(0, 0%, 0%, var(--p));
			--c1: hsla(0, 0%, 0%, calc(1 - var(--p)));
			background: 
				repeating-linear-gradient(calc(var(--s)*45deg), 
						$c 0, $c 3px, transparent 0, transparent 13px);
			--m: repeating-radial-gradient(circle, 
							var(--c0) 0, var(--c0) #{.5*$s}, 
							var(--c1) 0, var(--c1) #{$s})
		}
	}
	
	&:nth-child(3) {
		$s: 64px;
		
		&:before, &:after {
			background: 
				repeating-radial-gradient(circle, 
						$c 0, $c 1px, transparent 2px, transparent 7px, $c 8px) 
				calc(var(--p)*#{.5*$s}) 0/ #{$s $s};
			--m: linear-gradient(red 50%, transparent 0) 
				0 calc(var(--p)*#{.5*$s})/ 100% #{$s}
		}
	}
	
	&:nth-child(4) {
		$s: 2em;
		
		&:before, &:after {
			background: 
				linear-gradient(calc(var(--s)*45deg), 
						transparent calc(50% - 1px), $c 0, 
						$c calc(50% + 1px), transparent 0) 
					0 0/ #{.25*$s .25*$s};
			--m: 
				linear-gradient(red 50%, transparent 0) 
						0 0/ #{2*$s 2*$s}, 
				linear-gradient(90deg, red 50%, transparent 0) 
				calc(var(--p)*#{$s}) 0/ #{2*$s 2*$s};
			mask-composite: exclude			
		}
	}
	
	&:nth-child(5) {
		$s: 1em;
		
		&:before, &:after {
			background: 
				radial-gradient(circle at calc(var(--p)*100%) 50%, 
						transparent calc(#{.5*$s} - 1px), $c 0, 
						$c calc(#{.5*$s} + 1px), transparent 0) 
					0 0/ #{$s $s};
			--m: linear-gradient(red 50%, transparent 50%) 
							0 calc(var(--p)*#{$s})/ 100% #{2*$s};
		}
	}

	&:nth-child(6) {
		$s: .75em;
		
		&:before, &:after {
			--c0: hsla(0, 0%, 0%, var(--p));
			--c1: hsla(0, 0%, 0%, calc(1 - var(--p)));
			background: linear-gradient(calc(var(--s)*45deg), 
						transparent calc(50% - 1px), $c 0, 
				$c calc(50% + 1px), transparent 0) 50%/ #{$s $s};
			--m: repeating-conic-gradient(var(--c0) 0%, var(--c0) 45deg, var(--c1) 0%, var(--c1) 90deg)
		}
	}
	
	&:nth-child(7) {
		$s: 1em;
		
		&:before, &:after {
			--c0: hsla(0, 0%, 0%, var(--p));
			--c1: hsla(0, 0%, 0%, calc(1 - var(--p)));
			background: linear-gradient(calc(var(--s)*45deg), 
						transparent calc(50% - 1px), $c 0, 
				$c calc(50% + 1px), transparent 0) 50%/ #{$s $s};
			--m: repeating-conic-gradient(var(--c0) 0%, var(--c0) 22.5deg, var(--c1) 0%, var(--c1) 45deg)
		}
	}

	&:nth-child(8) {
		$s: 2.5em;

		&:before, &:after {
			--c0: hsla(0, 0%, 0%, var(--p));
			--c1: hsla(0, 0%, 0%, calc(1 - var(--p)));
			background: 
				linear-gradient(calc(var(--p)*90deg), 
						$c 1px, transparent 0, 
						transparent calc(100% - 1px), $c 0) 
					50% 50%/ #{.14142*$s .14142*$s};
			--m: 
				repeating-linear-gradient(45deg, 
						red 0, red #{$s}, 
						transparent 0, transparent #{2*$s}), 
				repeating-linear-gradient(-45deg, 
						var(--c0) 0, var(--c0) #{$s}, 
						var(--c1) 0, var(--c1) #{2*$s})
		}
	}
	
	&:nth-child(9) {
		$s: 4em;
		
		&:before, &:after {
			--c0: hsla(0, 0%, 0%, var(--p));
			--c1: hsla(0, 0%, 0%, calc(1 - var(--p)));
			background: 
				repeating-conic-gradient(from calc(var(--p)*6deg), 
						$c 0%, $c 2deg, 
						transparent 0%, transparent 12deg);
			--m: repeating-radial-gradient(circle, 
							var(--c0) 0, var(--c0) #{.5*$s}, 
							var(--c1) 0, var(--c1) #{$s})
		}
	}
	
	&:nth-child(10) {
		$s: 2em;

		&:before, &:after {
			--c0: hsla(0, 0%, 0%, var(--p));
			--c1: hsla(0, 0%, 0%, calc(1 - var(--p)));
			background: 
				linear-gradient(calc(var(--p)*90deg), 
						$c 1px, transparent 0, 
						transparent calc(100% - 1px), $c 0) 
					50% 50%/ #{.14142*$s .14142*$s};
			--m: 
				repeating-linear-gradient(45deg, 
						red 0, red #{$s}, 
						transparent 0, transparent #{2*$s}), 
				repeating-linear-gradient(-45deg, 
						var(--c0) 0, var(--c0) #{$s}, 
						var(--c1) 0, var(--c1) #{2*$s});
			mask-composite: exclude
		}
	}
}