html, body { height: 100%; }
*, *::after, *::before { box-sizing: border-box; }
:root {
    --p: 10px;
    --lh: 1;
    --bodypadding: calc(var(--p) * 2);
    --headerheight: calc(var(--p) * 2 + var(--p) * var(--lh));
    --mainpadding: calc(var(--p) * 2);
    --windowpadding: calc(var(--p) * 2);
    --contentpadding: calc(var(--p) * 2);
    --contentgaps: calc(var(--p) );
    --topheight: calc(var(--p) * 2 + var(--p) * var(--lh));
    --midpadding: calc(var(--p) * 2);
    --scrollpadding: calc(var(--p) * 2);
    --midgap: var(--p);
    --bottomheight: calc(var(--p) * 2 + var(--p) * var(--lh));
    --midheight: calc((100vh - var(--bodypadding) - var(--headerheight) - var(--mainpadding) - var(--windowpadding) - var(--contentpadding) - var(--contentgaps) - var(--topheight) - var(--midpadding) - var(--scrollpadding) - var(--bottomheight))  );
    --imagesheight: calc( var(--midheight) / 2 - var(--midgap) / 2 - var(--p) * 2)
}
html {
    font-size: 10px;
    line-height: 1;
    text-transform: uppercase;
    font-family: monospace;
}
* { line-height: 1;}
body * { padding: var(--p);}
body::after {
    position: fixed;
    border-left: 5px dashed salmon;
    content:"";
    height: var(--imagesheight);
    display: block;
    top: 140px;
    left: 50%;
}
body {
    margin: 0;
    padding: var(--p);
    grid-template-rows: min-content 1fr;
}
.grid { display: grid; gap: var(--p); }

main {
    grid-template-columns: 1fr min-content;
    align-items: center;
    background: palegoldenrod;
}
.window {
    grid-template-columns: 200px 1fr;
    height: 100%;
    background: #8ad3aa;
}
.content {
    grid-template-rows: min-content 1fr min-content;
    background: #eb5e4b;
}
.mid {
    grid-template-rows: 1fr 1fr;
    background: #94cddc;
}
.scroll {
    gap: var(--p);
    display: flex;
    flex-direction: row;
    height: 100%;
    background: peachpuff;
    overflow-x: scroll;
}
figure {
    margin: 0;
    background: #000;
    padding: 0;
}
.scroll img {
    display: block;
    padding: 0;
    height: var(--imagesheight);
}