.yasothon-gutenberg-posts {

	.content-post {

		&.layout.full.style-4 {

			figure {
				margin: 0;
			}

			article {
				margin-bottom: 40px;
			}

			article:last-child {
				margin-bottom: 0;
			}

			.has-post-thumbnail {
				position: relative;
				height: 550px;
				background-position: center;
				background-size: cover;

				.entry-header {
					width: 100%;
					height: 450px;
					background-position: center;
					background-size: cover;
				}

				.entry-content {
					position: absolute;
					bottom: 0;
					right: 0;
					margin-left: 60px;
					margin-right: 60px;
					padding: 30px;
					background-color: white;
					box-shadow: 5px 10px 30px 0 rgba(0, 0, 0, 0.10);
				}
			}

			.has-no-thumbnail {
				height: auto;
				padding: 40px;
				background-color: white;
				box-shadow: 5px 10px 30px 0 rgba(0, 0, 0, 0.10);

				.entry-header {
					display: none;
				}

				p {
					margin-bottom: 0;
				}
			}

			.category-list {
				display: -webkit-box;
				display: -webkit-flex;
				display: -ms-flexbox;
                display: flex;
                flex-wrap: wrap;
			}

			.category-box {
				margin-right: 15px;
				margin-bottom: 15px;
				padding: 0 12px;
			}

			.category-box a {
				color: white;
				font-size: 11px;
				text-transform: uppercase;
				letter-spacing: 1px;
				text-decoration: none;
			}

			.post-thumbnail-image {
				width: 100%;
				height: 450px;
				background-position: center;
				background-size: cover;
			}

			.entry-title {
				margin-bottom: 0;

				&.font-size-30 {
					font-size: 30px;
					line-height: 36px;
				}

				&.font-size-32 {
					font-size: 32px;
					line-height: 38px;
				}

				&.font-size-34 {
					font-size: 34px;
					line-height: 40px;
				}

				&.font-size-36 {
					font-size: 36px;
					line-height: 42px;
				}

				&.font-size-38 {
					font-size: 38px;
					line-height: 44px;
				}

				&.font-size-40 {
					font-size: 40px;
					line-height: 46px;
				}

				&.font-size-42 {
					font-size: 42px;
					line-height: 48px;
				}

				&.font-size-44 {
					font-size: 44px;
					line-height: 50px;
				}
			}

			.entry-title a {
				color: black;
				text-decoration: none;
			}

			.entry-title a:hover {
				color: #555555;
			}

			.posts-excerpt {
				color: #777777;

				p {
					font-style: normal;
				}

				&.font-size-14 p {
					font-size: 14px;
					line-height: 20px;
				}

				&.font-size-16 p {
					font-size: 16px;
					line-height: 22px;
				}

				&.font-size-18 p {
					font-size: 18px;
					line-height: 24px;
				}

				&.font-size-20 p {
					font-size: 20px;
					line-height: 26px;
				}

				&.font-size-22 p {
					font-size: 22px;
					line-height: 28px;
				}

			}

			.entry-meta {
				display: -webkit-box;
				display: -webkit-flex;
				display: -ms-flexbox;
                display: flex;
                flex-wrap: wrap;
				margin-top: 20px;
				margin-bottom: 15px;
				font-size: 12px;
				letter-spacing: 1px;
				color: #999999;
			}

			.entry-meta a {
				color: #999999;
				text-decoration: none;
			}

			.entry-meta a:hover {
				color: black;
			}

			.entry-meta img {
				margin-right: 20px;
				border-radius: 25px;
			}
		}
	}
}

@media only screen and (min-width: 320px) {

    .yasothon-gutenberg-posts {

		.content-post {

			&.layout.full.style-4 {

				article {
					margin-bottom: 30px;
				}

				article:last-child {
					margin-bottom: 0;
				}

				.has-post-thumbnail {
					height: 450px;

					.entry-header {
						height: auto;
					}

					.entry-content {
						margin-left: 15px;
						margin-right: 15px;
						padding: 15px;
					}
				}

				.has-no-thumbnail {
					padding: 15px;
				}

				.post-thumbnail-image {
					width: 100%;
					height: 200px;
				}

				.entry-title {
					margin-bottom: 0;

					&.font-size-30 {
						font-size: 18px;
                        line-height: 24px;
					}

					&.font-size-32 {
						font-size: 18px;
                        line-height: 24px;
					}

					&.font-size-34 {
						font-size: 18px;
                        line-height: 24px;
					}

					&.font-size-36 {
						font-size: 18px;
                        line-height: 24px;
					}

					&.font-size-38 {
						font-size: 18px;
                        line-height: 24px;
					}

					&.font-size-40 {
						font-size: 18px;
                        line-height: 24px;
					}

					&.font-size-42 {
						font-size: 18px;
                        line-height: 24px;
					}

					&.font-size-44 {
						font-size: 18px;
                        line-height: 24px;
					}
				}

				.posts-excerpt {

					&.font-size-14 p {
						font-size: 14px;
						line-height: 20px;
					}

					&.font-size-16 p {
						font-size: 14px;
						line-height: 20px;
					}

					&.font-size-18 p {
						font-size: 14px;
						line-height: 20px;
					}

					&.font-size-20 p {
						font-size: 14px;
						line-height: 20px;
					}

					&.font-size-22 p {
						font-size: 14px;
						line-height: 20px;
					}

				}

				.entry-meta .comment-count {
                    display: none;
                }

                .entry-meta .posted-on::after {
                    margin-left: 0;
                    content: "";
                }
			}
		}
    }
    
}

