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