/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

.blog-listings--content {
	padding-block: var(--organism-standard-gap);
}

/* SINGLE POST */

.single-post--content{
	
}

.single-post--content__inner{
	padding-bottom: 0;
}

.single-post--content article.blog-post{
	max-width: 900px;
	margin: 0 auto;

	display: grid;
	gap: var(--organism-standard-gap);
	padding-block: var(--organism-standard-gap);
}

/* FEATURED & BREAKOUT IMAGES */
.blog-post__feature-image {
	display: block;
	border-radius: var(--global-image-radius);
	width: 100%;
	height: auto;
	aspect-ratio: 16/9;
	object-fit: cover;
}

.breakout-image > img{
	border-radius: var(--global-image-radius);
}

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

	.breakout-image{
		width: 100vw;
		position: relative;
		left: 50%;
		right: 50%;
		margin-left: -50vw;
		margin-right: -50vw;
	}

	.breakout-image > img{
		object-fit: cover;
		margin-inline: auto;	
		width: 100% !important;
		height: auto !important;
		max-width: var(--max-width) !important;
		border-radius: var(--global-image-radius);
	}

}

/* TAG LIST */
.blog-post__tags {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--molecule-standard-gap);
	padding-block: var(--molecule-standard-gap);
	border-top: 1px solid var(--hs-accent-4);
}

.blog-post__tags-title {
	font-weight: bold;
}

.blog-post__tags-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--atom-standard-gap);
}



.blog-filters {
	display: grid;
	align-items: center;
	grid-template-columns: auto 1fr;
	gap: 0.5em;
}

.blog-filters--label {
	
}

form.blog-filters--form {
	
}

@media (min-width: 600px) {
	
	.blog-filters {
	  grid-template-columns: auto  auto 1fr;
	}

	form.blog-filters--form select.filter-input {
		width: auto !important;
	}
	
}