/* BEGIN ITEM-LISTING CSS ---------------------------------------> */


#newsroomSpotlight ul,
#newsroomSpotlight li 
{
	margin: 0;
	list-style: none;
}

#newsroomSpotlight li
{
	position: relative;
	background: #000000;
}

#newsroomSpotlight ul
{
	display: grid;
	grid-gap: 33px;
}

#newsroomSpotlight a:not(.sp_pencil)
{
	display: flex;
	align-items: flex-end;
	/*position: relative;*/
	min-height: 350px;
}

#newsroomSpotlight a:not(.sp_pencil)::before 
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;;
	z-index: 1;
	content: '';
	display: block;
	background: linear-gradient(to top, rgba(0,0,0, .8) 0%, rgba(0,0,0, 0) 80%);
}

#newsroomSpotlight .sp_pencil
{
	position: absolute;
	z-index: 20;
	top: 10px;
	left: 10px;
}

#newsroomSpotlight .image img 
{
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#newsroomSpotlight .content 
{
	position: relative;
	z-index: 2;
	padding: 20px;
	color: #ffffff;
	font-size: 18px;
}

#newsroomSpotlight .title 
{
	margin: 0 0 4px;
	--max-font-size: 20;
	font-weight: 400;
	color: #FFFFFF;
}

#newsroomSpotlight a:hover::before,
#newsroomSpotlight a:focus::before
{
	background: linear-gradient(to top, rgba(0,0,0, 1) 0%, rgba(0,0,0, .4) 80%);
}

#newsroomSpotlight a:hover .datetype,
#newsroomSpotlight a:focus .datetype
{
	color: #BACCDC;
}


#columnedNews
{
	padding-top: 0;
	padding-left: 0;
	padding-right: 0;
	margin-top: 85px;
}

/* Per swati, completely hide on mobile */
#newsroomSpotlight .abstract
{
	display: none;
}

@media (min-width: 768px)
{
	
	#newsroomSpotlight ul
	{
		grid-template-columns: 1fr 1fr 1fr;
	}

	#columnedNews::before
	{
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 259px), 0 calc(100% - 420px), 0 0);
	}
}

@media (min-width: 1280px)
{
	#newsroomSpotlight .content 
	{
		padding: 31px;
	}

	#newsroomSpotlight a:hover .abstract,
	#newsroomSpotlight a:focus .abstract
	{
		display: block;
	}

	#newsroomSpotlight a:hover .datetype,
	#newsroomSpotlight a:focus .datetype,
	#newsroomSpotlight a:hover .title,
	#newsroomSpotlight a:focus .title
	{
		display: none;
	}
}

@media (min-width: 1350px)
{
	#newsroomSearch form > div 
	{
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}

	
	#newsroomSpotlight
	{
		margin-top: 76px !important;
	}
}


/* END ITEM-LISTING CSS -----------------------------------------> */