.wrapper
{
	position: relative;
	min-width: 100%;
	margin: 0;
}
.wrapper .carousel
{
	position: relative;
	margin: 0;
	padding: 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc(100% / 5);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: 0px;
}

.carousel::-webkit-scrollbar
{
	display: none;
}

.carousel.dragging
{
	cursor: grab;
	scroll-snap-type: none;
	scroll-behavior: auto;
}

.HomeNewJustifier
{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 75%;
	min-height: 400px;
	height: 100%;
	color: white;
}

.HomeNewCategory
{
	font-size: 0.8rem;
	color: white;
	background-color: red;
	padding: 0.2rem 0.5rem 0.2rem 0.5rem;
	margin: 0;
	text-decoration: none;

	transition-duration: 0.1s;
	transition-property: color, background-color;
	transition-timing-function: ease-in;
}

.HomeNewCategory:hover
{
	color: black;
	background-color: white;
}

.HomeNewJustifier h3
{
	margin: 0.5rem 0 0 0;
} 

.HomeNewJustifier div
{
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 1rem;
}

.HomeNewJustifier i
{
	margin-right: 0.5rem;
	font-size: 0.6rem;
}

.HomeNewJustifier div p
{
	margin: 0;
	font-size: 0.6rem;
}

.HomeNewDescription
{
	margin-bottom: 1.5rem;
	font-size: 0.8rem;
	color: rgb(230, 230, 230);
	text-align: justify;
}

.HomeNewButton
{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	font-size: 0.8rem;
	font-weight: 600;
	width: 100px;
	height: 25px;
	background-color: rgba(0, 0, 0, 0.5);
	border-style: solid;
	border-width: 2px;
	border-color: red;
	padding: 0.1rem 0.25rem;
	color: red;
	border-radius: 0.5rem;
	margin-bottom: 15px;

	transition-duration: 0.1s;
	transition-property: color, background-color, border-color;
	transition-timing-function: ease-in;
}

.HomeNewButton:hover
{
	color: black;
	background-color: white;
	border-color: white;
}

.HomeNewSelector
{
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
	height: 3.5rem;
	background-color: rgb(40, 40, 40);
	line-height: 3rem;
	align-items: center;
	box-shadow: inset 0px 0px 15px rgba(0,0,0,0.5);
}

.HomeNewSelector a
{
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	font-size: 0.8rem;
	font-weight: 600;
	border: 2px solid rgb(120, 120, 120);
	color: rgb(120, 120, 120);;
	width: 6rem;
	height: 1.8rem;
	margin: 0 1.5rem;
	background-color: rgba(20, 20, 20, 0.5);
	border-radius: 0.5rem;
	cursor: pointer;

	/* Prevent text selection while dragging */
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;

	transition-duration: 0.1s;
	transition-property: color, background-color, border-color;
	transition-timing-function: ease-in;
}

.HomeNewSelector a:hover
{
	color: black;
	background-color: white;
	border-color: white;
}

@media (hover: hover)
{
	.HomeNew
	{
		scroll-snap-align: start;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		height: calc(100% + 3.5rem);
		min-height: 400px;
		margin: 0;
		background-position: center;
		background-size: auto 100%;

		/* Prevent text selection while dragging */
		-webkit-user-select: none;
		-ms-user-select: none;
		user-select: none;

		transition-duration: 0.2s;
		transition-property: background-size, height;
		transition-timing-function: ease-in;
	}

	.HomeNew:hover
	{
		background-size: auto 130%;
		height: 100%;
	}

	.HomeNew::before
	{
		content: '';
		background-color: black;
		width: 100%;
		height: 100%;
		position: absolute;
		opacity: 30%;

		transition-duration: 0.2s;
		transition-property: opacity;
		transition-timing-function: ease-in;
	}

	.HomeNew:hover::before
	{
		opacity: 70%;
	}
}

@media (hover: none)
{
	.HomeNew
	{
		scroll-snap-align: start;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100%;
		min-height: 400px;
		margin: 0;
		background-position: center;
		background-size: auto 130%;

		/* Prevent text selection while dragging */
		-webkit-user-select: none;
		-ms-user-select: none;
		user-select: none;

		transition-duration: 0.2s;
		transition-property: background-size, height;
		transition-timing-function: ease-in;
	}

	.HomeNew::before
	{
		content: '';
		background-color: black;
		width: 100%;
		height: 100%;
		position: absolute;
		opacity: 70%;

		transition-duration: 0.2s;
		transition-property: opacity;
		transition-timing-function: ease-in;
	}
}

@media screen and (max-width: 1460px)
{
	/* 4 news to see at the same time */
	.wrapper .carousel
	{
	    grid-auto-columns: calc(100% / 4);
	}
}

@media screen and (max-width: 1160px)
{
	/* 3 news to see at the same time */
	.wrapper .carousel
	{
	    grid-auto-columns: calc(100% / 3);
	}
}

@media screen and (max-width: 875px)
{
	/* 2 news to see at the same time */
	.wrapper .carousel
	{
	    grid-auto-columns: 50%;
	}
}

@media screen and (max-width: 590px)
{
	/* 1 news to see at the same time */
	.wrapper .carousel
	{
	    grid-auto-columns: 100%;
	}
}