.tmpl-archive-blog {
	position: relative;
	&__bg {
		position: absolute;
		left: 0;
		right: 0;
		top: -6.4rem;
		height: 33.5vh;
		max-height: 360px;
		@include media-min($medium) {
			height: 22vw;
		}
	}
	.posts-list {
		padding-bottom: var(--block-padding-sm-bottom);
		margin-bottom: -14rem;
		transform: translateY(-14rem);

		@include media-min($medium) {
			padding-bottom: var(--block-padding-md-bottom);
		}

		@include media-min($large) {
			transform: translateY(-18rem);
			margin-bottom: -18rem;

			padding-bottom: var(--block-padding-lg-bottom);
		}

		&-blog-algolia {
			.posts-list__row-featured{
				max-width: var(--container-max-width);
			}
			
			.posts-list__cards-container{
				gap: 64px 32px;
			}
		}

		&__no-results-container,
		&__loader-container {
			padding-top: 14rem;

			@include media-min($large) {
				padding-top: 18rem;
			}
		}
	}
}

.tmpl-archive-sidebar {
	background-color: var(--color-white);
	box-shadow: var(--default-box-shadow);
	border: 1px solid var(--default-border-color);
	padding: 3rem 2rem 2.5rem;
	@include media-min($medium) {
		padding: 4rem 3rem;
		bottom: 15rem;
		position: relative;
	}
	.input-with-icon,
	input.input-with-icon__input {
		background-color: var(--color-white);
		max-width: 100%;
		.input-with-icon__icon {
			height: 10px;
			width: 10px;
		}
		+ .tag-container {
			margin-top: 4.4rem;
		}
	}
	.tag-container {
		margin-top: 3.4rem;
		&.open {
			.tag-container-title {
				@include media-max($medium) {
					&::after,
					&::before {
						transform: rotate(0);
					}
				}
			}
			.tags {
				@include media-max($medium) {
					display: block;
				}
			}
		}
	}
	.tag-container-title {
		font-size: 1.6rem;
		font-weight: 600;
		letter-spacing: 0;
		line-height: 1.2;
		margin-bottom: 0.7rem;
		position: relative;
		@include media-max($medium) {
			padding-left: 2rem;
			&::after,
			&::before {
				background-color: #000;
				content: "";
				display: block;
				height: 2px;
				left: 0;
				position: absolute;
				top: 8px;
				transition: all 0.3s ease-in-out;
				width: 10px;
			}
			&::after {
				transform: rotate(180deg);
			}
			&::before {
				transform: rotate(90deg);
			}
		}
	}
	.tags {
		@include media-max($medium) {
			display: none;
		}
	}
	.tags-list {
		.tag-item {
			display: block;
			width: 100%;
			background-color: #e5e8eb;
			text-decoration: none;
			margin: 0.5rem 0;
			font-size: 1.4rem;
			padding: 0.8rem;
			transition: var(--default-transition-params);
			&:hover {
				background-color: #cbd1d7;
			}
		}
		.tag-item-title {
			color: var(--color-gray-dark);
			font-weight: var(--font-weight-regular);
		}
		.tag-item-content {
			color: var(--color-gray-dark);
			margin-top: 0.8rem;
			word-break: break-all;
		}
	}
}