@media screen and (max-width: 640px) {
            
            body{
                width:100%;
                height:100%;
                    padding: 1rem;
                   
            }
            }
            
            @media screen and (min-width: 1040px) {
    .wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media screen and (min-width: 720px){
       .wrapper{
        grid-template-columns: repeat(2, 1fr);
       
       } 
   }
   @media screen and (min-width: 640px){
       .wrapper{
        grid-template-columns: repeat(1, 1fr);
        
       } 
   }

   :root {
    blue: #1e90ff;
    white: #ffffff;
    red: #ff0000;
    royalblue:#0000ff;
    orange:#ffa500;
    skyblue:#87ceeb;
    lightblue:#e3f5fc;
    black:#000000;
    navyblue:#1f5acf;;
}

.wrapper {
    display: grid;
    justify-content: center;
    grid-auto-rows: 300px;
    grid-gap: 16px;
    grid-template-columns: repeat(1, 1fr);
    height: 100%;
    margin: 0 68px;
   
}

@media screen and (min-width: 768px) {
    .wrapper {
      grid-gap: 16px;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

@media screen and (min-width: 1024px) {
  .wrapper {
    grid-gap: 32px;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }
}

.card2 {
    border: 2px solid var(royalblue);
    background: linear-gradient(to top, var blue 50%, varlightblue 50%);
    background-size: 100% 200%;
    transition: all .9s ease-out;
    font-size: 20px;
    border-radius: 10px;
    overflow-y: scroll;
    justify-content: center;
    box-shadow: 12px 12px 2px 1px rgba(198, 198, 201, 0.836);
}

.card3 {

    border: 2px solid var blue;
    background: linear-gradient(to top, var blue 50%), var lightblue 50%;
    background-size: 100% 200%;
    transition: all .9s ease-out;
    font-size: 20px;
    border-radius: 10px;
    overflow-y: scroll;
    justify-content: center;
    animation-name: reverse;
    animation-duration: 1s;
}

.card2:hover {
    color: var white;
    border-radius: 10px;
}

.card3:hover {
    color: var(white);
    border-radius: 10px;
}

h1 {
    font-size:25px;
    text-align: center;
    position: sticky;
    visibility: visible;
    padding-top: 100px;
}

.card3 h1 {
    text-align: center;
    position: sticky;
    visibility: visible;
    /*margin-top: 20px;*/
    padding-top: 100px;
}

.content2 {
    margin-top: 550px;
}

.content3 {
    margin-top: 550px;
}

.header3 {
    position: sticky;
    top: 0;
    word-wrap: break-word;
    /* padding: -80px 0px; */
    z-index: 1;
    height: 70px;
    color:blue;
}

.header2 {
    word-wrap: break-word;
    position: sticky;
    top: 0;
    /* padding: -80px 0px; */
    z-index: 1;
    height: 70px;
    color:blue;
}

.card2:hover .header2 {
    background: navy blue;
    color: white;
    border: 1px solid navyblue;

}

.card3:hover .header3 {
    background: navyblue;
    color: white;
    border: 1px solid navyblue;

}

/* .card2:hover{
            background-color: white;
        } */
.card2:hover h1 {
    transition: all 0.9s ease;
    transform: translate(0px, -100px);
    position: sticky;
    top: 0;
    font-size: 25px;
    text-align: center;
    bottom: 50px;
    color: white;

}

/* .card2:active h1{
            animation-fill-mode: forwards;
            animation-play-state: running;
        } */

.card3:hover h1 {
    transition: all 0.9s ease;
    transform: translate(0px, -100px);
    position: sticky;
    top: 0;
    text-align: center;
    bottom: 10px;
    color:white;
}

.card2:hover .content2 {
    display: block;
    word-wrap: break-word;
    transform: translate(0px, -100px);
    content: justify;
    margin-top: 100px;
    transition: all 0.9s ease;
    color: black;
    text-align: justify;
    margin-left: 16px;
    margin-right: 16px;

}

.card3:hover .content3 {
    display: block;
    word-wrap: break-word;
    transform: translate(0px, -100px);
    content: justify;
    margin-top: 100px;
    transition: all 0.9s ease;
    color: black;
    text-align: justify;
    margin-left: 16px;
    margin-right: 16px;
}