/* blog-entries */

.blog-entries {
	padding-top: 2.5em;
	padding-bottom: 2.5em;

	@media screen and (min-width: 600px) {
		padding-top: 7em;
		padding-bottom: 5em;
	}

	.container {
		display: flex;
		flex-wrap: wrap;
	}

	header.whats-on-our-mind {
		flex: 1 0 100%;
		margin-bottom: 1em;

		@media screen and (min-width: 900px) {
			flex: 1 0 20%;
			text-align: right;
			padding-right: 4em;
		}

		h2 {
			font-size: 2em;
			font-family: "Montserrat";
			margin-bottom: 0;
			@media screen and (min-width: 600px) {
				font-size: 2.5em;
				margin-top: 0;
			}
		}
	}

	.feature {
		flex: 0 0 100%;
		display: flex;
		flex-wrap: wrap;

		.img-wrap {
			flex: 1 1 100%;

			@media screen and (min-width: 800px) {
				flex-basis: calc(66% - 2em);
				margin-right: 2em;
			}
		}

		.content-wrap {
			flex: 1 1 100%;

			@media screen and (min-width: 800px) {
				flex-basis: 30%;
			}
		}

		h1 {
			font-size: 2em;
			font-weight: 900;
			line-height: 1.3em;
		}

		p {
			font-size: 1.1em;
			line-height: 1.8em;
		}

		.btn {
			margin-top: 2em;
		}
	}

	.entries {
		display: flex;
		flex-wrap: wrap;
		flex: 1 1 100%;
		justify-content: space-between;
		
		@media screen and (min-width: 600px) {
			flex: 1 1 70%;
		}
	}

	article {
		flex: 1 1 100%;
		margin-bottom: 2em;

		@media screen and (min-width: 420px) {
			flex-grow: 0;
			flex-shrink: 0;
			flex-basis: calc(((100% / 12) * 6) - (1.5%/4 * 6));
		}

		@media screen and (min-width: 650px) {
			flex-basis: calc(((100% / 12) * 4) - (3%/4 * 4));
		}

		@media screen and (min-width: 950px) {
			flex-basis: calc(((100% / 12) * 3) - (3%/4 * 3));
		}

		h1 {
			font-family: "Montserrat";
			font-size: 1.2em;
			margin-top: 0.25em;
		}
	}

	.home & article {
		@media screen and (min-width: 600px) {
			flex-grow: 0;
			flex-shrink: 0;
			flex-basis: calc(((100% / 12) * 4) - (3%/4 * 2));
		}
	}

	.meta {
		p {
			display: inline;
			font-size: 0.9em;
			font-weight: 500;
			color: white;

			&::after {
				content: "";
				display: inline-block;
				width: 1px;
				height: 0.7em;
				background-color: rgba(255, 255, 255, 0.5);
				margin: 0.15em 0.5em 0;
				transition: background-color 0.3s ease-in-out;
			}
		}

		time {
			display: inline;
			font-size: 0.9em;
			color: white;
		}
	}

	a:hover .meta p,
	a:hover .meta time {
		color: white;
	}

	.inverse .meta p,
	.inverse .meta time {
		color: $brand-primary-color;
	}

	.inverse a:hover .meta p,
	.inverse a:hover .meta time {
		color: $brand-primary-color;
	}

	.inverse .meta p::after {
		background-color: rgba(1, 22, 39, 0.5);
	}

	.inverse a:hover .meta p::after {
		background-color: rgba(46, 196, 182, 0.5);
	}

	img {
		width: 100%;
		max-width: 100%;
		height: auto;		
	}

	.img-wrap {
		position: relative;
		margin-bottom: 1.5em;

		&:after {
			content: "";
			display: block;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			opacity: 0;
			background-color: #2EC4B6;
			transition: opacity 0.3s ease-in-out;
		}
	}

	a:hover .img-wrap:after {
		opacity: 0.4;
	}
}

a.view-all {
	color: #7F8992;
}

.view-all svg {
	transform: rotate(180deg);
	display: inline;
	height: 10px;
	width: 10px;
}