.grid-container {
    display: grid;
    grid-template-columns: 15% 1fr 25%;
    grid-auto-rows: 50px;
    /* for demo */
    grid-gap: 10px;
    width: 100%;
    grid-template-rows: auto auto auto;

}

.articles {
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow: auto;
}

@media (max-width: 1024px) {
    .grid-container {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
    }

    .directory {
        grid-column: 1 / 2;
    }

    .articles {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
    }

    .about {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }
}

@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }

    .directory {
        grid-row: 1;
    }

    .articles {
        grid-row: 2;
    }

    .about {
        grid-row: 3;
    }
}