.tile-container {
    position: relative;
    width: 100%;
    height: 300px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
  }

  .tile-front,
  .tile-back {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease;
    backface-visibility: hidden;
    font-family: Arial, sans-serif;
    font-size: 1.2rem;
    border-radius: 12px;
  }

  .tile-front {
    background-repeat: no-repeat;    
    background-position: center;    
    background-size: cover;    
    align-items: end;
    padding-bottom: 0px;
  }

  .tile-back {
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5); /* Dark overlay with 50% opacity */
    color: white;
    opacity: 0; /* Hidden by default */
    flex-direction: column;
  }

  .tile-container:hover .tile-back {
    opacity: 1; /* Show the back overlay on hover */
  }

  .tile-text-bg {
    background-color: #00000090;
    color: white;
    width: 100%;
    text-align: center;
    padding: 0px 20px;
}

.tile-effect {
    bottom:20px; 
    right:20px;
    background-color:#00000060;
}
/*
.tile-container {
    perspective: 1000px;
    width: 100%;
}

.tile {
    width: 100%;
    height: 300px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.1s;
}
.tile.flipped {
    transform: rotateY(180deg);
  }

.tile:hover {
    transform: rotateY(180deg);
}

.tile-side {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    justify-content: center;

    font-family: Arial, sans-serif;
    font-size: 1.2rem;
}

.tile-front {    
    background-repeat: no-repeat;    
    background-position: center;    
    background-size: cover;    
    align-items: end;
    padding-bottom: 0px;
}


.tile-back {
    background-color: #333;
    color: white;
    transform: rotateY(180deg);
    padding: 20px;
    text-align: center;
    align-items: center;
    flex-direction: column;
}

.tile-text-bg {
    background-color: #00000090;
    color: white;
    width: 100%;
    text-align: center;
    padding: 0px 20px;
}
*/