.preview {
	border: 1px solid var(--c-bg-dark);
	overflow: hidden;
}

.playmate-preview {
	position: relative;
}

.playmate-preview:after {
	content: "";
	display: block;
	padding-bottom: 100%;
}

.img-preview {
	position: absolute;
	top: 0;
	left: 0;
	transition: transform 0.5s;
}

.img-preview:hover {
	transform: scale(1.1);
}

.description {
	border: 1px solid var(--c-bg-dark);
	padding: 1rem;	
}

.playmate-name {
	font-size: 2rem;
	color: var(--c-bg-dark);
}

@media only screen and (min-width: 768px) {
	.preview-odd {
		border-top-left-radius: 1rem;
		border-bottom-left-radius: 1rem;
		border-right: none;	
	}

	.preview-even {
		border-top-right-radius: 1rem;
		border-bottom-right-radius: 1rem;
		border-left: none;
	}

	.description-odd {
		border-top-right-radius: 1rem;
		border-bottom-right-radius: 1rem;
		border-left: none;
	}

	.description-even {
		border-top-left-radius: 1rem;
		border-bottom-left-radius: 1rem;
		border-right: none;
	}
}

@media only screen and (max-width: 768px) {
	.preview-odd {
		border-top-left-radius: 1rem;
		border-top-right-radius: 1rem;
		border-bottom: none;	
	}

	.preview-even {
		border-bottom-left-radius: 1rem;
		border-bottom-right-radius: 1rem;
		border-top: none;
	}

	.description-odd {
		border-bottom-left-radius: 1rem;
		border-bottom-right-radius: 1rem;
		border-top: none;
	}

	.description-even {
		border-top-left-radius: 1rem;
		border-top-right-radius: 1rem;
		border-bottom: none;
	}
}