<p>Lightweight versions (between a third and a half the size) of the patterns from the starter Pen.</p>

<div class='fabrics'>
	<div class='swatch argyle'></div>
	<div class='swatch houndstooth'></div>
	<div class='swatch zigzag'></div>
	<div class='swatch madras'></div>
</div>

@use 'sass:math';

.fabrics {
	display: grid;
	grid-gap: 8px;
	grid-template-columns: repeat(auto-fit, min(21em, 100%));
	justify-content: center
}

.swatch { aspect-ratio: 1/ 1 }

.argyle {
	$rha: 60deg;
	$cga: -.5*$rha;
	$lga: 90deg - .5*$rha;
	$rhl: 4em;
	$rhw: 2*$rhl*math.sin(.5*$rha);
	$rhh: 2*$rhl*math.cos(.5*$rha);
	$lno: .5px;
	
	--l: transparent calc(50% - #{$lno}), hsla(0, 0%, 100%, .1) 0  calc(50% + #{$lno}), transparent 0;
	background:
		linear-gradient($lga, var(--l)), 
		linear-gradient(-$lga, var(--l)), 
		repeating-conic-gradient(from $cga, 
				#6d695c 0% $rha, #615e52 0% 50%) .5*$rhw 0;
	background-size: $rhw $rhh
}

.houndstooth {
	$l: 1em;
	$d: $l*math.sqrt(2);
	background: 
		conic-gradient(transparent 25%, 
				#fff 0% 50%, transparent 0% 75%, #000 0%) 
			-.25*$l 0/#{2*$l 2*$l}, 
		repeating-linear-gradient(45deg, 
				#000 0 .25*$d, #fff 0 .5*$d);
}

.zigzag {
	$size: 7em;
	background: 
		conic-gradient(from 135deg, #eceddc 25%, transparent 0%), 
		conic-gradient(from -45deg, #eceddc 25%, #ec173a 0%) 
			.5*$size 0;
	background-size: $size $size
}

.madras {
	--l: transparent 5px,
		hsla(197, 62%, 11%, .5) 0 10px,
		transparent 0 35px,
		hsla(5, 53%, 63%, .5) 0 40px,
		hsla(197, 62%, 11%, .5) 0 50px,
		transparent 0 60px,
		hsla(5, 53%, 63%, .5) 0 70px,
		hsla(35, 91%, 65%, .5) 0 80px,
		transparent 0 90px,
		hsla(5, 53%, 63%, .5) 0 110px,
		transparent 0;
	background: 
		repeating-linear-gradient(45deg,
			var(--l) 120px, hsla(197, 62%, 11%, .5) 0 140px),
		repeating-linear-gradient(135deg,
			var(--l) 140px, hsla(197, 62%, 11%, .5) 0 160px) 
		#e9d4b9
}