*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

.page-content{
    padding-top: 45px;
        background-image: url('/images/stories-bckg.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        min-height: 100vh; 
        padding: 20px;     
      }


.container{
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
}

.card{
    height: 540px;
    width: 180px;
    margin: 0 15px;
    background-size: cover;
    text-align: center;
    overflow: hidden;
    border-radius: 10px;
    transition: all 300ms ease;

    filter: grayscale(100%);
    transition: filter 1.5s ease;

}

.card:hover{
    width: 400px;
    filter: grayscale(0%)
}

.heading{
    color: white;
    position: relative;
    top: 80%;
    transform: rotate(90deg);
    font-size: 40px;
    transition: all 500ms ease;
}

.card:hover .heading{
    transform: rotate(0deg);
}

.info{
    color: white;
    position:relative;
    top:100%;
    font: size 15px;
    transition: all 300ms ease;
    margin-top: -20px;
}

.card:hover .info{
    top: 82%;
}

.heading a {
    color: white;
    font-size: 35px;
    text-decoration: none;
    margin-top: -80px;
    position: relative;
    display: inline-block;
    transition: color 0.3s ease;
    font-family: "jeanne-moderno", serif;
}
  
  .heading a::before {
    content: '';
    position: absolute;
    bottom: 25px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #ce6ea7;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
  }
  
  .heading a:hover {
    color: #fff; 
  }
  
  .heading a:hover::before {
    transform: scaleX(1);
  }