.grid-container {
            /* 6 :3fr 2fr 2fr 2fr 2fr 1fr */
            grid-template-columns: 3fr 2fr 2fr 2fr 2fr 1fr;
            grid-template-rows: repeat(19, 1fr);
            height: 120vh;
            gap: 8px;
            padding: 8px;
            box-sizing: border-box;
            background-color: #f0f0f0; 
        }
        .grid-item {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            font-weight: bold;
            color: #ffffff; 
            border-radius: 8px; 
            background-color: #90bd43;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            text-align: center; 
            line-height: 1;
        }

        /* ----------------------------------------------------
           Grid Item Placement
           Format: grid-column: start / end; grid-row: start / end;
           ---------------------------------------------------- */

        /* Item 1: Col 1, 12 Rows high */
        .item-1 { grid-column: 1 / 2; grid-row: 1 / span 28; } 
        /* Item 2: Col 2, 5 Rows high */
        .item-2 { grid-column: 2 / 3; grid-row: 1 / span 5; }
        /* Item 3: Col 2, 7 Rows high */
        .item-3 { grid-column: 2 / 3; grid-row: 6 / span 22; }

        /* Item 4: Col 3, 4 Rows high */
        .item-4 { grid-column: 3 / 4; grid-row: 1 / span 4; }
        /* Item 5: Col 3, 6 Rows high */
        .item-5 { grid-column: 3 / 4; grid-row: 5 / span 6; }
        /* Item 6: Col 3, 6 Rows high */
        .item-6 { grid-column: 3 / 4; grid-row: 11 / span 17; }

        /* Item 7: Col 4, 3 Rows high */
        .item-7 { grid-column: 4 / 5; grid-row: 1 / span 3; }
        /* Item 8: Col 4, 3 Rows high */
        .item-8 { grid-column: 4 / 5; grid-row: 4 / span 3; }
        /* Item 9: Col 4, 4 Rows high */
        .item-9 { grid-column: 4 / 5; grid-row: 7 / span 4; }
        /* Item 10: Col 4, 7 Rows high */
        .item-10 { grid-column: 4 / 5; grid-row: 11 / span 17; }

        /* Item 11: Col 5, 2 Rows high */
        .item-11 { grid-column: 5 / 6; grid-row: 1 / span 2; }
        /* Item 12: Col 5, 3 Rows high */
        .item-12 { grid-column: 5 / 6; grid-row: 3 / span 3; }
        /* Item 13: Col 5, 3 Rows high */
        .item-13 { grid-column: 5 / 6; grid-row: 6 / span 3; }
        /* Item 14: Col 5, 3 Rows high */
        .item-14 { grid-column: 5 / 6; grid-row: 9 / span 3; }
        /* Item 15: Col 5, 2 Rows high */
        .item-15 { grid-column: 5 / 6; grid-row: 12 / span 2; }
        /* Item 16: Col 5, 5 Rows high */
        .item-16 { grid-column: 5 / 6; grid-row: 14 / span 13; }

        /* Far Right Column (Col 6) - 1 Row High with Gaps */
        .item-17 { grid-column: 6 / 7; grid-row: 1 / span 1; }
        .item-18 { grid-column: 6 / 7; grid-row: 2 / span 1; }
        .item-19 { grid-column: 6 / 7; grid-row: 3 / span 1; }
        .item-20 { grid-column: 6 / 7; grid-row: 4 / span 1; }
        .item-21 { grid-column: 6 / 7; grid-row: 5 / span 1; }
        .item-22 { grid-column: 6 / 7; grid-row: 6 / span 1; }
        /* Gap at row 7, 8 */
        .item-23 { grid-column: 6 / 7; grid-row: 9 / span 1; }
        .item-24 { grid-column: 6 / 7; grid-row: 10 / span 1; }
        /* Gap at row 11 */
        .item-25 { grid-column: 6 / 7; grid-row: 12 / span 1; }
        .item-26 { grid-column: 6 / 7; grid-row: 13 / span 1; }
        /* Gap at row 14, 15 */
        .item-27 { grid-column: 6 / 7; grid-row: 16 / span 1; }
        .item-28 { grid-column: 6 / 7; grid-row: 17 / span 10; }