.card {
	width: 100%;
	margin-bottom: $globalPaddingS;
	border: 1px solid $colorGrey;
	box-sizing: border-box;
	cursor: pointer;
	-webkit-tap-highlight-color: rgba(0,0,0,0);

	@include responsive('>', 'phones', (
			margin-bottom: $globalPadding
	));

	&:hover {
		.question {
			p {
				text-decoration: underline;
			}
		}
	}

	p {
		margin: 0;
	}

	.cover-image {
		position: relative;
		height: 0;
		padding-bottom: 55.25%;
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;

		.btn-play {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
		}

	}

	.question,
	.user {
		font-weight: 300;
	}

	.question {
		position: relative;
		padding: 15px;
		font-size: 1.2em;
		font-style: italic;
		color: white;

		&.bubble.above:after {left: 15px;}
	}

	.user {
		padding: 15px;
		position: relative;

		p > span {
			padding-left: 25px;
			font-size: 0.8em;
		}

		.share-wrapper {
			position: absolute;
			right: 15px;
			top: 0;
			transform: translateY(-50%);
		}

		.answer-link {
			font-weight: normal;
			color: $colorGreyDark;
		}
	}

}