.archive-news-container {
	background: #F4F4F4;
	margin: auto;
}

.hero-top {
    text-align: center;
	padding: clamp(2.5rem, 2.1rem + 2vw, 3.75rem) clamp(1.25rem, 0.05rem + 6vw, 5rem);
	background-color: #FF7518;
}
.hero-title {
	color: #FFFFFF;
	font-size: clamp(1.75rem, 1.4643rem + 1.4286vw, 2.75rem);
	font-weight: 700;
	line-height: 120%;
}

.new-listing-section {
	display: flex;
	justify-content: center;	
}

.news-listing {
	width: 100%;
	max-width: 1320px;
	display: flex;
	justify-content: center;
	padding: clamp(2.5rem, 2.1rem + 2vw, 3.75rem) clamp(1.25rem, 0.05rem + 6vw, 5rem);
}

.news-listing .news-grid {
    display: grid;
    gap: 28px;
    grid-template-columns: repeat(1, 1fr); /* Default to 1 column */
	justify-items: center;
	width: max-content;
}

.news-item {
    background: #FFFFFF;
	padding: 20px;
    border: 1px solid #ddd;
	width: 360px;
	border-radius: 24px;
	border: none;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.news-item:hover {
	.news-thumbnail img {
		transform: scale(1.1);
	}
}

.news-thumbnail {
	border-radius: 4px;
	overflow: hidden;
	max-width: 320px;
	width: 100%;
	margin-bottom: 20px;
}

.news-thumbnail img {
    max-width: 100%;
    height: auto;
	aspect-ratio: 1.61 / 1;
	width: 320px;
	transition: 0.1s ease-in-out;
}

.news-title {
    margin-bottom: 20px;
    font-size: clamp(1.2rem, 1.0857rem + 0.5714vw, 1.6rem);
	font-weight: 600;
	line-height: 120%;
}

.news-excerpt {
	margin-bottom: 20px;
	font-size: clamp(0.875rem, 0.8036rem + 0.3571vw, 1.125rem);
	font-weight: 400;
	line-height: 150%;
	text-align: left;
	color: #6E6E6E;
	cursor: pointer;
}

.read-more {
	display: block;
    color: #FF7518;
    text-decoration: none;
	width: max-content;
	height: auto;
	padding: 9px 18px;
	border-radius: 4px;
	border: 2px solid #FF7518;
	font-size: clamp(0.875rem, 0.8036rem + 0.3571vw, 1.125rem);
	font-weight: 600;
	line-height: 120%;
	cursor: pointer;
}

.read-more:hover {
    background-color: #FF7518;
	color: white;
}

.blogs-archive-empty-text {
	color: #0C0C0C;
	font-size:clamp(1.5rem, 1.26rem + 1.2vw, 2.25rem);
	font-weight: 700;
	line-height: 120%;
}

/* Grid for tablet (2 columns) */
@media (min-width: 768px) {
    .news-listing .news-grid {
        grid-template-columns: repeat(2, 1fr);
		gap: 32px;
    }
}

/* Grid for desktop (3 columns) */
@media (min-width: 1200px) {
    .news-listing .news-grid {
        grid-template-columns: repeat(3, 1fr);
		gap: 40px;
    }
}