#featured_articles {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
	padding: 60px 0 0;
	text-align: center;
}

#featured_articles h2 {
	font-size: var(--h-1);
}

#featured_articles .article-blocks {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	gap: 1.75rem;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	color: #fff;
	max-width: 956px;
	margin: 120px auto 0;
}

#featured_articles .article-block {
	-webkit-box-flex: 1;
	    -ms-flex: 1 1 calc( 50% - 1.75rem );
	        flex: 1 1 calc( 50% - 1.75rem );
	max-width: 50%;
}

#featured_articles .article-block:not(:last-child) {
	margin-bottom: 30px;
}

#featured_articles .article-block-content {
    background-color: #000;
    padding: 100px 30px;
    position: relative;
	-webkit-box-shadow: 0 2px 25px rgba(0, 0, 0, .3);
	        box-shadow: 0 2px 25px rgba(0, 0, 0, .3);
	font-size: var(--txt-l);
}

#featured_articles .article-block-meta {
	position: relative;
	z-index: 1;
}

#featured_articles .article-block-icon {
    position: absolute;
    top: -40px;
    left: 0;
    right: 0;
    margin: auto;
    width: 80px;
    height: 80px;
	background-color: var(--contrast-2);
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    z-index: 1;
	-webkit-transition: -webkit-transform 0.3s ease;
	transition: -webkit-transform 0.3s ease;
	-o-transition: transform 0.3s ease;
	transition: transform 0.3s ease;
	transition: transform 0.3s ease, -webkit-transform 0.3s ease;
	-webkit-box-shadow: 0 2px 34px rgba(0, 0, 0, .3);
	        box-shadow: 0 2px 34px rgba(0, 0, 0, .3);
}

#featured_articles .article-block:nth-child(even) .article-block-icon {
	background-color: var(--accent);
}

#featured_articles .article-block-content:hover .article-block-icon {
	-webkit-transform: scale(1.1) rotate(-15deg);
	    -ms-transform: scale(1.1) rotate(-15deg);
	        transform: scale(1.1) rotate(-15deg);
}

#featured_articles .article-block-icon img {
	max-width: 40px;
}

#featured_articles .article-block-title {
	color: #fff;
	font-size: var(--h-2);
}

#featured_articles .article-block-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    opacity: 0.35;
}

#featured_articles .article-block-posts {
	position: relative;
	z-index: 1;
    list-style: none;
    margin: -60px auto 0;
    padding: 0;
    width: 90%;
	-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
	        box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}

#featured_articles .article-block-posts li:not(:last-child) {
	border-bottom: 1px solid var(--base-3);
}

#featured_articles .article-block-posts a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: nowrap;
	    flex-wrap: nowrap;
	gap: 1em;
	padding: 1em;
	text-decoration: none;
	background-color: #fff;
	-webkit-transition: background-color 0.3s ease;
	-o-transition: background-color 0.3s ease;
	transition: background-color 0.3s ease;
}

#featured_articles .article-block-posts a:hover {
	background-color: var(--base-2);
}

#featured_articles .article-block-posts h4 {
	-webkit-box-flex: 1;
	    -ms-flex: 1 1 auto;
	        flex: 1 1 auto;
	font-size: var(--txt-l);
	font-weight: normal;
	color: var(--contrast-2);
	text-align: left;
	margin-bottom: 0;
	line-height: 1.5;
}

#featured_articles .article-block-posts img {
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 55px;
	        flex: 0 0 55px;
	width: 55px;
	height: 55px;
	border-radius: 50%;
	overflow: hidden;
	-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
	        box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}

#featured_articles .pbi-text-separator {
	font-size: var(--txt-l);
}

@media (max-width: 950px) {
	#featured_articles .article-block {
		-ms-flex-preferred-size: 100%;
		    flex-basis: 100%;
		max-width: 100%;
	}
	#featured_articles .article-block-posts h4 {
		font-size: var(--txt-m);
	}
}
@media (max-width: 700px) {
	#featured_articles > .grid-container > h2,
	#featured_articles .pbi-text-separator {
		display: none;

	}
	#featured_articles {
		padding-top: 0;
		padding-bottom: 0;
	}
	#featured_articles .article-blocks {
		margin-top: 30px;
	}
}