<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%;
}