@media screen and (max-width: 950px) {
    body {
        height: auto;
        padding: 0.5rem;
    }

    main {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        position: static;
    }
    h1{
        margin: 0;
    }
    aside {
        border-right: none;
        padding-bottom: 1rem;
        padding-right: 0;
        flex-direction: row; 
        overflow-x: auto;
        min-height: 3rem;
    }
    
    aside ul {
        display: flex;
        gap: 1rem;
        margin: 0;
    }

    main > section {
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    .main_title, 
    .updates, 
    .date {
        grid-column: auto;
        grid-row: auto;
        border: none;
    }

    .date {
        display: none; 
    }
    
    .updates {
        padding: 0;
        max-height: 400px; /* Limit height on mobile */
    }
    .updates article{
         border-bottom: 2px solid var(--border-color);
         max-height: 200px;
    }
}