/* =========================================================
   BLOG ARCHIVE
   ========================================================= */

.blog-archive {
	width: 100%;

	padding:
		0px
		20px
		90px;
}

.blog-archive__container {
	width: 100%;
	max-width: 1320px;

	margin: 0 auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.blog-archive__header {
	max-width: 760px;

	margin-bottom: 42px;
}

.blog-archive__title {
	font-weight: 500;
    color: var(--secondary);
}

.blog-archive__description {
	color:
		var(--text-color, #474747);

	font-size: 17px;
	line-height: 1.65;
}

.blog-archive__description p:last-child {
	margin-bottom: 0;
}


/* =========================================================
   GRID
   ========================================================= */

.blog-archive__grid {
	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap: 30px;
}


/* =========================================================
   CARD
   ========================================================= */

.blog-card {
	display: flex;
	flex-direction: column;

	min-width: 0;

	margin: 0;

	background: #fff;

	border:
		1px solid
		var(--border-color, #EBECF0);

	border-radius:
		var(--border-radius, 5px);

	overflow: hidden;

	transition:
		transform .22s ease,
		box-shadow .22s ease,
		border-color .22s ease;
}

.blog-card:hover {
	transform:
		translateY(-3px);

	box-shadow:
		var(
			--box-shadow,
			0 10px 30px rgba(0, 0, 0, .10)
		);
}


/* =========================================================
   IMAGE
   ========================================================= */

.blog-card__image {
	position: relative;

	display: block;

	width: 100%;

	aspect-ratio: 16 / 10;

	overflow: hidden;

	background:
		var(--gray-background, #F9FAFB);
}

.blog-card__image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: contain;

	transition:
		transform .35s ease;
}

.blog-card__image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;

	background:
		var(--gray-background, #F9FAFB);

	color:
		var(--border-color, #EBECF0);

	font-size: 60px;
	font-weight: 300;
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.blog-card__content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;

	padding:
		23px
		24px
		25px;
}


/* =========================================================
   META
   ========================================================= */

.blog-card__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	gap: 8px 12px;

	margin-bottom: 13px;
}


.blog-card__category {
	display: inline-flex;
	align-items: center;

	padding:
		5px
		9px;

	border-radius: 4px;

	background:
		color-mix(
			in srgb,
			var(--primary, #ea242e) 8%,
			#fff
		);

	color:
		var(--primary, #ea242e);

	font-size: 12px;
	font-weight: 700;
	line-height: 1;

	text-decoration: none;

	text-transform: uppercase;
	letter-spacing: .03em;
}

.blog-card__category:hover {
	color:
		var(--primary, #ea242e);
}


.blog-card__date {
	color: #858585;

	font-size: 13px;
	line-height: 1.3;
}


/* =========================================================
   TITLE
   ========================================================= */

.blog-card__title {
	margin:
		0
		0
		12px;

	font-size: 21px;
	font-weight: 700;
	line-height: 1.35;
}

.blog-card__title a {
	color:
		var(--secondary, #1A1D3E);

	text-decoration: none;
	transition:
		color .18s ease;
	font-weight: 500;
}

.blog-card__title a:hover {
	color:
		var(--primary, #ea242e);
}


/* =========================================================
   EXCERPT
   ========================================================= */

.blog-card__excerpt {
	margin-bottom: 22px;

	color:
		var(--text-color, #474747);

	font-size: 15px;
	font-weight: 400;
	line-height: 1.65;
}


/* =========================================================
   READ MORE
   ========================================================= */

.blog-card__read-more {
	display: inline-flex;
	align-items: center;

	gap: 8px;

	width: fit-content;

	margin-top: auto;

	color:
		var(--primary, #ea242e);

	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;

	text-decoration: none;
}

.blog-card__read-more svg {
	transition:
		transform .18s ease;
}

.blog-card__read-more:hover {
	color:
		var(--primary, #ea242e);
}

.blog-card__read-more:hover svg {
	transform:
		translateX(3px);
}


/* =========================================================
   PAGINATION
   ========================================================= */

.blog-archive__pagination {
	margin-top: 55px;
}


.blog-archive__pagination
.nav-links {
	display: flex;
	align-items: center;
	justify-content: center;

	flex-wrap: wrap;

	gap: 7px;
}


.blog-archive__pagination
.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 42px;
	height: 42px;

	padding:
		0
		12px;

	border:
		1px solid
		var(--border-color, #EBECF0);

	border-radius:
		var(--border-radius, 5px);

	background: #fff;

	color:
		var(--secondary, #1A1D3E);

	font-size: 14px;
	font-weight: 600;

	text-decoration: none;

	transition:
		color .18s ease,
		background-color .18s ease,
		border-color .18s ease;
}


.blog-archive__pagination
.page-numbers:hover {
	border-color:
		var(--primary, #ea242e);

	color:
		var(--primary, #ea242e);
}


.blog-archive__pagination
.page-numbers.current {
	border-color:
		var(--primary, #ea242e);

	background:
		var(--primary, #ea242e);

	color: #fff;
}


/* =========================================================
   EMPTY
   ========================================================= */

.blog-archive__empty {
	padding:
		60px
		30px;

	background:
		var(--gray-background, #F9FAFB);

	border-radius:
		var(--border-radius, 5px);

	text-align: center;
}

.blog-archive__empty h2 {
	margin: 0;

	color:
		var(--secondary, #1A1D3E);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

	.blog-archive__grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

	.blog-archive {
		padding:
			0px
			18px
			65px;
	}


	.blog-archive__header {
		margin-bottom: 30px;
	}


	.blog-archive__grid {
		grid-template-columns:
			1fr;

		gap: 22px;
	}


	.blog-card__content {
		padding:
			20px
			20px
			22px;
	}


	.blog-card__title {
		font-size: 19px;
	}


	.blog-archive__pagination {
		margin-top: 40px;
	}

}