* {
    box-sizing:border-box;
}

body{
    margin:0;
}
.main-container {
    background: lightcyan;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 20px;
}

.upper{
    background: lightcyan;
    height: 25%;
    display: flex;
    gap: 20px;
}

.upper-item{
    background: rgb(96, 8, 96);
    width: 100%;
    height: 100%;
}

.lower{
    height: 75%;
    display: flex;
    gap: 20px;
}

.lower-item {
    background: palevioletred;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lower-item-center{
    background: lightcyan;
    width: 40%;
    height: 20%;
}

.lower-right{
    display: flex;
    width: 50%;
    flex-direction: column;
    gap: 20px;
}

.lower-box{
    background: plum;
    display: flex;
    width: 100%;
    height: 100%;
}