Template:Card/style.css

.card{
	transition:0.2s ease-in;
	display:flex;
	border-radius: 0 0 4px 4px;
} 

.panel:not(.withTitle) > .content > .card:last-child{
	border-radius: 4px;
}

:not(.panel) > .card.horizontal {
    border-radius: 4px;
}

.card:hover {
	box-shadow:0px 0px 7px 0px rgba(0,0,0,.6);
	z-index:99;
	position:relative;
}

.card:hover .cardImg img{
	transform: scale(1.04);
	outline:none;
	opacity:1.0;
}

.card:hover .secondaryCard a{
	text-decoration:none;
	color:#282828;
}

html.skin-citizen-dark .card:hover .secondaryCard a, body.wgl-darkmode .card:hover .secondaryCard a{
	color: #d6d6d6;
}

.card.vertical{
	flex-direction:column;
	height:100%;
}

.card.horizontal{
	flex-direction:row;
}

@media (max-width:1000px) {
	.card.horizontal{
		flex-direction:column;
	}
}

@media (max-width:1000px) {
	.cardImg{
		height:auto;
	}
}

.card.horizontal .mainCard{
	flex:1;
	height:auto;
	max-height:none;
	border-bottom-left-radius: 4px;
}

.card.horizontal .secondaryCard{
	flex:2;
}

.card.vertical .mainCard{
	border-radius: 4px 4px 0 0;
}

.card.vertical .secondaryCard{
	border-radius: 0 0 4px 4px;
}

.cardImg {
	display:flex;
	align-items: center;
	background:#282828;
	overflow:hidden;
	padding:0;
	max-height: 12em;
	height:100%;
}

.cardImg a{
	width:100%;
}

.cardImg img{
	width: 100%;
	height: auto;
	transition: 0.4s ease-out;
	opacity:0.85;
}

.secondaryCard {
	width:auto;
}

.secondaryCard a{
	display:flex;
	padding:7px;
}

.secondaryCard .byline {
	font-size:.9em;
	color:#4171A0;
}

.secondaryCard h2 {
	margin-top:0;
}

.captionCard{
	padding: 0 7px;
	background: transparent;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 0 0 4px 4px;
}