.dynamicBanner {
    width: 100vw;
    overflow: hidden;
    /* 가로폭 제한 둘 때 이거 두개만 주석 처리하면 됨 */
    /* max-width: 1200px;
    margin: 0 auto; */
}

.sections {
    display: block;
    width: 100%;
    height: calc(100vw * 5 / 9);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-size: cover;
    /* Add max-height to maintain aspect ratio */
    /* max-height: calc(1200px * 4 / 9); */
}

.mobileSections {
    display: none;
    width: 100%;
    height: calc(100vw * 5 / 4);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-size: cover;
}

.DB4Division {
    width: 100%;
    /* 세로 / 가로 */
    height: calc(100vw * 1 / 2);
    display: flex;
    flex-wrap: wrap;

    /* 1200px max일 때 추가 */
    /* margin: 0 auto;
    max-width: 1200px;
    max-height: calc(1200px * 1 / 2); */
}

.division {
    display: block;
    /* 2 columns */
    width: 50%; 
    /* 2 rows */
    height: 50%; 
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.mobileDivision {
    display: none;
    /* 1 column */
    width: 100%;
    /* 4 rows */
    height: 25%; 
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* @media (max-width: 768px) { */
@media (max-width: 600px) {
    .sections {
        display: none;
    }
    
    .mobileSections {
        display: block;
    }

    .division {
        display: none;
    }
    
    .DB4Division {
        height: calc(100vw * 4 / 1);
    }

    .mobileDivision {
        display: block;
    }
}