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

/* 
     ############################
         Google Font import 
     ###########################
*/

@import url(https://fonts.googleapis.com/css?family=Figtree:300,regular,500,600,700,800,900,300italic,italic,500italic,600italic,700italic,800italic,900italic);



body {
        font-family: "Figtree" sans-serif;
        background: #F4D04E;
}


/* 
   # Containers #
*/

.container {
     display: flex;
     flex-flow: row  wrap;
     justify-content: center;
     margin-bottom: 15%;
    
}

/* Blog Card */

.blog-card {

    display: flex;
    width: 384px;
    height: 522px;
    flex-direction: column;
    margin: 15% 0 0 0;
    padding: 24px;
    border-radius: 20px;
    align-items: flex-start;
    gap: 24px;
    background: #ffff;
}
/* Info Sec */
.card-info h3 {
    font-family: "Figtree" sans-serif;
    font-size: 14px;
    font-weight: 900px;
    width: 82px;
    height: 29px;
    padding: 5px 10px 5px 10px;
    margin-bottom: 12px;
    border-radius: 4px;
    background: #F4D04E;
}

.card-info .published-date {
    font-family: "Figtree" sans-serif;
    font-size: 14px;
    font-weight: 600px;
    margin-bottom: 12px;
 
}
.card-info .h2-info {
    font-family: "Figtree" sans-serif;
    font-size: 16px;
    line-height: 150%;
    color: hsl(0, 0%, 42%);
    margin-bottom: 12px;
 
}

.card-info h2 {
    font-family: "Figtree" sans-serif;
    font-size: 24px;
    font-weight: 900px;
    margin-bottom: 12px;
    line-height: 150%;
    letter-spacing: 0px;
    cursor: pointer;

}
.card-info h2:active {
    color: #F4D04E;

}


/* Blog author */
.blog-author-info {
    width: 129px;
   
}
.blog-author-info .author-img  {
    float: left;
    width: 32px;
    height: 32px;
    margin-right: 5.5px;
   
}
.blog-author-info h3  {
    font-size: 14px;
    padding: 10px;
   
}



@media (max-width: 480px) {
    .container {
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
            margin-bottom: 15%;
    
        }

    .blog-card {
    
            display: flex;
            width: 300px;
            height: 501px;
            flex-direction: column;
            margin: 15% 0 0 0;
            padding: 24px;
            align-items: flex-start;
            gap: 24px;
            background: #ffff;
        }


     /* Info section */
    .card-info h3 {
                     font-family: "Figtree" sans-serif;
                     font-size: 14px;
                     font-weight: 900px;
                     width: 82px;
                     height: 29px;
                     padding: 5px 10px 5px 10px;
                     margin-bottom: 12px;
                     border-radius: 4px;
                     background: #F4D04E;
                 }
        
    .card-info .published-date {
                     font-family: "Figtree" sans-serif;
                     font-size: 14px;
                     font-weight: 600px;
                     margin-bottom: 12px;
        
                 }
        
    .card-info .h2-info {
                     font-family: "Figtree" sans-serif;
                     font-size: 16px;
                     line-height: none;
                     font-weight: lighter;
                     margin-bottom: 12px;
        
                 }
        
                 .card-info h2 {
                     font-family: "Figtree" sans-serif;
                     font-size: 20px;
                     font-weight: 900px;
                     margin-bottom: 12px;
                     line-height: none;
                   
        
                 }
        
        
                 /* Blog author */
                 .blog-author-info {
                     width: 129px;
        
                 }
        
                 .blog-author-info .author-img {
                     float: left;
                     width: 32px;
                     height: 32px;
                     margin-right: 5.5px;
        
                 }
        
                 .blog-author-info h3 {
                     font-size: 14px;
                     padding: 10px;
        
                 }

    .preview-image {
        width: 100%;
    }

}