article{
            width: 98%;
            margin: auto;
            display: flex;
            flex-wrap: wrap;
        }
        .card-body{
            border: solid 2px black;
            background-color: blanchedalmond;
            border-radius: 10px;
            width: 220px;
            height: 400px;

            margin: 10px  auto;
           
            box-shadow: 2px 2px 2px black;
        }
        .card-section{
            width: 98%;
            margin: auto;
          
           
        }
        .card-header{
            width: 150px;
            margin: 10px auto;
        }
        .card-header img{
            width: 100%;
        }
        .card-main{
            margin: 10px auto;

            font-size: 120%;
            text-align: center;
        }
        .card-article{
            margin: 10px auto;

            text-align: center;

        }
        .card-footer{
            margin: 10px auto;

            text-align: center;

        }
        .card-footer a{
        background-color: rgb(217, 247, 137);
        border-radius: 4px;
        color: black;
        text-decoration: none;
        padding: 4px 15px;
        box-shadow: 2px 2px 2px black;
        transition: 500ms;
        }
        .card-footer a:hover{
            padding: 6px 20px;
        }

          footer{
            text-align: center;
            font-size: 14px;
            width: 80%;
            margin: auto;
          }

                        /*-----------------400----------------------------------*/
                        @media (min-width: 400px) {
                            .card-body{
                             width: 190px;
            
                    }
                        
                    }
            
                 /*-----------------450----------------------------------*/
                 @media (min-width: 450px) {
                    .card-body{
                     width: 210px;
    
            }
                
            }
            
                 /*-----------------500----------------------------------*/
                 @media (min-width: 500px) {
                    .card-body{
                     width: 230px;
    
            }
                
            }
            
            
            
               
                        /*-----------------900----------------------------------*/
                        @media (min-width: 900px) {
                          
                           article{
                            width: 90%;
                           }
                  
            
                    }