.geometry { position: relative; width: 100%; aspect-ratio: 1; max-height: 320px; overflow: hidden; background: var(--pink); clip-path: var(--ticket); }
.shape { position: absolute; }
.shape-a { width: 100%; height: 26%; left: 0; top: 0; background: var(--rose); }
.shape-b { width: 72%; height: 28%; left: 0; top: 38%; background: var(--salmon); clip-path: polygon(0 0, 100% 0, calc(100% - 28px) 100%, 0 100%); }
.shape-c { width: 100%; height: 22%; left: 0; bottom: 0; background: var(--sage); }
.shape-d { width: 22%; height: 100%; right: 0; top: 0; background: var(--blue); }
.geometry-pin { display: none; }
.geometry--split .shape-a { height: 52%; width: 50%; }
.geometry--split .shape-b { left: 50%; top: 0; width: 50%; height: 52%; clip-path: none; }
.geometry--split .shape-c { height: 36%; }
.geometry--split .shape-d { height: 12%; width: 100%; top: 52%; }
.geometry--bridge .shape-a { height: 24%; top: 18%; }
.geometry--bridge .shape-b { height: 24%; width: 85%; top: 42%; }
.geometry--bridge .shape-c { height: 24%; width: 65%; bottom: 10%; }
.geometry--bridge .shape-d { width: 15%; }
.geometry--steps .shape-a { width: 60%; height: 34%; }
.geometry--steps .shape-b { width: 80%; height: 34%; top: 33%; clip-path: none; }
.geometry--steps .shape-c { height: 34%; }
.geometry--steps .shape-d { width: 20%; height: 33%; }
@media (max-width: 700px) {
  .geometry { --ticket: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
}