/* =========================================================
   Subportal
   ========================================================= */

.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(4, 100px);

    gap: var(--gap);
}


/* 카드 배치 */

.life-story {
    grid-column: 2 / span 5;
    grid-row: 1 / span 3;
}

.travel {
    grid-column: 7 / span 5;
    grid-row: 2 / span 3;
}


/* void 배치 */

.vl1 {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.vl2 {
    grid-column: 1;
    grid-row: 3 / span 2;
}

.vr1 {
    grid-column: 12;
    grid-row: 1 / span 2;
}

.vr2 {
    grid-column: 12;
    grid-row: 3 / span 2;
}

.v01 {
    grid-column: 7 / span 2;
    grid-row: 1;
}

.v02 {
    grid-column: 9 / span 3;
    grid-row: 1;
}

.v03 {
    grid-column: 2;
    grid-row: 4;
}

.v04 {
    grid-column: 3 / span 4;
    grid-row: 4;
}


/* hover */

.life-story:hover {
    background: var(--blue);
    color: white;
}

.travel:hover {
    background: var(--yellow);
}



@media screen and (max-width: 767px) {

    .subportal_grid {
        grid-template-columns:
            repeat(10, 1fr);
    }


    /* 카드 배치 */

    .life-story {
        grid-column: 1 / span 5;
        grid-row: 1 / span 3;
    }

    .travel {
        grid-column: 6 / span 5;
        grid-row: 2 / span 3;
    }


    /* void 배치 */

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

    .v01 {
        grid-column: 6 / span 3;
        grid-row: 1;
    }

    .v02 {
        grid-column: 9 / span 2;
        grid-row: 1;
    }

    .v03 {
        grid-column: 1 / span 2;
        grid-row: 4;
    }

    .v04 {
        grid-column: 3 / span 3;
        grid-row: 4;
    }

}