.two-columns {
    columns: 2; /* Split into 2 columns */
    -webkit-columns: 2; /* For Safari and Chrome */
    column-gap: 20px; /* Space between columns */
    list-style-position: inside; /* Keeps bullets inside the columns */
}


/* Tablet breakpoint (adjust to your breakpoint if needed) */
@media (min-width: 768px) and (max-width: 991px) {
    .resume-aside {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem 3rem;
        grid-auto-flow: row;           /* use explicit placement below */
        grid-auto-rows: min-content;   /* rows size to content */
        align-items: start;
    }

    /* Reduce space between grid items */
    .resume-aside {
        gap: 1rem 1.5rem; /* vertical 1rem, horizontal 1.5rem */
    }

    /* Reduce internal bottom padding inside each section */
    .resume-aside > section {
        padding-bottom: 0.1rem;
    }


    /* Reduce spacing between list items */
    .resume-aside li {
        margin-bottom: 0.25rem;
    }

    /* Use positional selectors to match the exact sections in your HTML order.
       Inside the aside the sections appear in this order:
         1: Skills
         2: Education
         3: Courses
         4: Achievements
         5: Languages
         6: Outro
    */

    /* Top row */
    .resume-aside > section:nth-of-type(1) { /* Skills */
        grid-column: 1;
        grid-row: 1;
        align-self: start;
    }

    .resume-aside > section:nth-of-type(2) { /* Education */
        grid-column: 2;
        grid-row: 1;
        align-self: start;
    }

    /* Left tall column: Courses occupies rows 2–4 */
    .resume-aside > section:nth-of-type(3) { /* Courses */
        grid-column: 1;
        grid-row: 2 / span 3;
        align-self: start;
    }

    /* Right stacked column: Achievements / Languages / Outro */
    .resume-aside > section:nth-of-type(4) { /* Achievements */
        grid-column: 2;
        grid-row: 2;
        align-self: start;
    }

    .resume-aside > section:nth-of-type(5) { /* Languages */
        grid-column: 2;
        grid-row: 3;
        align-self: start;
    }

    .resume-aside > section:nth-of-type(6) { /* Outro */
        grid-column: 2;
        grid-row: 4;
        align-self: start;
    }

    /* Make sure sections expand normally and don't overlap */
    .resume-aside > section {
        margin: 0;
        padding-bottom: 1rem;
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .resume-title {
        margin-right: -20px;
    }

    .resume-contact li {
        display: flex;
        align-items: center;   /* aligns icon + text on same baseline */
    }

    .resume-contact li:nth-child(2) {
        margin-left: 2px;   /* adjust to taste */
    }




}