.billow.blog {
	header.blw-blog-page-header {
		position: relative;
		padding: 40px 0;
		text-transform: uppercase;
		overflow: hidden;

		&.title-left {
			text-align: start;
		}

		&.title-center {
			text-align: center;
		}

		&.title-right {
			text-align: end;
		}

		.title {
			color: $color_text_main;
			font-size: 2.5rem;
			line-height: 2.25rem;
			font-weight: 600;
		}

		span.background {
			position: absolute;
			z-index: -1;
			top: 0;
			color: #e3f6f5;
			opacity: .3;
			font-size: 7.5rem;
			line-height: 1.38;
			font-weight: 400;
			font-style: normal;
			-webkit-font-smoothing: antialiased;
			pointer-events: none;

			&.bc-left {
				left: 0;
				transform: translateX(0%);
			}

			&.bc-center {
				left: 50%;
				transform: translateX(-50%);
			}

			&.bc-right {
				left: 100%;
				transform: translateX(-100%);
			}
		}
	}

	.blw-blog-posts {
		article.blw-post {
			.entry-blog-content {
				.title-post {
					.entry-title {
						font-size: 2.25rem;
						font-weight: 600;
						line-height: normal;
						padding-bottom: 0.6rem;
						margin: 0;

						a {
							color: inherit;
							text-decoration: none;
						}

						&:hover {
							a {
								color: inherit;
							}
						}
					}
				}

				.meta-post {
					text-transform: uppercase;
					font-size: 0.8rem;
					font-weight: 600;

					span.posted-on {
						a {
							color: $color_text_main;
							padding-right: 0.3rem;
						}
					}

					span.meta-item {
						padding-right: 0.3rem;

						a {
							text-decoration: none;
						}

						&:first-child {
							padding-right: 0rem;

							&::before {
								content: none;
							}
						}

						&::before {
							content: '|';
							margin: 0 0.4rem 0 0.2rem;
							color: $color_text_main;
							vertical-align: text-bottom;
						}
					}
				}

				.entry-post {
					p {
						margin: 1.5rem 0 0 0;
					}

					.read-more {
						display: flex;
						align-items: center;
						font-size: 1rem;
						margin-top: 1.5rem;
						width: fit-content;
						text-decoration: none;

						span {
							font-size: 1.25rem;
							padding-left: 0.3rem;
						}
					}
				}
			}
		}

		&.classic {
			article.blw-post {
				padding: 2.5rem;
				box-shadow: $box_shadow;

				.entry-thumb {
					margin: -1.5rem -1.5rem 1.5rem;

					a {
						display: block;
						height: 100%;

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

				.entry-blog-content {
					.title-post {
						.entry-title {
							font-size: 2.25rem;
							font-weight: 600;
							line-height: normal;
							padding-bottom: 0.6rem;
							margin: 0;

							a {
								color: inherit;
								text-decoration: none;
							}

							&:hover {
								color: inherit;
							}
						}
					}
				}
			}
		}

		&.simple {
			article.blw-post {
				display: flex;
				padding: 2rem;
				margin-bottom: 3rem;
				box-shadow: $box_shadow;

				.entry-thumb {
					max-width: 42%;
					width: 100%;
					margin: -2rem 2.5rem -2rem -2rem;

					a.post-thumbnail {
						position: relative;
						display: block;
						width: 100%;
						height: 100%;

						img {
							position: absolute;
							z-index: 1;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
						}
					}
				}

				.entry-blog-content {
					width: fit-content;
				}
			}
		}

		&.grid {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-gap: 2rem;

			article.blw-post {
				box-shadow: $box_shadow;

				.title-post {
					.entry-title {
						font-size: 2rem;

						a {
							color: inherit;
							text-decoration: none;
						}
					}
				}

				.entry-thumb {
					width: 100%;
					height: 15rem;

					a.post-thumbnail {
						display: block;
						width: 100%;
						height: 100%;

						img {
							z-index: 1;
							width: 100%;
							height: 100%;
						}
					}
				}

				.entry-blog-content {
					padding: 2rem;

					.meta-post {
						font-size: 0.7rem;
					}
				}
			}
		}

		&.gutenberg {
			article.blw-post {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 3rem;

				.entry-thumb {
					width: 100%;
					height: 25rem;

					a.post-thumbnail {
						width: 100%;
						height: 100%;
						overflow: hidden;
						z-index: 0;

						img {
							z-index: 1;
							width: 100%;
							height: 100%;
						}
					}
				}

				.entry-blog-content {
					width: 100%;
					display: flex;
					flex-direction: column;
					padding: 2rem 5rem;

					.title-post {
						.entry-title {
							font-size: 2rem;

							a {
								color: inherit;
								text-decoration: none;
							}
						}
					}
				}

				&::after {
					content: "\00b7 \00b7 \00b7 \00b7 \00b7";
					font-size: 25px;
					letter-spacing: 1.5em;
					padding-left: 1.5em;
					font-family: serif;
					text-align: center;
					opacity: 0.5;
				}

				&:last-child {
					&::after {
						content: none;
					}
				}
			}
		}
	}
}

@media ( max-width: 42rem ) {
	.billow {
		#page {
			.site-content {
				.blw-blog-posts {

					&.simple {
						article {
							flex-direction: column;

							.entry-thumb {
								max-width: 100%;
								margin: 0;

								.post-thumbnail {
									img {
										position: relative;
									}
								}
							}
						}
					}

					&.grid {
						display: flex;
						flex-direction: column;

						article {
							.entry-blog-content {
								padding: 1rem;
							}
						}
					}

					&.gutenberg {
						padding: 0;

						article {
							.entry-blog-content {
								padding: 1rem;
							}
						}
					}

					article {
						padding: 0.5rem !important;

						.entry-archive-content,
						.entry-blog-content,
						.entry-search-content {
							.entry-title {
								font-size: 1.5rem;

								a {
									color: inherit;
									text-decoration: none;
								}
							}

							.meta-archive,
							.meta-post,
							.meta-search {
								font-size: 0.7rem;
							}
						}
					}
				}
			}
		}
	}
}