*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 body,html{
    overflow-x: hidden;
    overflow-y: auto;
} 
.page{
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 25px;
    background-color: black;
    perspective: 1000px;
    
    
}
.page>.card1{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 220px;
    height: 290px;
    background-color: rgb(166, 13, 204);
    border-radius: 10px;
     grid-area: 2/2/-2/-4;
     
}
.page>.card1:hover{
transform: scale(1.2);
transition: 1s;
}
.page>.card1>img{
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 20px;
    width: 200px;
    height:300px;
    border-radius: 10px;
    object-fit: cover;
   
}
.page>.card1>h2{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -100px;
    color: rgb(44, 11, 228);

}
.page>.card1>p{
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(14, 75, 75);
    margin-left: 20px;
    padding: 20px;
}

.page>.card2{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 220px;
    height: 290px;
    border: 0px;
    border-radius: 10px;
    margin-top: 0px;
    
     grid-area: 2/3/-2/-3;
     box-shadow:  5px 5px 10px rgba(236, 11, 150, 0.959),       
    -5px -5px 10px rgb(145, 255, 0),     
    5px -5px 10px rgb(231, 235, 14),     
    -5px 5px 10px;
      transform-style: preserve-3d;
      transform: rotateY(30deg);
  
   
   
     
}
.page>.card2:hover{
 transform:  rotateY(180deg);
transition: 1s;
}


.page>.card2>img{
   
    display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 0px;
    width: 220px;
    height: 296px;
    border-radius: 10px;
      object-fit: cover;
}
   
.page>.card3{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 220px;
    height: 290px;
    background-color: rgb(97, 243, 187);
    border-radius: 10px;
    grid-area:2/4/-2/-2 ;
}
.page>.card3:hover{
transform: scale(1.2);
transition: 1s;
}

.page>.card3>img{
    width: 200px;
    height:266px;
    border-radius: 10px; 
    margin-top: -20px; 
      object-fit: cover; 
}
.page>.card3>h2{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -100px;
    color: rgb(5, 3, 24);

}
.page>.card3>h2:hover{
    color: rgb(255, 0, 106);
    animation: topbottom 2s linear alternate ;
    
} 
@keyframes topbottom{
    0%{
        transform: scale(.5) rotate(180deg);
    }


}
@media(max-width:769px){
    .page{
    width: 100vw;
    height: 250vh;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 25px;
    background-color: black;
    perspective: 1000px;
    
    
}
.page>.card1{
    grid-area:1/3/-3/-3 ;
    margin-top: 40px;
}
.page>.card2{
    margin-top: 20px;
}
.page>.card3{
    grid-area: 3/3/-1/-3;
    margin-top: 20px;
}

}

   @media (max-width: 426px) {
    .page {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        
        
    }
    .page>.card1,.card2,.card3{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 1px 0px 8px 1px;
        margin-top: -300px;
        
    }
    .page>.card3>h2{
        font-size: 20px;
    }
    .page>.card1>p{
        font-size: 12px;
        font-weight: bolder;
    }
    .page>.card1>img{
        margin-top: -px;
    }
     
}