.blog-listing--tags,
.blog-listing--search {
	position: relative;
	padding-top: var(--spacer_24);
	padding-bottom: var(--spacer_80);
}

.blog-listing--tags:before,
.blog-listing--search:before {
	content: "";
	position: absolute;
	width: 100vw;
	height: 100%;
	top: 0;
	left: calc((100vw - var(--container_width)) / (-2) - 2rem);
	background-color: var(--light_blue);
	z-index: -1;
}

.blog-listing:not(.blog-listing--tags):not(.blog-listing--search) .blog-listing__header-recent-post {
	padding: var(--spacer_80) 0;
	position: relative;
}
.blog-listing:not(.blog-listing--tags):not(.blog-listing--search) .blog-listing__header-recent-post:before {
	content: "";
	position: absolute;
	width: 100vw;
	height: 100%;
	top: 0;
	left: calc((100vw - var(--container_width)) / (-2) - 2rem);
	background-color: var(--light_blue);
	z-index: -1;
}

.blog-listing__header {
	max-width: 58rem;
	margin: 0 auto;
}

.blog-listing__header-title,
.blog-listing__header-subtitle {
	text-align: center;
}

.blog-listing__breadcrumb {
	display: flex;
	align-items: center;
	margin-bottom: var(--spacer_80);
}

.blog-listing__breadcrumb-link {
	display: flex;
	align-items: center;
	gap: var(--spacer_8);
	font-weight: var(--font_weight_600)
}

.blog-listing__breadcrumb-link svg {
	transform: translateX(0);
	transition: transform var(--default_transition)
}

.blog-listing__breadcrumb-link:hover svg {
	transform: translateX(-0.8rem);
}

