.polaroid {
	transform: rotate(1deg);
	cursor: pointer;
	--bottom-border-width: 64px;
}

.polaroid-picture {
	width: 180px;
	border-width: 16px 16px var(--bottom-border-width) 16px;
	border-color: #fff;
	border-style: solid;
	background-color: #fff;
	box-shadow: 2px 3px 1px 0px rgba(0, 0, 0, 0.2);
}

.polaroid-text {
	position: absolute;
	width: 100%;
	bottom: calc(var(--bottom-border-width)/2 + 4px); /* not sure why it isn't centered w/o the 4px */
	left: 50%;
	transform: translate(-50%, 50%);
	text-align: center;
	color: var(--grey);
}

.tape-clear {
	content: "";
	position: absolute;
	width: 30%;
	top: 0px;
	left: 0px;
	opacity: 1;
	transform: translate(-30%, -30%) rotate(-30deg);
}

.tape-clear-right {
	content: "";
	position: absolute;
	width: 30%;
	top: 0px;
	right: 0px;
	opacity: 1;
	transform: translate(25%, -25%) rotate(40deg);
}