/* style sheet for mobile */

/* big article Main Container */
.mobileFeaturedArticleBigContainer {
    height: 300px;
    width: 100%;
}

/* featured articles header */
.featuredArticleHeaderMobile{
    font-size: x-large;
}

/* image container for big article on mobile */
.mobileFeatureArticleBigImagecontainer{
    height: 60%;
    width: 100%;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    overflow: hidden;
    display: flex;
    align-items: center; 
    justify-content: center; 
}

/* text container for big articles on mobile */
.mobileFeatureArticleBigTextContainer{
    height: 40%;
    width: 100%;
    
}

/* image styling */
.mobileFeatureArticleBigImage{
    width: 100%;
    
}

/* smaller article container on mobile for home pages */
.MobileSmallerArticleContainer{
    height: 600px;
    width: 100%;
}

/* each individual container for the list of dmaller articles on mobile */
.mobileSmallerarticleIndivContainer{
    height: 20%;
    width: 100%;
}

/* image container for smaller article list on mobile */
.mobileSmallerArticleImageContainer{
    width: 40%;
    height: 100%;
    float: left;
}

/* table element and style to centre within a div the image container */
.mobileSmallerArticletableImage{
    height: 100%;
    width: 100%;
    vertical-align: middle;
    table-layout:fixed;
}

/* image for small articles on mobile max width for image */
.featuredArticleHomePageImageMobile{
    max-width: 100%;
}

/* text container for smaller article list */
.mobileSmallerArticleTextContainer{
    float: right;
    width: 60%;
    height: 100%;
}