vmems-website/themes/vmems-theme/static/css/carousel.css

/* Carousel and grid css (the carousels and the feature grid, etc.)*/
.home-top-carousel{
	height:300px;
}
.home-top-carousel .item, .home-top-carousel .item>a{
	display:flex;
	background-color:var(--primary-color-3);
	color: var(--secondary-color);
	flex-direction:row;
	width:calc(100% - 40px); /* 260px */
	padding: 0px 20px;

}
.home-top-carousel .item .text{
	display:flex;
	flex-direction: column;
	flex:2 0;
	height:260px;/*100%*/

}
.home-top-carousel .item .text .title{
	min-height:10%;
	max-height:20%;
	vertical-align:middle;	
	text-align:center;
	font-size:120%;
}
.home-top-carousel .item .text .description {
	flex: 2 0;
	overflow:auto;
	max-height:90%;
	display:flex;
	flex-direction:column;
}
.home-top-carousel .item .img {
	vertical-align:center;
	line-height:280px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-content:center;
	height:280px;
	padding:10px 0px;

}
.home-top-carousel .item .img img {
	max-height:250px !important;
	max-width: calc(100vw /3);

}

/*Team carousel */
.employees-carousel{
margin:20px 0px;
height:500px;
}
.employees-carousel .item{
	display:flex;
	flex-direction:column;
	background-color:var(--secondary-color-darklight);
	border-radius:20px;
	margin: 0px 5px;
	height:500px;
}
.employees-carousel .item .text {
height:400px;
overflow:auto;
padding-bottom:5px;
}
.employees-carousel .item .text .title{}
.employees-carousel .item .text .description{}
.employees-carousel .item .img {
	padding-top:5px;
	justify-self:center;
	align-self:center;
}
.employees-carousel .item .img img{
	height:100px;
	border:2px solid var(--primary-color-darkest);
	border-radius:100%;
}

/* LAST NEWS CAROUSEL */
.last-news-carousel{
	position:relative;
	height:300px;
}
.last-news-carousel .item, .last-news-carousel .item>a{
	position:relative;
	display:flex;
	background-color:var(--primary-color-3);
	font-size:150%;
	-webkit-text-stroke: 1px var(--primary-color-darkest);
	-webkit-text-fill-color: var(--secondary-color);
	flex-direction:row;
	width:calc(100% - 40px); /* 260px */
	padding: 0px 20px;

}
.last-news-carousel .item .text{
	display:flex;
	z-index:2;
	flex-direction: column;
	justify-content:center;
	align-items:center;
	text-align:center;
	width:100%;
	height:260px;/*100%*/

}
.last-news-carousel .item .text .title{
	min-height:20%;
	max-height:20%;
	vertical-align:middle;	
	text-align:center;
	font-size:120%;
	overflow:auto;
	line-break:break-word;
	word-break:break-all;
}
.last-news-carousel .item .text .description {
	overflow:auto;
	max-height:80%;
	display:flex;
	flex-direction:column;
}
@media (max-width:700px){
	.last-news-carousel .item .text .description {
		display:none;
	}
	.last-news-carousel .item .text .title{
		color: red;
		height:250px;
		max-height:250px;
		line-break:unset;
		word-break:unset;
		overflow:auto;
	}
}
.last-news-carousel .item .img {
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%, -50%);
	z-index:1;
	height:100%;
	max-width:80vw!important;
	overflow:hidden;
}
.last-news-carousel .item .img img {
	height:100%;
	z-index:3;
	max-width:80vw!important;
}


.features{ /*not a carousel but a grid */
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
	justify-content:space-around;
	width:calc(100% - 20px);
	padding:10px;
}
.features .item, .features .item>a{
	display:flex;
	flex-direction:column;
	width: 300px;
	height: 250px;
	color: var(--primary-color);
}
.features .item .icon {
	align-self:center;
	display:flex;
	align-items:center;
	justify-content:center;
	height: 90px;
	width:90px;
	align-self:center;
	border-radius:100%;
	border: var(--primary-color) solid 5px;
}
.features .item .text .title{
	text-align:center;
}
.features .item .text .description {
	text-align:center;
}

.last-articles-grid-3{ /*not a carousel but a grid */
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
	justify-content:space-around;
	width:calc(100% - 20px);
	padding:10px;
}
.last-articles-grid-3 .item, .last-articles-grid-3 .item>a{
	display:flex;
	flex-direction:column;
	width: 300px;
	height: 250px;
	color: var(--primary-color);
}
.last-articles-grid-3 .item .baneer {
	align-self:center;
	display:flex;
	align-items:center;
	justify-content:center;
	height: 90px;
	width:90px;
	align-self:center;
	border-radius:100%;
	border: var(--primary-color) solid 5px;
	overflow:hidden;
}
.last-articles-grid-3 .item .baneer img{
	max-height:90px!important;
}
.last-articles-grid-3 .item .text .title{
	text-align:center;
}
.last-articles-grid-3 .item .text .description {
	text-align:center;
}