@layer base {
    .bento-grid {
        display: grid;
        gap: var(--spacing-6);

        &[cols="2"] {
            grid-template-columns: repeat(2, 1fr);
        }

        &[cols="3"] {
            grid-template-columns: repeat(3, 1fr);
        }

        &[cols="4"] {
            grid-template-columns: repeat(4, 1fr);
        }

        &[cols="5"] {
            grid-template-columns: repeat(5, 1fr);
        }

        &[cols="auto"] {
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        }
    }

    .bento-grid > * {
        background-color: var(--color-surface-2);
        border-radius: var(--radius-lg);
        min-height: 300px;
        overflow: hidden;

        &[col-span="2"] {
            grid-column: span 2;
        }
        &[col-span="3"] {
            grid-column: span 3;
        }
        &[col-span="4"] {
            grid-column: span 4;
        }
        &[col-span="5"] {
            grid-column: span 5;
        }

        /* Optional: Row spanning */
        &[row-span="2"] {
            grid-row: span 2;
        }
        &[row-span="3"] {
            grid-row: span 3;
        }
    }
}