.subportal_grid{
    font-family:'Jeju Gothic',sans-serif;
    width:min(1440px,95vw);
    margin-block:4px;
    display:grid;
    grid-template-columns:
        2.2fr
        repeat(10, 1fr)
        2.2fr;
    grid-template-rows: repeat(8, 100px);
    gap:var(--gap);
}

/* 카드 배치 */

.notes		{grid-column:2 / span 4; grid-row:1 / span 2;}
.research	{grid-column:7 / span 5; grid-row:1 / span 1;}
.science	{grid-column:4 / span 4; grid-row:3 / span 2;}
.music		{grid-column:8 / span 4; grid-row:3 / span 3;}
.painting	{grid-column:2 / span 3; grid-row:6 / span 3;}
.schism	{grid-column:6 / span 5; grid-row:6 / span 3;}

/* void 배치 */

.vl1{grid-column:1; grid-row:1 / span 1;}
.vl2{grid-column:1; grid-row:2 / span 5;}
.vl3{grid-column:1; grid-row:7 / span 2;}

.vr1{grid-column:12; grid-row:1 / span 4;}
.vr2{grid-column:12; grid-row:5 / span 1;}
.vr3{grid-column:12; grid-row:6 / span 3;}

.v01{grid-column:6 / span 1; grid-row:1 / span 1;}
.v02{grid-column:6 / span 6; grid-row:2 / span 1;}
.v03{grid-column:2 / span 2; grid-row:3 / span 3;}
.v04{grid-column:4 / span 4; grid-row:5 / span 1;}
.v05{grid-column:5 / span 1; grid-row:6 / span 3;}
.v06{grid-column:11 / span 1; grid-row:6 / span 1;}
.v07{grid-column:11 / span 1; grid-row:7 / span 2;}

/* hover 효과 */

.notes:hover,.music:hover		{background:var(--blue); color:white;}
.research:hover,.painting:hover	{background:var(--yellow);}
.science:hover,.schism:hover	{background:var(--red);}


@media screen and (max-width:767px){
    
    .subportal_grid{
            grid-template-columns:
                repeat(10,1fr);
    }

    /* 카드 배치 - Desktop View의 grid-column값에서 1씩 빼주면 됨 */

    .notes		{grid-column:1 / span 4; grid-row:1 / span 2;}
    .research	{grid-column:6 / span 5; grid-row:1 / span 1;}
    .science	{grid-column:3 / span 4; grid-row:3 / span 2;}
    .music		{grid-column:7 / span 4; grid-row:3 / span 3;}
    .painting	{grid-column:1 / span 3; grid-row:6 / span 3;}
    .schism	{grid-column:5 / span 5; grid-row:6 / span 3;}

    /* void 배치 - Desktop View의 grid-column값에서 1씩 빼주면 됨 */

    .vl1,.vl2,.vl3,.vr1,.vr2,.vr3{display:none;}

    .v01{grid-column:5 / span 1; grid-row:1 / span 1;}
    .v02{grid-column:5 / span 6; grid-row:2 / span 1;}
    .v03{grid-column:1 / span 2; grid-row:3 / span 3;}
    .v04{grid-column:3 / span 4; grid-row:5 / span 1;}
    .v05{grid-column:4 / span 1; grid-row:6 / span 3;}
    .v06{grid-column:10 / span 1; grid-row:6 / span 1;}
    .v07{grid-column:10 / span 1; grid-row:7 / span 2;}

}