:root{
	--frame-width: 28px;
	--mat-width: 28px;
	--liner-width: 8px;
	--gap-depth: 16px;

	--shadow: 0 16px 40px rgba(0,0,0,0.35);
	--color-frame-top: #282828;
	--color-frame-bottom: #121212;
	--color-frame-mat: #3d3d3d;
	--color-wall: #fff;
}

.american-frame{
	padding: var(--frame-width);
	background: linear-gradient(180deg,var(--color-frame-top),var(--color-frame-bottom));
	box-shadow: 0 15px 15px rgba(0,0,0,0.6);
	display: inline-block;
	position: relative;
}

.mat{
	background: var(--color-frame-mat);
	padding: var(--mat-width);
	box-shadow: inset 0 0 10px black;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="2000" height="2000"><filter id="n" x="0" y="0"><feTurbulence type="fractalNoise" baseFrequency="10" numOctaves="2"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.2"/></svg>');
  	background-blend-mode: overlay;
}

@media (min-width: 0px) {
	:root{
		--frame-width: 0;
		--mat-width: 0;
		--liner-width: 0;
		--gap-depth: 0;
	}
}

@media (min-width: 768px) {
	:root{
		--frame-width: 28px;
		--mat-width: 28px;
		--liner-width: 8px;
		--gap-depth: 16px;
	}
}