{###############}
{# RECENT POST #}
{###############}

.recent-post--container {
	display: flex;
	gap: var(--spacer_20);
	padding-top: var(--spacer_80);
}

.recent-post__content,
.recent-post__image {
	width: calc(50% - var(--spacer_20) / 2);
}

.recent-post__topics-list {
	display: flex;
	gap: var(--spacer_8);
	align-items: center;
	margin-bottom: var(--spacer_8);
}

.recent-post__date-time {
  display: flex;
	margin-top: var(--spacer_8);
	opacity: 0.6;
}

.recent-post__date {
	border-right: 1px solid rgba(0, 0, 0, 0.30);
	padding-right: var(--spacer_8);
	font-style: italic;
}

.recent-post__time {
	padding-left: var(--spacer_8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacer_4);
	font-style: italic;
}

.recent-post__link {
	margin-top: var(--spacer_24);
}

.recent-post__image {
	object-fit: cover;
	max-height: 400px;
}

@media (max-width: 1280px) {
	.blog-listing:not(.blog-listing--tags):not(.blog-listing--search) .blog-listing__header-recent-post:before,
	.blog-listing--tags:before,
	.blog-listing--search:before {
		left: calc(-2rem + var(--spacer_32)* -1);
	}
}
@media (max-width: 1024px) {
	.blog-listing:not(.blog-listing--tags):not(.blog-listing--search) .blog-listing__header-recent-post:before,
	.blog-listing--tags:before,
	.blog-listing--search:before {
		left: calc(-2rem + var(--spacer_16)* -1);
	}
}
@media (max-width: 800px) {
	.blog-listing:not(.blog-listing--tags):not(.blog-listing--search) .blog-listing__header-recent-post:before,
	.blog-listing--tags:before,
	.blog-listing--search:before {
		left: -2rem;
	}
	.recent-post--container {
		flex-direction: column-reverse;
	}
	.recent-post__content, .recent-post__image {
		width: 100%;
	}
}
@media (max-width: 600px) {
	.blog-listing:not(.blog-listing--tags):not(.blog-listing--search) .blog-listing__header-recent-post {
		padding: var(--spacer_40) 0;
	}
}

{#################}
{# TAGS & SEARCH #}
{#################}
.blog-listing__tags-search {
	display: flex;
	justify-content: flex-end;
	gap: var(--spacer_20);
	margin-top: var(--spacer_80);
	flex-flow: wrap;
}


.blog-listing__tags-container {
	position: relative;
	min-width: 28rem;
	border: 1px solid rgba(0, 0, 0, 0.30);
  background: #FFF;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--spacer_16) var(--spacer_20);
}

.blog-listing__tags-input {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 2;
	background: transparent;
	opacity: 0;
}

.blog-listing__tags-placeholder {
	margin-bottom: unset;
	opacity: 0.5;
}

.blog-listing__tags-list {
	position: absolute;
	width: 100%;
	max-height: 0;
	left: 0;
	top: 100%;
	overflow: hidden;
  padding: 0 var(--spacer_20);
  z-index: 2;
  background-color: var(--grey);
	transition: max-height var(--default_transition);
}

.blog-listing__tags-input:checked ~ .blog-listing__tags-list {
	max-height: 100rem;
	transition: max-height var(--default_transition);
}

.blog-listing__tags-list-item-link {
  display: block;
  padding: var(--spacer_12) 0;
}
.blog-listing__tags-list-item:first-child .blog-listing__tags-list-item-link {
	margin-top: var(--spacer_16)
}
.blog-listing__tags-list-item:last-child .blog-listing__tags-list-item-link {
	margin-bottom: var(--spacer_16)
}

.blog-listing__search-inputs-container {
	position: relative;
}

.blog-listing__search-inputs-container:after {
	content: "";
	position: absolute;
	width: 2.4rem;
	height: 2.4rem;
	top: 50%;
	right: var(--spacer_20);
	transform: translate(-50%, -50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.0001 9C19.0001 11.2091 17.2093 13 15.0001 13C12.791 13 11.0001 11.2091 11.0001 9C11.0001 6.79086 12.791 5 15.0001 5C17.2093 5 19.0001 6.79086 19.0001 9ZM22.0001 9C22.0001 12.866 18.8661 16 15.0001 16C13.61 16 12.3145 15.5948 11.2254 14.8961L4.06077 22.0607L1.93945 19.9393L9.10406 12.7747C8.40532 11.6856 8.00011 10.3901 8.00011 9C8.00011 5.13401 11.1341 2 15.0001 2C18.8661 2 22.0001 5.13401 22.0001 9Z' fill='%23EA5297'/%3E%3C/svg%3E");}

.blog-listing:not(.blog-listing--search) .blog-listing__search-input[type="text"] {
	width: 28rem;
}

.blog-listing__search-input[type="text"]:focus-visible {
	outline: unset;
}

@media (max-width: 600px) {
	.blog-listing__tags-search {
		flex-direction: column-reverse;
		margin-top: var(--spacer_40);
	}
	.blog-listing__tags-container,
	.blog-listing__search-container {
		width: 100%;
	}
}

{################}
{# BLOG LISTING #}
{################}
.blog-listing__container {
	margin-top: var(--spacer_40);
}
.blog-listing__container--spacer {
	margin-top: var(--spacer_80);
}

.blog-listing__list {
	display: flex;
	flex-flow: wrap;
	gap: var(--spacer_20);
}
.blog-listing__list-item {
	width: calc(100% / 3 - (var(--spacer_20) * 2 / 3));
	min-width: 35rem;
	position: relative;
}

.blog-listing__list-item:before {
	content: "";
	position: absolute;
	width: 6.4rem;
	height: 6.4rem;
	top: 0;
	right: 0;
	background-color: var(--button_pink);
  clip-path: polygon(0 0, 0% 100%, 100% 100%);
}

.blog-listing__list-item-link--invisible {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0;
	clip-path: polygon(calc(100% - 6.4rem) 0, 100% 6.4rem, 100% 100%, 0 100%, 0 0);
}

.blog-listing__list-item-image {
	width: 100%;
	height: 20rem;
	object-fit: cover;
	clip-path: polygon(calc(100% - 6.4rem) 0, 100% 6.4rem, 100% 100%, 0 100%, 0 0);
	z-index: -1;
	position: relative;
}

.blog-listing__list-item-content-container {
	padding: var(--spacer_28) var(--spacer_40);
	border: 1px solid rgba(0, 0, 0, 0.30);
	height: 32.6rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
	background-color: var(--white_color);
}

.blog-listing__list-item-content-tags-list {
	display: flex;
	gap: var(--spacer_8);
	margin-bottom: var(--spacer_8);
	z-index: 3;
	position: relative;
}

.blog-listing__list-item-content-title {
	margin-bottom: var(--spacer_8);
	display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
}

.blog-listing__list-item-content-description {
	display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;
}

.blog-listing__list-item-content-description *:last-child{
	margin-bottom: 0;
}

.blog-listing__list-item-content-date-time {
  display: flex;
	margin-top: var(--spacer_8);
}

.blog-listing__list-item-content-date {
	border-right: 1px solid rgba(0, 0, 0, 0.30);
	padding-right: var(--spacer_8);
}

.blog-listing__list-item-content-time {
	padding-left: var(--spacer_8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacer_4);
}

.blog-listing__list-item-content-link {
	margin-top: var(--spacer_24);
	color: var(--text_dark);
	font-weight: var(--font_weight_600);
}

.blog-listing__list-item:hover .blog-listing__list-item-content-link:after {
	transform: translateX(.8rem);
}

@media (max-width: 759px) {
	.blog-listing__list {
		justify-content: center;
	}
}

@media (max-width: 400px) {
	.blog-listing__list-item {
		width: 100%;
		min-width: unset;
	}
}

{##############}
{# PAGINATION #}
{##############}
.hs-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
	margin-top: var(--spacer_40);
}

.hs-pagination__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
	font-weight: var(--font_weight_400);
	color: var(--text_medium);
}
.hs-pagination__link--active {
	font-weight: var(--font_weight_700);
	color: var(--text_dark);
}

.hs-pagination__link .hs-pagination__link-icon {
	width: 2.4rem;
	height: 2.4rem;
}

.hs-pagination__link svg {
  width: 2.4rem;
	height: 2.4rem;
}

.hs-pagination__link svg path {
	fill: var(--pink);
	stroke: var(--pink);
}