.card {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Inner wrapper for structure */
.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Front side (default view) */
.card-front {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Back side (hidden by default, fades in on hover) */
.card-back {
  position: absolute;  
  top: 0; 
  bottom: 0; 
  left: 0; 
  right: 0;
  height: 100%;
  width: 100%; 
  inset: 0;
  background: #ffffff;
  opacity: 0;
  z-index: 2;
  transition: opacity 0.5s ease;
  pointer-events: none; /* Prevent blocking front until visible */
}

/* Fade in the back side on hover (desktop only) */
.card:hover .card-back {
  opacity: 1;
  pointer-events: auto;
}

.card-text {  
  font-size: 13px !important;
  padding: 20px;
}

/* Transparent overlay for touch (main link) */
.card-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  background: transparent;
}

/* Desktop: hide overlay so inner links are clickable */
@media (hover: hover) and (pointer: fine) {
  .card-overlay {
    display: none;
  }
}

/* Touch devices: disable fade and hide backside */
@media (hover: none) and (pointer: coarse) {
  .card-back {
    display: none;
  }
}

/* Desktop: adapt font-size and padding to flexBox space*/
@media (max-width: 1000px) {  
  .card-text {  
    font-size: 11px !important;
    padding: 15px;
  }
}
@media (max-width: 850px) {
  .card-text {  
    font-size: 13px !important;
    padding: 15px;
  }
}
@media (max-width: 650px) {  
  .card-text {  
    font-size: 11px !important;
    padding: 15px;
  }
}
@media (max-width: 400px) {
 .card-text {  
    font-size: 13px !important;
    padding: 20px;
  }
}