.llqd-products{
  padding: 40px 0;
}
.lliquida-flip-card {
  background-color: transparent;
/*  width: 300px;
  height: auto;*/
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.lliquida-flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
/*.lliquida-flip-card:hover .lliquida-flip-card-inner {
  transform: rotateY(180deg);
}*/

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

/* Position the front and back side */
.lliquida-flip-card .lliquida-flip-card-front {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  cursor: pointer;
}
.lliquida-flip-card .lliquida-flip-card-back {
  position: absolute !important;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.lliquida-flip-card .lliquida-flip-card-front {
  background-color: #bbb;
  backface-visibility: hidden;
  overflow:hidden;
  border-radius: 6px;
    
}
/*
.lliquida-flip-card .lliquida-flip-card-front img{
  border-radius: 6px;
}
*/
/* Style the back side */
.lliquida-flip-card .lliquida-flip-card-back {
  background-color: var( --wp--preset--color--dark );
  color: white;
  transform: rotateY(180deg);
  padding: 2rem 0;
  height: 100%;
  border-radius: 6px;
} 
.lliquida-flip-card .lliquida-flip-card-back-inner {
  overflow-y: auto;
  height: 100%;
  padding: 0 1.6rem;

}
.lliquida-flip-card .lliquida-flip-card-back-inner > div{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.lliquida-flip-card .lliquida-card-title{
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(100% - 36px);
  padding: 10px;
  margin: 0;
  text-transform: uppercase;
  color: var( --wp--preset--color--light );
}
.gradient-bottom-dark{
  color: #ffffff;
}
/*.gradient-bottom-dark > .wp-block-image::after,*/
.lliquida-flip-card .wp-block-post-featured-image::after{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-color: var( --wp--preset--color--dark );
  background: var( --wp--preset--color--dark );
  background: linear-gradient(0deg, var( --wp--preset--color--dark ) 3rem, rgba(0, 0, 0, 0) 12rem);
  border-radius: 6px;
}
.gradient-bottom-dark .text-block{
  position: absolute !important;
  bottom: 0;
  width: 100%;
  max-height: 100%;
  overflow: hidden;
  background: linear-gradient(0deg, var( --wp--preset--color--dark ) 50%, rgba(0, 0, 0, 0) 100%);
  border-radius: 6px;
  color: #fff;
}

.lliquida-flip-card .lliquida-open-card, .lliquida-flip-card .lliquida-close-card{
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 0;
  cursor: pointer;
  color: var( --wp--preset--color--primary );
  display: block;
}

/* The animation code */
@keyframes fadeIn {
  from {opacity: 0}
  to {opacity: 1}
}

.lliquida-flip-card{
  opacity: 0;
  animation: fadeIn .4s linear 0s forwards;
}

.parent-link > a::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
}