/**
 * Simple Blog Card
 * 
 * @package    Simple Blog Card
 * @subpackage simpleblogcard-template-gridcard.css
 *
 * @version    1.1.2
 */

.simpleblogcard-template-gridcard {
	container-type: inline-size;
	margin: 24px 0;
}
.simpleblogcard-template-gridcard .card {
	width: 100%;
	height: auto;
	background-color: #fff;
	box-shadow: 2px 2px 4px #c0c0c080, -1px -1px 4px #c0c0c080;
	border-radius: 8px;
	overflow: hidden;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	padding: 0;
	margin: 0;
}
.simpleblogcard-template-gridcard .card:hover {
	box-shadow: 2px 2px 8px #c0c0c080, -1px -1px 8px #c0c0c080;
}
.simpleblogcard-template-gridcard .card-image {
	margin: 0;
	background-color: #ccc;
}
.simpleblogcard-template-gridcard .card-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	vertical-align: top;
}
.simpleblogcard-template-gridcard .card-content {
	padding: 16px 24px;
}
.simpleblogcard-template-gridcard .card-host {
	margin: 0;
	color: #888;
	font-size: 80%;
}
.simpleblogcard-template-gridcard .card-title {
	margin: 4px 0;
	font-weight: bold;
	text-transform: none;
	color: #444;
}
.simpleblogcard-template-gridcard .card-description {
	font-weight: normal;
	text-transform: none;
	color: #666;
	font-size: 90%;
}

@container (max-width: 380px) {
	.simpleblogcard-template-gridcard .card {
		display: block;
	}
}