@media screen and (max-width:768px) {
    main, section, article, header, footer,
    .pure-g, .pure-u-2-3, .pure-u-1-5, .hero p,
    .pure-u-1-3, .pure-u-1-4, main section,
    .show-info, .project, .project:first-child,
    .stew-content, aside {
        display: block;
        width: 95%;
        margin: auto;
    }
    .history-hero {
        height: 50vw;
    }
}

/* Purpose: Preserve the portfolio grid while legacy assignment pages keep their original mobile fallback. */
@media screen and (max-width: 768px) {
    .portfolio-home header {
        display: flex;
        width: 92%;
        margin: 1.5rem auto 1.25rem;
    }

    .portfolio-home main {
        display: flex;
        width: 92%;
        margin: 1rem auto 2rem;
        flex-direction: column;
        gap: 1.5rem;
    }

    .portfolio-home aside {
        display: block;
        width: 100%;
        margin: 0;
    }

    .portfolio-home article {
        display: grid;
        width: 100%;
        margin: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(180px, 44vw);
        gap: 0.75rem;
    }

    .portfolio-home .project,
    .portfolio-home .project:first-child,
    .portfolio-home .project.featured {
        display: flex;
        width: 100%;
        margin: 0;
        grid-column: span 1;
    }
}

@media screen and (max-width: 560px) {
    .portfolio-home article {
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(210px, 62vw);
    }
}