.shopify-section--blog-banner {
	.blog-banner-container {
		position: relative;
		
		.blog-breadcrumbs {

			&.mobile {
				display: none;
			}

			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
			padding: var(--spacing-4);

				.breadcrumb-item {
					color: var(--main-unselected);
					text-transform: uppercase;
					font-size: var(--font-size-caption);

				&.last {
					color: var(--main-inverted-primary);
					font-weight: var(--font-weight-medium);
				}
			}

			@media screen and (max-width: 700px) {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				gap: 2px;
			}
		}

		.h2 {
			font-size: var(--font-size-h1);
			color: var(--main-inverted-primary);
			font-weight: var(--font-weight-semiBold);
		}

		p {
			text-transform: uppercase;
			font-size: var(--font-size-text);
			font-weight: var(--font-weight-regular);
			color: var(--main-inverted-primary);
			margin-top: var(--spacing-1);
		}
	}
}

.shopify-section--main-blog {

	.article-tags-list {
		padding: var(--spacing-4) var(--spacing-5);

		@media screen and (max-width: 700px) {
			padding: var(--spacing-3);
		}
	}

	.blog-post-card__image-container {
		margin-bottom: 0;
	}

	.blog-post-card__content {
		padding: var(--spacing-1) var(--spacing-2) var(--spacing-6) var(--spacing-2);

		@media screen and (max-width: 700px) {
			padding-bottom: var(--spacing-3);
		}

		.article-title {
			font-size: var(--font-size-h4);
			font-weight: var(--font-weight-semiBold);
		}

		.article-excerpt {
			font-size: var(--font-size-text);
			font-weight: var(--font-weight-regular);
			padding-top: calc(var(--spacing-1) / 2);
			display: block;
			line-height: normal;
	}
}

	.highlighted-article-content {
		.article-title {
			font-size: var(--font-size-h2);
			font-weight: var(--font-weight-semiBold);
		}

		.article-excerpt {
			font-size: var(--font-size-text);
			font-weight: var(--font-weight-regular);
			margin-top: var(--spacing-1);
			line-height: normal;
		}
	}

}


	.pagination {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		gap: var(--spacing-1);
	}
	
	.pagination__link {
	  &[aria-current] {
		background: none;
		color: var(--main-primary);
		font-size: var(--font-size-text);
		font-weight: var(--font-weight-semiBold);
	}
}

	.circle-button {

		svg {
			height: 24px;
			width: 24px;
		}

		path {
			stroke-width: 3;
		}

		&::before {
			content: none;
		}

		&:hover {
			path {
				color: var(--main-primary);
			}
		}
	}

.shopify-section--blog-post-banner {

	.hero-article-breadcrumbs {
			position: absolute;
			top: var(--spacing-3);
			right: var(--spacing-2);
			z-index: 2;
			
			.breadcrumb-item {
				font-weight: var(--font-weight-regular);
				font-size: var(--font-size-text);
				color: var(--subdued-text-color);
				text-transform: uppercase;
			}

			.breadcrumb-item.last {
				font-weight: var(--font-weight-medium);
				color: var(--main-text-color);
			}
		}

	.hero-article-breadcrumbs.mobile {
		display: none;
	}

	@media screen and (max-width: 700px) {

		.hero-article-breadcrumbs {
			position: static;
			justify-content: center;
			padding: var(--spacing-1) 0;
		}
		
		.hero-article-breadcrumbs.mobile {
			display: flex;
		}

		.desktop {
			display: none;
		}
	}

	.banner-container {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-start;
		position: relative;

		.content-box {
			grid-template-columns: unset;
			padding-left: var(--spacing-7);

			@media screen and (max-width: 700px) {
				padding: 0 var(--spacing-3);
			}
		}
		
		.meta-information > :not(.shape) ~ :before {
			content: none;
		}

		.meta-information {
			column-gap: var(--spacing-2);
			margin-bottom: var(--spacing-2);
		}
		
		.blog-post_tag {
			background-color: var(--main-primary);
			color: var(--main-inverted-primary);
			padding: 4px;
			line-height: normal;
		}

		#reading-time {
			position: relative;
		}

		#reading-time:before {
			content: "";
			position: absolute;
			background-color: var(--main-stroke);
			width: 1px;
			height: 100%;
			left: calc(var(--spacing-1) * -1);
			top: 0;
		}

		.blog-title-heading {
			font-size: var(--font-size-h1);
			font-weight: var(--font-weight-semiBold);
			margin-bottom: var(--spacing-1);
		}

		.excerpt-container {
			margin-bottom: var(--spacing-8);
			.page-subtitle {
				font-size: var(--font-size-text);
				font-weight: var(--font-weight-regular);
				text-transform: uppercase;
			}
			@media screen and (max-width: 700px) {
				margin-bottom: var(--spacing-4);
			}
		}

		.index-container {
			display: flex;
			flex-direction: column;
			height: 100px;

			.index-link {
				display: flex;
				gap: var(--spacing-1);
				justify-content: flex-start;
				text-transform: uppercase;
				font-size: calc(var(--font-size-caption));

				.number {
					min-width: var(--spacing-8);
				}

			}
		}
	}
}

.shopify-section--main-article {

	.section-spacing {
		padding: var(--spacing-4) 0 var(--spacing-5);
	}

	@media screen and (max-width: 700px) {
		.section-spacing {
			padding: var(--spacing-3) var(--spacing-3) var(--spacing-5);
		}
	}

	h2 {
		font-size: var(--font-size-h2);
		font-weight: var(--font-weight-semiBold);
		padding-bottom: var(--spacing-1);
	}

	.prose :where(p, ol, ul, form, hr, table, .accordion) {
		margin-block-start: unset;
	}

	.article-main {
		font-size: var(--font-size-text);
		font-weight: var(--font-weight-regular);
		line-height: 1.4;
	}

}

.article-body {
	.section-spacing {
		padding: var(--spacing-4) 0;
	}

	@media screen and (max-width: 700px) {
		.section-spacing {
			padding: var(--spacing-3) var(--spacing-3) var(--spacing-5);
		}
	}

	.article-chapter-heading {
		font-size: var(--font-size-h2);
		font-weight: var(--font-weight-semiBold);
		margin-bottom: var(--spacing-1);
	}

	.prose :where(p, ol, ul, form, hr, table, .accordion):first-child {
		margin-block-start: unset;
	}
	
	.metafield-rich_text_field {
		font-size: var(--font-size-text);
		font-weight: var(--font-weight-regular);
		line-height: 1.4;
	}
}

.article-featured-product-list {
		.section-spacing {
			padding: 0;
		}
}


.blog-share-button-section {
	padding: var(--spacing-4) var(--spacing-5);

	span {
		font-size: var(--font-size-h4);
		font-weight: var(--font-weight-semiBold);
		color: var(--main-unselected);
	}

	.share-buttons {
		gap: var(--spacing-6);
	}

	.share-buttons__item {
		position: relative;

	}

	.share-buttons__item:not(:first-child):before {
		content: "";
		position: absolute;
		background-color: var(--main-stroke);
		width: 1px;
		height: 100%;
		left: calc(var(--spacing-3) * -1);
		top: 0;
	}
}