@import "@{parenturl}/less/mixins.less";

.blog-default {
	.min({
		#blog-list {
			article {
				display: grid;
				grid-template-columns: 2fr 1fr;
				grid-template-areas:
					"header image"
					"summary image"
					"more image";
				grid-gap: 10px;
				box-shadow: 3px 3px 15px rgb(0 0 0 / 10%);
				padding: 10px;
			}
		}

		.entry-header { grid-area: header; }
		.entry-summary { grid-area: summary; }
		.read-more { grid-area: more; }
		.featured-image {
			grid-area: image;
			position: relative;
			max-height: 300px;

			> a, > img {
				position: absolute;
				height: 100%;
				width: 100%;
			}
			> a {
				color: inherit;
				&:empty {
					background-color: #fafafa;
					&::before {
						content: 'Read More';
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 30px;
						font-weight: 700;
						text-transform: uppercase;
						letter-spacing: 0.2em;
						opacity: 0.5;
					}
				}
			}
		}
	});

	#blog-list {
		article {
			margin-bottom:30px;
		}
	}

	.featured-image {
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center center;
		}
	}

	.max({
		.featured-image {
			img { max-height: 40vw; }
		}
	});
}