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; }

.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; }

.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; padding:7px; }

.secondaryCard a{	color:#1A5793; }

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

.secondaryCard h2 { margin-top:0; }