/**
 *
 * page-blog.scss
 *
 */
/* ------------------------------------------------------------
 blog-container
------------------------------------------------------------ */
.blog-container {
	width: var(--width, 100%);
	padding-top: var(--padding-top, 0px);
	padding-left: var(--padding-side, 0px);
	padding-right: var(--padding-side, 0px);
	padding-bottom: var(--padding-bottom, 0px);
}

@media screen and (min-width: 1024px) {
	.blog-container {
		display: flex;
		justify-content: space-between;
		--width: 136.2rem ;
		margin-inline: auto;
		--padding-top: 8.5rem ;
		--padding-bottom: 19rem ;
	}
}

@media screen and (max-width: 1023px) {
	.blog-container {
		--padding-top: 4.4rem ;
		--padding-side: 2rem ;
		--padding-bottom: 11rem ;
	}
}

/* ------------------------------------------------------------
 blog-cards
------------------------------------------------------------ */
@media screen and (min-width: 1024px) {
	.blog-cards {
		margin-top: 1.8rem ;
	}
}

@media screen and (max-width: 1023px) {
	.blog-cards {
		margin-top: 0.4rem ;
	}
}

/* ------------------------------------------------------------
 blog-article
------------------------------------------------------------ */
.blog-article__figure {
	margin-top: calc( var(--padding-top) * -1);
	width: calc( 100% + var(--space-side));
	margin-left: calc( var(--margin-side) * -1);
}

@media screen and (min-width: 1024px) {
	.blog-article__figure {
		--space-side: calc( (100vw - var(--width)) / 2 );
		--margin-side: var( --space-side );
		margin-bottom: 3.4rem ;
	}
}

@media screen and (max-width: 1023px) {
	.blog-article__figure {
		--space-side: calc( var(--padding-side) * 2 );
		--margin-side: calc( var(--space-side) * .5 );
		margin-bottom: 2.6rem ;
	}
}

@media screen and (min-width: 1024px) {
	.blog-article__content {
		width: 83.1rem ;
		margin-left: 8.4rem ;
	}
}

/* ------------------------------------------------------------
 blog-sidebar
------------------------------------------------------------ */
@media screen and (min-width: 1024px) {
	.blog-sidebar {
		padding-top: 1rem ;
	}
}

@media screen and (max-width: 1023px) {
	.blog-sidebar {
		margin-top: 10.7rem ;
	}
}