.image{
  width: 100%;
  height: 100%;
 transition: all 0.3s ease-in-out;
   z-index: 20;


  
}
.card-wrapper{
  position: relative;
      width: 30%;
    height: auto;

  overflow: hidden;
  transition: all 0.3s ease-in-out;
     .text{
        position:absolute;
        z-index: 1;
        bottom:0;
        padding: 5%;
        width: 100%;
        
    }
        .coleccion {
    font-size: 10rem;
    color: white !important;
}
  &:hover{

    .image{
       
       transform: scale(1.5);
       overflow: hidden;
      transition: all 0.3s linear; 
    }

 
    .card-bottom{
      opacity: 1;
      transition: all 0.8s ease;
       
    }

  }

}

.card-top{
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.card-bottom{
  width: 100%;
  position: absolute;
  z-index: 20;
 
  top: 0px;
  background-color:rgba(110, 122, 92, 0);
  color: #ffffff;
  opacity:0;


}

.top-text{
font-size: 25px;
line-height: 40px;
  font-weight: bold;
  letter-spacing: 1px
}

.bottom-text{
 font-size: 15px;
 
}


.button{
  position: relative;
  display: block;
  outline: none;
  cursor: pointer;
  margin-top: 25px;
  border: none;
  border-radius: 3px;
  background-color: #f8961e;
  color: #ffffff;
  padding: 5px 20px
}