@media only screen and (min-width: 568px) {

	.yasothon-gutenberg-posts {

		.content-post {

			&.layout.full.style-4 {

				.has-post-thumbnail {
					height: 350px;

					.entry-content {
						margin-left: 30px;
						margin-right: 30px;
						padding: 20px;
					}
				}

				.has-no-thumbnail {
					padding: 20px;
				}

				.entry-title {
					margin-bottom: 0;

					&.font-size-30 {
						font-size: 22px;
                        line-height: 28px;
					}

					&.font-size-32 {
						font-size: 22px;
                        line-height: 28px;
					}

					&.font-size-34 {
						font-size: 22px;
                        line-height: 28px;
					}

					&.font-size-36 {
						font-size: 22px;
                        line-height: 28px;
					}

					&.font-size-38 {
						font-size: 22px;
                        line-height: 28px;
					}

					&.font-size-40 {
						font-size: 22px;
                        line-height: 28px;
					}

					&.font-size-42 {
						font-size: 22px;
                        line-height: 28px;
					}

					&.font-size-44 {
						font-size: 22px;
                        line-height: 28px;
					}
				}

				.entry-meta .comment-count {
                    display: inline;
                }

                .entry-meta .posted-on::after {
                    margin-left: 10px;
                    content: "\b7";
                }
			}
		}
    }

}

@media only screen and (min-width: 768px) {

	.yasothon-gutenberg-posts {

		.content-post {

			&.layout.full.style-4 {

				.has-post-thumbnail {
					height: 450px;

					.entry-header {
						height: 350px;
					}

					.entry-content {
						margin-left: 60px;
						margin-right: 60px;
						padding: 30px;
					}

				}

				.post-thumbnail-image {
					height: 350px;
				}

				.has-no-thumbnail {
					padding: 30px;
				}

			}
		}
	}

}

@media only screen and (min-width: 1168px) {

	.yasothon-gutenberg-posts {

		.content-post {

			&.layout.full.style-4 {

				article {
					margin-bottom: 40px;
				}

				article:last-child {
					margin-bottom: 0;
				}

				.has-post-thumbnail {
					height: 550px;

					.entry-header {
						width: 100%;
						height: 450px;
					}

					.entry-content {
						margin-left: 60px;
						margin-right: 60px;
						padding: 30px;
					}
				}

				.has-no-thumbnail {
					padding: 40px;
				}

				.post-thumbnail-image {
					width: 100%;
					height: 450px;
				}

				.entry-title {
					margin-bottom: 0;

					&.font-size-30 {
						font-size: 30px;
						line-height: 36px;
					}

					&.font-size-32 {
						font-size: 32px;
						line-height: 38px;
					}

					&.font-size-34 {
						font-size: 34px;
						line-height: 40px;
					}

					&.font-size-36 {
						font-size: 36px;
						line-height: 42px;
					}

					&.font-size-38 {
						font-size: 38px;
						line-height: 44px;
					}

					&.font-size-40 {
						font-size: 40px;
						line-height: 46px;
					}

					&.font-size-42 {
						font-size: 42px;
						line-height: 48px;
					}

					&.font-size-44 {
						font-size: 44px;
						line-height: 50px;
					}
				}

				.posts-excerpt {

					&.font-size-14 p {
						font-size: 14px;
						line-height: 20px;
					}

					&.font-size-16 p {
						font-size: 16px;
						line-height: 22px;
					}

					&.font-size-18 p {
						font-size: 18px;
						line-height: 24px;
					}

					&.font-size-20 p {
						font-size: 20px;
						line-height: 26px;
					}

					&.font-size-22 p {
						font-size: 22px;
						line-height: 28px;
					}

				}

				.entry-meta .comment-count {
                    display: inline;
                }

                .entry-meta .posted-on::after {
                    margin-left: 10px;
                    content: "\b7";
                }
			}
		}
	}

}