:root{
	--frame-width: 28px;
	--mat-width: 28px;
	--liner-width: 8px;
	--gap-depth: 16px;
	--frame-color: #777777;
	--mat-color: #3d3d3d;
	--shadow: 0 16px 40px rgba(0,0,0,0.35);
}

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

.mat{
	background: var(--mat-color);
	padding: var(--mat-width);
	box-shadow: inset 0 0 10px black;
}

.liner{
	padding: var(--liner-width);
	background: linear-gradient(90deg,#ffffff,#e1e1e1 40%, #d1d1d1 60%, #ffffff);
	box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

.picture{
	box-shadow: 0 var(--gap-depth) var(--gap-depth) rgba(0,0,0,0.35);
	margin: var(--gap-depth);
}

@media (min-width: 0px) {
	:root{
		--frame-width: 0;
		--mat-width: 0;
		--liner-width: 0;
		--gap-depth: 0;
		--frame-color: #777777;
		--mat-color: #3d3d3d;
		--shadow: 0 16px 40px rgba(0,0,0,0.35);
	}
}

@media (min-width: 768px) {
	:root{
		--frame-width: 28px;
		--mat-width: 28px;
		--liner-width: 8px;
		--gap-depth: 16px;
		--frame-color: #777777;
		--mat-color: #3d3d3d;
		--shadow: 0 16px 40px rgba(0,0,0,0.35);
	}
}