gistfile1.css

.card {
	background: rgba( #FFFFFF, 0.9 );
	box-shadow: 0 0 0 1px rgba( $medium-gray, 0.3 ), 0 2px 1px 1px rgba( $medium-gray, 0.1 );
	margin-bottom: 30px;
	transition: all 0.1s ease-in-out;

	@include responsive(one-col) {
		margin-bottom: 20px;
		margin-right: 5px;
		margin-left: 5px;
	}

	header {
		padding: 10px 10px 0 10px;

		@include clear-fix;

		@include responsive(one-col) {
			padding: 5px;
		}

		.card-byline {
			float: left;
			position: relative;
			padding: 5px 5px 5px 32px;
			color: $text-gray;

			&:hover {
				color: $link-highlight;
			}

			img {
				height: 18px;
				width: 18px;
				position: absolute;
				top: 7px;
				left: 7px;
			}
		}

		&.has-featured-image {
			height: 120px;
			background-position: 50%;
			background-size: cover;
			position: relative;
			cursor: pointer;

			@include responsive(one-col) {
				height: 60px;
				margin: 0;
			}

			&:before {
				content: '';
				display: block;
				height: 100%;
				background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.3) 100%);
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				opacity: 1;
			}

			a.card-byline {
				color: #fff;
				@include clear-text;
			}
		}

		&.photo {
			height: 400px;

			&:before {
				opacity: 0.8;
				height: 30%;
			}

			@include responsive(one-col) {
				height: 100vw;
				opacity: 0.4;
			}
		}
	}

	footer {
		padding: 0 20px 20px 20px;
		font-size: 16px;
		position: relative;

		@include clear-fix;

		.time-since {
			float: left;
		}

		.post-tag {
			float: left;
		}

		.card-actions {
			position: absolute;
			bottom: 14px;
			right: 25px;

			@include responsive(one-col) {
				right: 10px;
			}
		}
	}
}