/**
 * Plugin front end styles
 *
 * @package Caxton
 * @version 1.0.0
 */

/**
 * Plugin front end styles
 *
 * @package Caxton
 * @version 1.0.0
 */
.caxton-grid {
	display: flex;
	flex-wrap: wrap;
	.grid-item {
		box-sizing: border-box;
		width: 31.33%;
		margin: 1%;
		padding: 0;
	}

	h3.grid-title {
		padding: 0 7%;
		margin: calc( .3em + 7px ) 0 0;
		font-size: 18px;
		text-align: center;
		display: none;
	}

	.grid-image {
		position: relative;
		padding-top: 100%;
		background: center/cover;
		overflow: hidden;

		h3.grid-title,
		&:before {
			content: '';
			position: absolute;
			display: block;
			top: 50%;
			right: 0;
			left: 0;
			transform: translateY(-50%);
			opacity: .7;
		}
		&:before {
			opacity: .2;
		}

		h3.grid-title {
			margin: 0;
			color: #ffffff;
			text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5), 0 0 3px #000;
		}

		&:before {
			background: rgba(0, 0, 0, .5);
			height: 9999px;
		}

		&:hover {
			h3.grid-title,
			&:before {
				opacity: 1;
			}
		}
	}

	&.caxton-title-below-image {
		h3.grid-title {
			display: block;
		}
		.grid-image {
			h3.grid-title,
			&:before {
				display: none;
			}
		}
	}

	&.caxton-circle-images {
		.grid-image {
			border-radius: 100%;
			overflow: hidden;
			z-index: 7;
		}
	}

	&.caxton-rectangle-images {
		.grid-image {
			padding-top: 56.25%;
		}
	}
	time {
		text-align: center;
		display: block;
		margin: .5em 0 .2em;
	}

	.grid-meta {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.author, .comments {
			margin: 0;
		}
		.fa:before {
			margin-right: 7px;
		}
	}
}

.clear-fix:after {
	content: '';
	display: block;
	clear: both;
}