.block-news{
	background-color: var(--light_text_color);
	padding: 0 2rem 6rem;
	position: relative;
}

.block-news.section_title{
	padding: 8rem 2rem 4rem;
}

/* .block-news .section_number:before{
	right: 0;
	margin: auto;
} */

.block-news .section_content{
	text-align: center;
}

.block-news .section_content h3{
	margin: auto 8rem 1.5rem;
}

.block-news h2{
	margin-bottom: 2rem;
}

.blog_grid-sizer, .blog_grid .single_post{
	width: 33.33%;
}

.news_list article{
	text-align: left;
	display: flex;
	flex-direction: column;
	padding: 1rem;
}

.news_list article .news_container{
	background-color: var(--secondary_variant_b_color);
}

.news_list article figure{
	margin: 0;
	position: relative;
	/* min-height: 10rem; */
	max-height: 15rem;
	overflow: hidden;
}

.news_list article figure:before{
	width: 100%;
	height:5rem;
	z-index: 1;
	content: '';
	display: block;
	position: absolute;
	top: 0;
	background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 100%);
	background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 100%);
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 100%);
}

.news_list article figure .news_label{
	position: absolute;
	top: 1rem;
	left: 1rem;
	display: flex;
	align-items: center;
	z-index: 2;
}

.news_list article figure .news_label h5{
	color: var(--light_text_color);
	margin: 0;
}

.news_label a{
	color: var(--light_text_color) !important;
	text-decoration: none !important;
}

.news_list article figure .square{
	color: var(--light_text_color);
	font-size: 1rem;
	line-height: 1.15;
	border: 1px solid var(--light_text_color);
	height: 3rem;
	width: 3rem;
	line-height: 3rem;
	padding: 0;
	text-align: center;
	text-transform: uppercase;
	margin-right: 1rem;
	display: none;
}

.news_list article img{
	display: block;
	height: 100%;
	width: 100%;
	object-fit:cover;
}

.news_list article .news_info_img{
	margin: 0;
}

.news_list article .news_texts{
	padding: 1rem;
}

.news_list article .themes .bookmark_icon{
	position: relative;
	top: initial;
	left: initial;
	margin-right: 0.3rem;
}
.themes {
	margin-bottom: 0.3rem;
	position: relative;
	margin-top: 1rem;
}
#grid-container .themes{
	margin-top: 0;
}
.post_date{
	font-style: italic;
	margin-bottom: 0.8rem;
	font-size: 0.9rem;
}

.post_date:after{
	content: '';
	display: block;
	width: 2rem;
	background-color: var(--secondary_variant_a_color);
	height: 1px;
	margin-top: 1rem;
}

.themes .bookmark_icon{
	fill: var(--secondary_variant_a_color);
	height: 0.8rem;
	margin-right: 0.7rem;
	display: inline-block;
	vertical-align: bottom;
	position: absolute;
	left: -1rem;
	top: 0.25rem;
}
.themes a{
	color: var(--secondary_variant_a_color) !important;
	font-weight: bold;
	font-size: 0.8rem;
	text-decoration: none;
}
#grid-container .themes a{
	font-size: 0.6rem;
}
.themes a:hover{
	text-decoration: underline;
}
.themes a:after{
	content: ' | ';
	display: inline-block;
	padding: 0 0.2rem;
}
.themes a:last-child:after{
	content: '';
}

/* ----------- Back-end Code ----------- */
.acf-block-preview .news_list {
	display: flex;
}
.block-editor-inserter__preview-container .acf-block-preview .block-page-header {
}


/* iPad landscape */
@media screen and (max-width: 1024px) {
	.block-news{
		padding: 0 1rem 4rem;
	}
	.blog_grid-sizer, .blog_grid .single_post{
		width: 50%;
	}
	.news_list article figure{
		max-height: 12rem;
	}
	.news_list article figure .news_label{
		top: 0.5rem;
		left: 0.5rem;
	}
	.news_list article,
	.news_list article .news_texts{
		padding: 0.5rem;
	}
	.themes a{
		font-size: 0.8rem;
	}
	.post_date{
		margin-bottom: 0.5rem;
		font-size: 0.7rem;
	}
	.post_date:after{
		margin-top: 0.4rem;
		width: 1.5rem;
	}
}
/* iPad Portrait */
@media screen and (max-width: 820px) {
	
}
/* iPhone X landscape */
@media screen and (max-width: 930px) and (orientation : landscape) {
}
/* iPhone 12 portrait max */
@media screen and (max-width: 430px) {
	.blog_grid-sizer, .blog_grid .single_post{
		width: 100%;
	}
	.news_list article{
		padding: 0.5rem 0;
	}
	.news_list article .news_texts{
		padding: 1rem;
	}
	.news_content{
		flex-direction: column;
	}
	.news_info{
		width: 60% !important;
		margin: auto auto 1rem auto;
	}
	.news_text{
		width: 100% !important;
	}
}