* {
    box-sizing:border-box;
}

img {
    max-width:100%;
}

body {
    margin:0;
}

.container {
    background:lightblue;
    /* vh stands for viewport height */
    height:50vh;
    display:flex;
    flex-direction:column;
    padding:10px;
    gap:10px;
}

.top {
    /* background:pink; */
    height:25%;
    display:flex;
    justify-content:space-between;
    gap:10px;
}

.top-item {
    background:#f997a8;
    width:100%;
    display:flex;
    justify-content: center;
    align-items:center;
}

.bottom {
    /* background:#f4cc82; */
    height:75%;
    display:flex;
    gap:10px;
}

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

.left-item {
    background:whitesmoke;
    width:20%;
    height:20%;
    display:flex;
    justify-content:center;
    align-items:center;
}

.right {
    /* background:#fafa6b; */
    width:50%;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.right-item {
    background:#bebebe;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}