* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

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

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

.upper-item {
    background: lightcoral;
    width: 100%;
    height: 100%;

}

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

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

.right-item {
    background: lightgreen;
    height: 25%;
}

.left-half {
    background: lightcyan;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.center-object {
    background: lightpink;
    width: 25%;
    height: 30%;


}