html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: grid;
  place-items: center; /* center the whole grid on the page */
}

.frame {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  /* This makes the frame as big as possible while still fitting the screen */
  width: min(100vw, calc(100vh * 3 / 4));
  aspect-ratio: 3 / 4;
}

.cell {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* Ribbon sizing */
:root {
  --thickness: 70%;
  --shadow: rgba(0, 0, 0, 0.18);
}

/* Base ribbon */
.rib {
  position: absolute;
  background: #ccc;
  filter: drop-shadow(0 2px 2px var(--shadow));
  border: solid 1px #999;
}

/* Horizontal ribbon spans full width, thick in height */
.rib.h {
  left: 0;
  right: 0;
  top: calc(50% - var(--thickness) / 2);
  height: var(--thickness);
}

/* Vertical ribbon spans full height, thick in width */
.rib.v {
  top: 0;
  bottom: 0;
  left: calc(50% - var(--thickness) / 2);
  width: var(--thickness);
}

/* Weave: alternate which ribbon is on top */
.cell.over-h .rib.h {
  z-index: 2;
}
.cell.over-h .rib.v {
  z-index: 1;
}

.cell.over-v .rib.v {
  z-index: 2;
}
.cell.over-v .rib.h {
  z-index: 1;
}