:root {
	/* Card */
   --flipcard-radius-primary: 20px; 
   --flipcard-background: black;
   --flipcard-width: 600px; 
   --flipcard-height: 250px; 
   --flipcard-content-padding: 15px; 
}

.flip-card {
	background-color: transparent;
	width: 300px;
	height: 300px;
	perspective: 1000px;
}

.flip-card img{
	object-fit: cover; /* keep aspect ratio but clip image */
	border-radius: var(--flipcard-radius-primary) var(--flipcard-radius-primary) 0px 0px; /*top-left, top-right, bottom-right, bottom-left */
	height:40%;
	width:300px;
}

.flip-card h1{
	margin: 0px;
	font-size: 24px;
	color: white;
	background-color: black;
	word-wrap: break-word;
	overflow: hidden;
	max-height: 3.2em; /* (Number of lines you want visible) * (line-height) */
	line-height: 1.3em;
}

.flip-card-date{
  font-weight: bold;
  display: block;
  color: white;
  margin-bottom: 10px;
}

.flip-card-reference {
  font-size: 18px;
}


.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  border-radius: var(--flipcard-radius-primary);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

}

.flip-card-front {
  background-color: var(--flipcard-background);
  color: white;
  border-radius: var(--flipcard-radius-primary);
}

.flip-card-back {
  background-color: var(--flipcard-background);
  color: white;
  transform: rotateY(180deg);
  border-radius: var(--flipcard-radius-primary);
}