*{
    box-sizing: border-box;
}
body{
    background-color: lightblue;
    margin:0;
}
img{
    max-width: 100%;
}
.main-container{
    background-color: lightgoldenrodyellow;
    border: 1px, solid;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap:10px;
    height: 100vh;
}

.top{
    /* background-color: lightblue; */
    height: 20%;
    display: flex;
    gap: 10px;
}

.top-item{
    background-color: azure;
    width: 100%;
    border: 1px, solid;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bottom{
    /* background-color: lightgreen; */
    height: 80%;
    display: flex;
    gap: 10px;
}

.left{
    background-color: plum;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px, solid;
}

.left-item{
    background-color: orange;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px, solid;
}

.right{
    background-color: cornflowerblue;
    width: 50%;
    display: flex;
    gap: 10px;
    flex-direction: column;
    
}

.right-item{
    background-color: aqua;
    height: 25%;
    border: 1px, solid;
    display: flex;
    align-items: center;
    justify-content: center;
}