@import url("styles/common.css");

.project-image {
    width: 100%;
}

#project-list h3 {
    margin-top: 0;
}

#project-list li {
    border: 2px solid #ccc;
    border-radius: 1em;
    padding: 1em;
    box-sizing: border-box;
}

/* Desktop layout */
@media (min-width: 768px) {
    #project-list {
        list-style-type: none;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1em;
    }

    #project-list li {
        grid-column: span 1;
        grid-row: span 1;
        margin-bottom: 0;
    }

    #project-list li[data-url="projects/videomultiagents.html"] {
        grid-column: span 3;
        grid-row: span 1;
    }

    #project-list li[data-url="projects/live-it.html"] {
        grid-column: span 3;
        grid-row: span 1;
    }

    #project-list li[data-url="projects/static_retrieval.html"] {
        grid-column: span 3;
        grid-row: span 1;
    }

    #project-list li[data-url="projects/dips.html"] {
        grid-column: span 3;
        grid-row: span 1;
    }

    #project-list li[data-url="projects/wordshk.html"] {
        grid-column: span 1;
        grid-row: span 1;
    }

    #project-list li[data-url="projects/a2go.html"] {
        grid-column: span 1;
        grid-row: span 1;
    }

    #project-list li[data-url="https://renovar.pages.dev"] {
        grid-column: span 3;
        grid-row: span 1;
    }

    #project-list li[data-url="projects/cse_simulator.html"] {
        grid-column: span 2;
        grid-row: span 1;
    }

    #project-list li[data-url="projects/wukong.html"] {
        grid-column: span 3;
        grid-row: span 1;
    }

    #project-list li[data-url="projects/pinccer.html"] {
        grid-column: span 3;
        grid-row: span 1;
    }

    .experience-container {
        display: flex;
        flex-wrap: wrap;
        gap: 1em;
    }

    .experience-container>div {
        flex: 1 1 100%;
    }

    @media (min-width: 768px) {
        .experience-container>div {
            flex: 1 1 0;
        }
    }
}

/* Mobile layout */
@media (max-width: 767px) {
    #project-list {
        list-style-type: none;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 1em;
    }

    #project-list li {
        width: 100%;
    }
}