.cards-container { 
        box-sizing: border-box;
        position: relative;
        width: 100%;
        padding: 10px;
        margin: auto;
        background-color: #FAF8F8;
        border: 1px solid silver;
        box-shadow: 5px 5px 8px 8px #888888;
    }
    .cards-tray {
        box-sizing: border-box;
        background-color: #FAF8F8;
        width: 920px;
        height: 515px;
        position: relative;
        margin: auto;
    }

    .article-grid {
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
        gap:15px;
        border-radius: 10px;
        align-items:start;
    }

    .article-card {
        background: #fff;
        break-inside:avoid;
        overflow-y:auto;
        margin-bottom:10px;
        border-radius:15px;
        min-height:180px;
        max-height: 250px;
        position:relative;
        box-shadow: 3px 3px 5px 5px lightslategrey;
        transition:
            transform .35s ease,
            box-shadow .35 ease,
            filter .35s ease;
    }
    
    .article-video {
        background: #fff;
        break-inside:avoid;
        overflow-y:auto;
        margin-bottom:10px;
        border-radius:15px;
        min-height:180px;
        max-height: 250px;
        position:relative;
        box-shadow: 3px 3px 5px 5px lightslategrey;
        transition:
            transform .35s ease,
            box-shadow .35 ease,
            filter .35s ease;
        position:relative;
        margin-top: -250px;
        margin-left: 480px;
        width: 48%;
        padding: 0%;
        
    }

    .article-card::-webkit-scrollbar {
        width:0px;
    }

    .article-card img {
        width: 100%;
        height: auto;
        object-fit:fit;

        transition:
            transform .5s ease;
    }

    .tbl-sdg::-webkit-scrollbar {
        width:0px;
    }

    .tbl-art::-webkit-scrollbar {
        width:0px;
    }

    .card-body {
        padding:5px;
        overflow-x: hidden;
    }

    .article-card:hover {
        cursor:pointer;
        transform:scale(1.08);
        box-shadow: 3px 3px 5px 5px lightyellow;
    }
    
    .article-card:active {
        transform:scale(.97);
    }

    .article-card {
        max-width: 220px;
        opacity: 0;
        animation: fadeUp .6s ease forwards;
    }

    @keyframes fadeUp {

        from {
            opacity: 0;
            transform: translateY(40px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .btn-articles {
        background-color: blue;
        padding: 20px;
        text-align: center;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-weight: bold;
        color: #ffff;
        border-radius: 10px;
        border: 1px solid #ffff;
        
    }

    .btn-articles:hover {
        background-color: yellow;
        color: blue;
    }

    .title-header {

    top:160px;
    left:0;
    width:100%;
    text-align:center;
    color:#fff;
    font-size:50px;
    font-family:Times;
    }

    .article-details img {
        
        max-width:650px;
        max-height:650px;
        min-width:220px;
        min-height:220px;
    }
    .article-body {
        text-align: justify;
        font-size:20px;
        margin-left:70px;
        margin-right:70px;
    }

    .btn-view {
        text-align: center;
    }

    .table-container {
        margin-top: 10px;
        padding: 15px;
        height: 700px;
        border: 1px solid lightgrey;
    }
    
    #articleTable {
        overflow-y: auto;
    }
    
    #sdgTable {
        overflow-y: auto;
    }

    .indent {
        text-align: justify; 
        padding:30px;
    }