<div class='card'></div>
<div class='card'></div>
<div class='card v'></div>
<div class='card v'></div>
<div class='card'></div>
<div class='card'></div>
<div class='card v'></div>
<div class='card v'></div>
<div class='card'></div>
<div class='card'></div>
<div class='card v'></div>
<div class='card v'></div>
<div class='card'></div>
<div class='card'></div>
<div class='card v'></div>
<div class='card v'></div>
<div class='card'></div>
<div class='card'></div>
<div class='card v'></div>
<div class='card v'></div>
<div class='card'></div>
<div class='card'></div>
<div class='card v'></div>
<div class='card v'></div>
<div class='card'></div>
<div class='card'></div>
<div class='card v'></div>
<div class='card v'></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 {
	--rlist: var(--c) 0 3px, transparent 0 7px;
	--dim: 100% 50% no-repeat;
	--ang: 90deg;
	overflow: hidden;
	position: relative;
	height: var(--h);
	border-radius: 7px;
	box-shadow: 2px 2px 17px #000;
	background: 
			repeating-linear-gradient(var(--ang-0, -45deg), 
					var(--rlist)) var(--pos-0, 0 0)/ var(--dim), 
			repeating-linear-gradient(var(--ang-1, 45deg), 
					var(--rlist)) var(--pos-1, 0 100%)/ var(--dim), 
			linear-gradient(var(--ang), var(--nlist));
	
	&:nth-child(4n + 2) {
		--ang-0: 45deg;
		--ang-1: 135deg;
	}
	
	&:nth-child(4n + 3) {
		--ang-0: -60deg;
		--ang-1: 60deg;
	}
	
	&:nth-child(4n) {
		--ang-0: -120deg;
		--ang-1: 120deg;
	}
	
	&:nth-child(1) {
		--c: #3ea814;
		--nlist: #e8f4c6, #3bb720;
	}
	
	&:nth-child(2) {
		--c: #5d6f80;
		--nlist: #768896, #cbd4d6;
	}
	
	&:nth-child(3) {
		--c: #fe3a01;
		--nlist: #fe3502, #efd25d;
	}
	
	&:nth-child(4) {
		--c: #14282d;
		--nlist: #81b7c9, #26353c;
	}
	
	&:nth-child(5) {
		--c: #0e685e;
		--nlist: #77dddd, #1e766a;
	}
	
	&:nth-child(6) {
		--c: #dd7519;
		--nlist: #e68323, #fcdf85;
	}
	
	&:nth-child(7) {
		--c: #034077;
		--nlist: #013579, #3fdbe5;
	}
	
	&:nth-child(8) {
		--c: #05131f;
		--nlist: #2c6f90, #0e1f29;
	}
	
	&:nth-child(9) {
		--c: #b63e03;
		--nlist: #ebd346, #c2400c;
	}
	
	&:nth-child(10) {
		--c: #010e05;
		--nlist: #051e18, #186d56;
	}
	
	&:nth-child(11) {
		--c: #093658;
		--nlist: #193961, #72cadd;
	}
	
	&:nth-child(12) {
		--c: #011422;
		--nlist: #027899, #05262d;
	}
	
	&:nth-child(13) {
		--c: #e0aa0a;
		--nlist: #fcef34, #dead1f;
	}
	
	&:nth-child(14) {
		--c: #13507e;
		--nlist: #235790, #7fc8d3;
	}
	
	&:nth-child(15) {
		--c: #326f12;
		--nlist: #397d28, #cce296;
	}
	
	&:nth-child(16) {
		--c: #4486b0;
		--nlist: #d4eef7, #3b8cbc;
	}
	
	&:nth-child(17) {
		--c: #4d3628;
		--nlist: #dac7b0, #513831;
	}
	
	&:nth-child(18) {
		--c: #ed1d00;
		--nlist: #ef2902, #f6940a;
	}
	
	&:nth-child(19) {
		--c: #c71b01;
		--nlist: #cd1700, #f76705;
	}
	
	&:nth-child(20) {
		--c: #2e354c;
		--nlist: #adc0e0, #303548;
	}
	
	&:nth-child(21) {
		--c: #88b70f;
		--nlist: #e2eb81, #9cc323;
	}
	
	&:nth-child(22) {
		--c: #243eb1;
		--nlist: #3046bb, #a4c9e6;
	}
	
	&:nth-child(23) {
		--c: #990741;
		--nlist: #a6103c, #f246d6;
	}
	
	&:nth-child(24) {
		--c: #456400;
		--nlist: #d2e001, #3a6202;
	}
	
	&:nth-child(25) {
		--c: #bf5734;
		--nlist: #ecd7bc, #c95c3a;
	}
	
	&:nth-child(26) {
		--c: #228f8a;
		--nlist: #2b9c96, #90e1e2;
	}
	
	&:nth-child(27) {
		--c: #49130c;
		--nlist: #de8068, #55221a;
	}
	
	&:nth-child(28) {
		--c: #32453f;
		--nlist: #b9dcce, #333e3a;
	}
}

.v {
	--dim: 50% no-repeat;
	--ang: 0deg;
	--pos-1: 100%;
}