/* --- 基礎設定 & 手機版 (2欄模式) --- */
.grid-container {
    display: grid;
    width: auto;
    gap: 0.2rem;
    padding: 0.2rem;
    margin: 0px auto;
    align-self: center;
    align-items: center;

    grid-auto-rows: min-content; 
    grid-template-columns: 1fr 1fr; 
    grid-template-areas: 
    "n1 n1"
    "n1 n1"
    "n2 n2"
    "n3 n4"
    "n5 n6"
    "n7 n8";
}


.grid-container div {
    border-radius: 0.5rem;
    background: #34354c;
}


.item-1    {grid-area: n1;}
.item-2    {grid-area: n2;}
.item-3    {grid-area: n3;}
.item-4    {grid-area: n4;}
.item-5    {grid-area: n5;}
.item-6    {grid-area: n6;}
.item-7    {grid-area: n7;}
.item-8    {grid-area: n8;}


.box-2x1 {
    aspect-ratio: 1/2;
}
.box-1x2 {
    aspect-ratio: 2/1;
}
.box-4x4, .box-1x1 {
    aspect-ratio: 1/1;
}

/* --- 平版 --- */
@media (min-width: 768px) {
    .grid-container {
    grid-template-columns: repeat(4, 1fr);


    grid-template-areas: 
        "n1 n1 n3 n4"
        "n1 n1 n2 n2"
        "n5 n6 n7 n8";
    }
}

/* --- 電腦 --- */
@media (min-width: 1024px) {
    .grid-container {
    grid-template-columns: repeat(6, 1fr);

    grid-template-areas: 
        "n1 n1 n3 n4 n5 n6"
        "n1 n1 n2 n2 n7 n8";
    }
}