/* 10.04 - blog pages - start
==================================================================================================== */

/* blog section - start */
.blog-section {
	.deco-image-1 {
		left: 0px;
		bottom: 0px;
	}
	.deco-image-2 {
		top: 0px;
		right: 0px;
	}
}
/* blog section - end */

/* blog grid - start */
.blog-grid {
	position: relative;
	border-radius: 6px;
	margin-bottom: 50px;
	background-color: #ffffff;
	transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	box-shadow: 7.19px -3.507px 104px 0px rgba(36, 45, 75, 0.1);
	&:hover {
		transform: translateY(-16px);
	}

	.post-date {
		top: 50px;
		z-index: 1;
		right: 50px;
		color: #6a6771;
		min-width: 100px;
		padding: 15px 10px;
		position: absolute;
		text-align: center;
		border-radius: 6px;
		background-color: #ffffff;
		strong {
			display: block;
			line-height: 1;
			font-size: 40px;
			font-weight: 700;
			margin-bottom: 5px;
			font-family: $heading-font;
		}
		span {
			display: block;
			line-height: 1;
			font-size: 20px;
			font-weight: 300;
			font-family: $heading-font;
		}
	}

	a.item-image {
		width: 100%;
		display: block;
	}

	.item-content {
		padding: 38px;
	}
	.item-title {
		>a {
			font-size: 30px;
			font-weight: 600;
			line-height: 1.3;
			color: rgb(76, 71, 84);
			font-family: $heading-font;
		}
	}

	p {
		font-weight: 500;
		margin-bottom: 45px;
	}

	.post-admin {
		.admin-thumbnail {
			float: left;
			width: 60px;
			height: 60px;
			overflow: hidden;
			margin-right: 20px;
			border-radius: 100%;
		}
		.admin-content {
			color: #999999;
			font-size: 18px;
			margin: 15px 0px;
			display: inline-block;
			>a {
				color: #666666;
			}
		}
	}

	.btn {
		height: 45px;
		line-height: 43px;
		background-color: #4c4754;
		box-shadow: 8px 13.856px 30px 0px rgba(14, 0, 40, 0.14);
		&:hover {
			background-color: $default-purple;
		}
	}
}
/* blog grid - end */

/* small blog - start */
.small-blog {
	.item-image {
		float: left;
		width: 130px;
		overflow: hidden;
		margin-right: 25px;
		border-radius: 6px;
	}
	.item-content {
		display: table;
		padding-top: 5px;
	}
	.post-date {
		display: block;
		color: #4c4754;
		font-size: 15px;
		margin-bottom: 8px;
	}
	.item-title {
		>a {
			color: #4c4754;
			font-size: 18px;
			font-weight: 500;
			line-height: 1.667;
			font-family: $heading-font;
		}
	}

	&:hover {
		.item-title {
			>a {
				color: $default-purple;
			}
		}
	}
}
/* small blog - end */

/* blog primary - start */
.blog-primary {
	a.item-image {
		width: 100%;
		display: block;
	}
	.post-date {
		display: block;
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 30px;
		color: $default-black;
	}
	.item-title {
		margin-bottom: 25px;
		>a {
			font-size: 26px;
			font-weight: 600;
			line-height: 1.5;
			color: $default-black;
			font-family: $heading-font;
		}
	}
}
/* blog primary - end */

/* masonry layout - start */
.grid {
	margin-left: -15px;
	margin-right: -15px;
	.grid-item,
	.grid-sizer {
		width: 50%;
		float: left;
		display: inline-block;
	}
	.grid-item {
		padding: 0px 15px;

		.blog-grid {
			margin-bottom: 30px;
			.post-date {
				top: 30px;
				right: 30px;
				min-width: 70px;
				padding: 15px 10px;
				strong {
					font-size: 26px;
				}
				span {
					font-size: 14px;
				}
			}
			.item-content {
				padding: 30px;
			}

			.item-title {
				margin-bottom: 20px;
				>a {
					font-size: 20px;
					line-height: 1.4;
				}
			}

			p {
				margin-bottom: 25px;
			}

			.post-admin {
				.admin-thumbnail {
					display: none;
				}
				.admin-content {
					margin: 0px;
					font-size: 15px;
				}
			}

			.btn {
				height: 35px;
				font-size: 12px;
				min-width: auto;
				padding: 0px 20px;
				line-height: 34px;
				box-shadow: 4px 7px 15px 0px rgba(14, 0, 40, 0.14);
			}
		}
	}
}
/* masonry layout - end */

/* 10.04 - blog pages - end
==================================================================================================== */