@use 'sass:math';

// change these
$b: 1em; // figure border (space around white edge)
$p: .75em; // figure padding (white edge)
$m: 22.5em; // max image width
$r: 1/3; // relative offset (how much of white top left corner gets tucked)

// don't change these
$o: $r*$p; // absolute offset
$d: 2*($b + $o); // distance from figure corner to diagonal shadow ends
$l: $d*math.sqrt(2); // diagonal shadow length

* { margin: 0 } /* most basic reset */

/* some basic layout and prettifying styles */
html, body { display: grid }
html { min-height: 100% }

body {
	grid-gap: .5em;
	grid-template-columns: 
		repeat(auto-fit, Min(100%, $m));
	place-content: center; /* put grid in the middle */
	padding: .5em; /* space around grid */
	background: /* show that effect works with image bg */
		url(https://images.unsplash.com/photo-1518882496191-511e15d01a58?w=1400) 
			0 0/ cover fixed;
	font: 900 clamp(.625em, 4vw, 1.25em) comic neue, comic sans ms, cursive
}

figure {
	place-self: center; /* put in middle of its grid area */
	position: relative; /* to attach white bg to it */
	border: solid $b transparent; /* space around white edges */
	padding: $p; /* white edge thickness */
	clip-path: 
		polygon(
			/* 2 top left corner (tucked) points */
			0 $d, $d 0, 
			100% 0 /* 1 top right corner point */, 
			/* 2 bottom right corner (tucked) points */
			100% calc(100% - #{$d}), calc(100% - #{$d}) 100%, 
			0 100% /* 1 bottom left corner point */);
	
	/* tucked corner arched shadows */
	&::before, &::after {
		/* switch variable */
		/* see https://css-tricks.com/dry-switching-with-css-variables-the-difference-of-one-declaration/ */
		--i: 0;
		--s: calc(2*var(--i) - 1); /* sign: -1 if i is 0, 1 if i is 1 */
		position: absolute;
		/* position depends on switch variable value */
		/* $o if i is 0, 100% - $o if i is 1 */
		top: calc(var(--i)*100% - var(--s)*#{$o}); 
		left: calc(var(--i)*100% - var(--s)*#{$o});
		width: $l; /* shadow length */
		height: .5em;
		transform-origin: 50% 0; /* middle top */
		transform: 
			/* put middle top in white corner */
			translate(-50%) 
			/* rotation -45° if i is 0, 135° if i is 1 */
			rotate(calc(var(--i)*.5turn - 45deg))
			/* tweak to avoid white pixels beyond dark shadow edge */
			translatey(-1px);
		background: /* arched "shadow" */
			radial-gradient(farthest-side at 50% 0, 
					#0008, #0004 30%, transparent);
		content: ''
	}
	
	/* change switch variable value */
	&::after { --i: 1 }
}

/* responsivity */
img { width: 100% }

figcaption {	
	&::before { /* the white background */
		/* its parent still has the default static positioning */
		position: absolute;
		inset: 0; /* w.r.t. figure padding-box */
		z-index: -1; /* place behind */
		box-shadow: 3px 3px 13px #0007;
		background: #fff;
		content: ''
	}
}

em { font-size: .75em }