/* postcard stuff here */

.postcard-wrapper {
	background: #fff; /*this determines the background colour of the back face too*/
	border: 10px solid white;
	box-shadow: 0px 2px 5px #aaa;
	width: 100%;
	margin: 10px 0px 15px 0px;
	display: grid;
}

.postcard-wrapper:hover {
	transform:rotateY(180deg);
	transition:transform 1500ms;
	transform-style: preserve-3d;
}

.postcard-wrapper > * {
	width: 100%;
	aspect-ratio: 6/4;
	object-fit: cover;
	backface-visibility: hidden;
	grid-column-start: 1;
	grid-row-start: 1;
}

.postcard-back {
	transform: rotateY(180deg);
	display: grid;
}

.postcard-back > * {
	grid-column-start: 1;
	grid-row-start: 1;
}

.postcard-back > p.postcard-message {
	margin: 5% 0 5% 5%;
	width: 55%;
}

.postcard-back > p.postcard-address {
	margin: 30% 0 5% 67.5%;
	width: 27.5%;
}