.tarot-card {
	background: white;
	border: 1px solid #000;
	border-radius: 0.5em;
	margin: 1em;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 166px;
	height: 270px;
}


/* http://tarotprophet.com/6-most-common-tarot-spreads-and-their-uses/ */
.tarot-spread {
	background: forestgreen;
	padding: 1em;
	/* three cards */
	&.three-card {
		figure {
			width: 33.333%;
			max-width: calc(33.333% - .667em);
			margin: 0 0 0 1em;
			float: left;
			&:first-child {
				margin-left: 0;
			}
			.tarot-card {
				width: 100%;
				max-width: 100%;
				height: auto;
				margin: 0 0 1em;
				&.empty{
					background-color: #f59e00;
					cursor: pointer;
					&:before {
						display: block;
						content: '🏵️';
						font-size: 10em;
						text-align: center;
						height: 270px;
						display: flex;
						align-items: center;
					}
				}
				&.inverted {
					img {
						transform: rotate(180deg);
					}
				}
				img {
					margin: 10px 0;
					width: 95%;
					width: calc(100% - 14px);
					height: auto;
				}
			}
			figcaption {
				text-align: center;
				color: #fff;
				font-weight: 600;
				font-size: 1em;
			}
		}
		overflow: hidden;
	}
}