h3.top_articles {
	font-size: 3rem;
    width: max-content;
    margin: auto;
    border-bottom: 3px solid var(--secondary);
    margin-bottom: 60px;
    padding-bottom: 1rem;
}
.top_articles_grid .banner a {
	font-size: 20px;
	color: white;
	font-weight: 700;
	text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.top_articles_grid .banner p {
	font-size: 14px;
	color: white;

}
.top_articles_grid .overly_content, .category_articles_grid .overly_content {
	padding: 20px;
	padding-bottom: 5px;
}

.top_articles_grid .banner:first-child a {
	font-size: 28px;
}
.top_articles_grid .banner:first-child p {
	font-size: 15px;
}
.top_articles_grid .overly_content p, .category_articles_grid .overly_content p {
	text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    /* this here is a little hack to make ellipsis work with the responsive design*/
    width: calc(100%);
}

.top_articles_grid img {
	object-fit: cover;
}
.top_articles_grid .overflow-hidden {
	overflow: hidden;
	height: 100%;
    width: 100%;
}
.top_articles_grid {
	gap: 2rem;
    display: grid;
    grid-template-columns: 5fr 3fr 3fr 4fr;
    grid-template-rows: 45rem 30rem 30rem;
    margin-bottom: 7rem;
    margin-left: min(5vw, 15px);
    margin-right: min(5vw, 15px);
}

.top_articles_grid > *:nth-child(1) {
	grid-column-start: 1;
	grid-column-end: -1;

}
.top_articles_grid > *:nth-child(2) {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 4;
}
.top_articles_grid > *:nth-child(3) {
	grid-column-start: 2;
	grid-column-end: 4;
}
.top_articles_grid > *:nth-child(4) {
	grid-column-start: 4;
	grid-column-end: 5;
}
.top_articles_grid > *:nth-child(5) {
	grid-column-start: 2;
	grid-column-end: 3;
}
.top_articles_grid > *:nth-child(6) {
	grid-column-start: 3;
	grid-column-end: 5;
}


@media (max-width: 991px) {
	.top_articles_grid .banner:first-child a {
		font-size: 20px;
	}
	.top_articles_grid .banner:first-child p {
		font-size: 14px;
	}
	.top_articles_grid .banner:first-child h3 {
    	font-size: 24px;
	}
	.top_articles_grid .overly_content h3, .category_articles_grid .overly_content h3 {
		font-size: 18px;
	}
	.top_articles_grid {
	    grid-template-columns: 2fr 3fr 1fr 5fr;
	    grid-template-rows: 30rem 15rem 15rem 30rem 30rem;
	    /*margin: 15px;*/
	}

	.top_articles_grid > *:nth-child(2) {
		grid-column-start: 1;
		grid-column-end: 3;
		grid-row-start: 2;
		grid-row-end: 4;
	}
	.top_articles_grid > *:nth-child(3) {
		grid-column-start: 3;
		grid-column-end: -1;
		grid-row-start: 2;
		grid-row-end: 4;
	}
	.top_articles_grid > *:nth-child(4) {
		grid-column-start: 1;
		grid-column-end: 4;
		grid-row-start: 4;
		grid-row-end: 5;
	}
	.top_articles_grid > *:nth-child(5) {
		grid-column-start: 4;
		grid-column-end: -1;
		grid-row-start: 4;
		grid-row-end: 5;
	}
	.top_articles_grid > *:nth-child(6) {
		grid-column-start: 1;
		grid-column-end: -1;
		grid-row-start: 5;
		grid-row-end: 6;
	}

}

@media (max-width: 480px) {
	.top_articles_grid {
    	grid-template-rows: repeat(6,240px) ;

	}
	.top_articles_grid > * {
		grid-column-start: 1 !important;
		grid-column-end: -1 !important;
		grid-row-start: auto !important;
		grid-row-end: auto !important;
	}
}