.three-card-container{
  display:flex;
  flex-wrap:wrap;
}

.three-obj-card {
  position: relative;
  height: auto; /* Set your desired height */
  overflow: hidden;
  flex: 0 0 33.33%;
  
}

.three-obj-card-img {
  position: relative;
  
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.three-obj-bg-img {
  width: 100%;
  height: 100%;
  aspect-ratio: 0.644/1;
  object-fit: cover; /* Ensure the image covers the entire card */
  display:block;
}

.three-obj-overlay {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent gray overlay */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  transform: translateY(-180%); /* Initially move the overlay up */
  transition: transform 0.3s ease;
}

.three-obj-card:hover .three-obj-overlay {
  transform: translateY(-100%); /* Center the overlay on hover */
}

.three-obj-title {
  position:absolute;
  color: #fff;
  bottom:-1em;
  padding:1em;
}

.three-obj-description {
  position:absolute;
  color: #fff;
  bottom:10em;
}

.three-obj-card:hover .three-obj-title {
  bottom:15em;
  /*transform: translateY(500%); /* Center title on hover */
}

.three-obj-card:hover .three-obj-description {
  /*transform: translateY(700%); /* Center description on hover */
  bottom:-8em;
}

@media (max-width: 770px) {
  .three-obj-card {
    flex:0 0 100%;
  }
  
  .three-obj-overlay {
  transform: translateY(-100%); /* Center the overlay on hover */
}
  
  .three-obj-title {
  bottom:15em;
  color:ffd50b;
  /*transform: translateY(500%); /* Center title on hover */
}
  .three-obj-description {
  /*transform: translateY(700%); /* Center description on hover */
  bottom:-8em;
}
  
  
}

@media (min-width:770px) and (max-width: 950px){
  
  .three-obj-title {
  bottom:-2em;
}
    .three-obj-card:hover .three-obj-title {
  bottom:12em;
  /*transform: translateY(500%); /* Center title on hover */
}
}