html, body { margin: 0; background: hwb(0 20% 80%); height: 100vh; width: 100vw; }

:root {
    --g: #57f287;
    --b: #5865f2;
    --y: #FEE75c;
    --p: #eb459e;
    --r: #ed4245;
}

.wrapper {
    position: absolute;
    width: min-content;
    height: min-content;
}

.green { background: #57f287; }
.blue { background: #5865f2; }
.yellow { background: #FEE75c; }
.pink { background: #eb459e; }
.red { background: #ed4245; }

.z { width: 80px; height: 40px; position: relative; }
.zB { margin-left: 40px; width: 80px; height: 40px; position: relative; }

.i { height: 160px; width: 40px; position: absolute;}

.s { width: 80px; height: 80px; position: absolute;}

.t { width: 120px; height: 40px; position: relative; }
.tB { width: 40px; height: 40px; margin-left: 40px; position: relative; }

.l { width: 40px; height: 80px; position: relative; }
.lA { width: 80px; height: 40px; position: relative;}

.bl { left:40px; width: 40px; height: 120px; position: absolute; }
.bl::before { content: ''; position: absolute; top:80px; left: -40px; width: 40px; height: 40px; background: inherit; }