/* blog */
.grid-title {
	display: flex;
	flex-flow: column wrap;
	align-items: center;
	p {
		max-width: 70%;
		margin-bottom: 75px;
		font-weight: 400;
		@include font-size(2);
		text-align: center;
		line-height: 1.6;
		letter-spacing: 0.01em;
		color: rgba(0,0,0,0.5);
	}
}
.blog,
.archive,
.search {
	.page-title {
		font-weight: 200;
		@include font-size(4.2);
		color: $color__black;
		margin-top: 80px;
		margin-bottom: 50px;
		text-align: center;
	}
}

.blog-description {
	display: flex;
	justify-content: center;
}
.archive-post {
	text-align: center;
	margin-bottom: 24px;
	position: relative;
	border-radius: 5px;
	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
	min-height: 200px;
	transition: all 0.3s;
	.image {
		position: relative;
		img {
			height: 240px;
			width: 100%;
			object-fit: cover;
			border-radius: 5px 5px 0px 0px;
		}
		i {
			position: absolute;
			bottom: -17px;
			left: 46%;
			padding: 6px;
			border: 1px solid #fff;
			border-radius: 100%;
			background: #fff;
			font-size: 18px;
		}
	}
	&:hover {
		transform: translate3d(0,-6px,0);
		box-shadow: 0 12px 24px rgba(0,0,0,0.3), 0 10px 10px rgba(0,0,0,0.2);
		transition: all 0.3s;
	}
	&:hover .post-info {
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
	}
}
.post-info {
	padding-left: 20px;
	padding-right: 20px;
	.post-info-name {
		margin-bottom: 5px;
		word-wrap : break-word;
		@include font-size(2);
		line-height: 1.4;
		margin-top: 0;
		padding-top: 30px;
		a {
			font-weight: 300;
			text-transform: uppercase;
			color: $color__black;
			letter-spacing: 0.05em;
			&:hover {
				text-decoration: none;
				color: $color__link-hover;
			}
			&:active,
			&:focus {
				text-decoration: none;
			}
		}
	}
	.byline,
	.posted-on {
		text-transform: uppercase;
		font-weight: 400;
		@include font-size(1.1);
		margin-left: 17px;
		letter-spacing: 0.05em;
		a {
			color: $color__text-gray;
		}
		&:hover a {
			text-decoration: none;
			color: $color__link-hover;
		}
	}
	.entry-date {
		@include font-size(1.1);
		color: #a3a3a3;
	}
	> p {
		font-weight: 400;
		@include font-size(1.4);
		padding-bottom: 75px;
		margin-bottom: 0;
		word-wrap : break-word;
		color: rgba(0,0,0,0.8);
	}
	.post-continue {
		position: absolute;
		bottom: 0;
		right: 0;
		padding: 13px 17px;
		background-color: rgba(0,191,243,0.04);
		text-transform: uppercase;
		font-weight: 400;
		@include font-size(1.2);
		color: $color__main;
		letter-spacing: 0.05em;
		&:hover {
			text-decoration: none;
			color: $color__white;
			background-color: $color__main;
			border-bottom-right-radius: 5px;
		}
	}
}
.blog,
.search,
.archive {
	.row {
		justify-content: space-between;
	}
	.col-2 > * {
		margin-right: 0;
	}
	main {
		float: left;
		width: 66%;
		max-width: 792px;
	}
	.blog-article {
		width: 48.5%;
		/* margin-right: 5%; */
	}
	.no-sidebar {
		width: 100%;
		max-width: 100%;
		.col-2  .blog-article {
			width: 32%;
			margin-left: 0;
			margin-right: 0;
			/* margin-left: 1.5%;
			margin-right: 1.5%; */
		}
	}
}
.grid.grid .no-sidebar {
	max-width: 100%;
	width: 100%;
}
.grid.grid main {
	width: 65%;
}
@media (max-width: 991px) {
	.container .col-3 > * {
		width: 47%;
	}
	.blog-grid {
		.archive-post {
			img {
				width: 100%;
			}
		}
	}
	.blog,
	.search,
	.archive {
		main {
			width: 100% !important;
		}
	}
	.blog,
	.search,
	.archive {
		.no-sidebar {
			.col-2 .blog-article {
				width: 45%;
				margin-right: 5%;
				margin-left: 0;
			}
		}
	}
}
@media (max-width: 574px) {
	.container .col-3 > * {
		width: 97%;
	}
	.container .col-2 > * {
		width: 97%;
	}
	.blog,
	.search,
	.archive {
		.no-sidebar {
			.col-2 .blog-article {
				width: 100%;
				margin-right: 0;
				margin-left: 0;
			}
		}
		.blog-article {
			width: 100%;
		}
	}
	.grid-title {
		p {
			@include font-size(1.5);
		}
	}
}

@media (max-width: 320px) {
	.archive-post.archive-post {
		i {
			left: 42%;
		}
	}
}

@import "bloglist.scss";