@media only screen and (min-width: 64rem) {
    /* ==========================================================================
        BENTO
    ========================================================================== */

    .bento-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(5, 250px); 
        padding: 3rem 0;
    }

    .bento-card {
        padding: var(--space-3);
        height: 100%;
    }

    .card-form {
        grid-column: 1 / 3;
        grid-row: 3 / 6;
    }

    .card-title {
        grid-column: 3 / 5;
        grid-row: 3;
    }

    .card-meta {
        grid-column: 5;
        grid-row: 1;
    }

    .card-sidebar {
        grid-column: 5;
        grid-row: 2 / 4; 
    }

    .card-code {
        grid-column: 3 / 6;
        grid-row: 4 / 6;
    }

    .card-stack {
        grid-column: 1 / 3;
        grid-row: 1 / 3;
    }

    .card-stack h3 {
        font-size: var(--fs-lg);
        line-height: var(--lh-lg);
    }

    .card-display {
        grid-column: 3 / 5;
        grid-row: 1 / 3; 
    }

    .bento-card img {
        width: 100%;
        height: 100%;
        object-fit: cover; 
        max-height: none; 
        border-radius: var(--radius-subtle);
    }

    .bento-card:has(img) {
        padding: 0;
    }
}