:root {
  --card-height: 250px; /* Decrease the height */
  --card-width: calc(var(--card-height) * 1.1); /* Adjust width based on new height */
}

* {
  box-sizing: border-box;
}

.card-container {
  display: flex; /* Make the container a flex container */
  justify-content: center; /* Center the cards horizontally */
}
.card-columns {
  display: grid; /* Use grid layout instead of columns */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Set the columns to adjust automatically based on the available space */
  gap: 20px; /* Adjust the gap between columns */
}

.column {
  width: 100%;
  margin-bottom: 20px; /* Adjust the gap between rows */
}

.card-card {
  width: 100%;
  height: var(--card-height); /* Set the height of each card */
  position: relative;
  display: flex;
  flex-direction: column-reverse; /* Make content stack vertically in reverse order */
  align-items: center; /* Center content horizontally */
  padding: 20px; /* Adjust padding */
  perspective: 2500px;
  margin: 0 10px; /* Adjust margin between the cards */
}

.cover-image {
  max-width: 100%; /* Ensure image fits within card */
  max-height: 70%; /* Limit image height to avoid overlapping */
  object-fit: contain; /* Maintain aspect ratio */
}

.wrapper {
  transition: all 0.5s;
  position: absolute;
  width: 100%;
  z-index: -1;
}

.card-card:hover .wrapper {
  transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
  box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
}

.wrapper::before,
.wrapper::after {
  content: "";
  opacity: 0;
  width: 100%;
  height: 60px; /* Adjust height */
  transition: all 0.5s;
  position: absolute;
  left: 0;
}
.wrapper::before {
  top: 0;
  height: 100%;
}

.card-card:hover .wrapper::before,
.wrapper::after {
  opacity: 1;
}

.card-card:hover .wrapper::after {
  height: 80px; /* Adjust height */
}
.title {
  position: relative; /* Ensure the positioning context */
  top: 10px; /* Adjust the value to move the text down */
  width: 100%;
  transition: transform 0.5s;
  font-size: 16px; /* Adjust font size */
  font-weight: bold;
  color: #000000; /* Your desired text color */
  text-align: center; /* Center the text horizontally */

  /* Add any other styling properties you need */
}
.card-card:hover .title {
  transform: translate3d(0%, -30px, 100px);
}

.character {
  width: 100%;
  opacity: 1; /* Set opacity to 1 to make the character image always visible */
  transition: all 0.5s;
  position: relative;
  z-index: -1;
  bottom: 0;
  left: 0;
}

.card-card:hover .character {
  opacity: 1;
  transform: translate3d(0%, -30%, 100px);
}

@media screen and (max-width: 768px) {
  .card-columns {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .card-card {
    height: auto;
    max-width: 100%;
  }
}