.cardsContainer
{
	display: block;
	max-width: 1200px;
	width: 100%;
    margin: auto;
}

.cardsContainer .sliderContainer
{
	grid-template-rows: repeat(3, calc(285px));
    grid-row-gap: 0em;
}

.cardsCenteredContainer
{
	display: block;
	
	position: relative;
	overflow: hidden;
	width: 100%;

	margin: auto;	
}


.cardsContainer
{
	position: relative;
	text-align: left;
	display: block;
}

.cardsCardContainer
{
	border-radius: 15px;	
	cursor: pointer;
}

.cardsCenteredContainer
{
	margin: auto;
}

.cardsCardContainer .cardName
{
	position: absolute;
	top: 0.5em;
	left: 50%;
	transform: translateX(-50%);
	
	width: 100%;
	margin: 0em;
	padding: 0em;
	
	font-size: 1.8em;
	text-align: center;
	text-shadow: 1px 1px 4px rgb(0 0 0 / 75%);
	color: white;
}

.cardImageContainer
{	
	height: 15em;
	position: relative;
}

.cardImageContainer:before
{	
	content: '';
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background: linear-gradient(130deg, rgba(21, 47, 90, 0.25) 0%, rgba(21, 47, 90, 0) 80%);
}


.cardImageContainer .cardImage
{
	object-fit: cover;
	object-position: center;
    height: 100% !important;
    width: 100%;
	border-radius: 15px;
}

.cardsCardContainer
{
	position: relative;
	display: inline-block;
	width: 360px;
	vertical-align: top;
}

.cardsCardContainer .cardDescriptionsContainer
{
	position: relative;
	top: -2em;
	
	display: flex;
    flex-direction: row;
	align-items: center;
	padding: 5px;
    background: #152f5a;
    border-radius: 15px;
	overflow: hidden;
	
	font-size: 0.8em;
}

.cardsCardContainer .cardDescriptionContainer h6
{
	font-size: 1em;
	text-align: center;
	text-transform: capitalize;
	color: white;
	
    margin: 1em;
}

@media (min-width: 1280px)
{
	.cardsCenteredContainer
	{
		width: 1190px;
	}
}

@media (min-width: 820px) and (max-width: 1200px)
{
	.cardsCenteredContainer
	{
		width: 820px;
	}
}

@media (min-width: 300px) and (max-width: 800px)
{
	.cardsCardContainer
	{
		width: 40vw;
	}
}

@media (max-width: 600px)
{
	.cardsCardContainer
	{
		width: 80vw;
	}
}

@media (max-width: 700px)
{
	.cardsCardContainer .cardName
	{
		font-size: 1.5em;
	}
}

@media (max-width: 600px)
{
	.cardsContainer .sliderContainer
	{
		grid-template-rows: repeat(3, 275px);
		grid-row-gap: 1em;
	}

	.cardImageContainer
	{
		display: inline-block;
		width: 100%;
		height: 15em;
		overflow: visible;
	}
}