.art { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--paper-deep); border: 1px solid var(--paper-deep); }
.art__shape { position: absolute; display: block; }
.art__shape--a { width: 67%; height: 67%; left: 16%; top: 16%; background: var(--coral); }
.art__shape--b { width: 45%; height: 45%; left: 27%; top: 27%; border: 24px solid var(--ink); }
.art__shape--c { width: 25%; height: 25%; left: 37%; top: 37%; background: var(--paper); }
.art__shape--d { width: 100%; height: 2px; left: 0; top: 50%; background: var(--ink); }
.art--opening .art__shape--a { width: 84%; height: 44%; left: 8%; top: 28%; transform: rotate(-32deg); }
.art--opening .art__shape--b { width: 54%; height: 78%; top: 11%; left: 23%; border-width: 28px; transform: rotate(32deg); }
.art--opening .art__shape--c { left: 37%; top: 37%; transform: rotate(-32deg); }
.art--opening .art__shape--d { top: 82%; width: 26%; left: 8%; height: 12px; }
.art--chain .art__shape--a { width: 42%; height: 42%; left: 8%; top: 8%; }
.art--chain .art__shape--b { width: 42%; height: 42%; left: 50%; top: 50%; border-width: 16px; }
.art--chain .art__shape--c { width: 38%; height: 38%; left: 30%; top: 30%; background: var(--coral-deep); }
.art--chain .art__shape--d { height: 8%; width: 65%; left: 18%; top: 46%; transform: rotate(45deg); }
.art--frames .art__shape--a { background: transparent; border: 24px solid var(--coral); }
.art--frames .art__shape--b { left: 45%; top: 45%; border-width: 16px; }
.art--frames .art__shape--c { width: 14%; height: 14%; left: 7%; top: 7%; background: var(--ink); }
.art--frames .art__shape--d { width: 28%; left: 0; top: 70%; }
.art--layers .art__shape--a { width: 70%; height: 28%; left: 15%; top: 15%; }
.art--layers .art__shape--b { width: 70%; height: 28%; left: 15%; top: 43%; border-width: 12px; }
.art--layers .art__shape--c { width: 70%; height: 7%; left: 15%; top: 78%; background: var(--grey); }
.art--layers .art__shape--d { height: 100%; width: 2px; left: 50%; top: 0; }
.art--gap .art__shape--a { width: 38%; height: 70%; left: 7%; top: 15%; clip-path: polygon(0 0, 100% 0, 55% 50%, 100% 100%, 0 100%); }
.art--gap .art__shape--b { width: 38%; height: 70%; left: 55%; top: 15%; border: 0; background: var(--ink); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 45% 50%); }
.art--gap .art__shape--c { width: 12%; height: 12%; left: 44%; top: 44%; background: var(--coral); }
.art--gap .art__shape--d { width: 100%; top: 50%; }
.art--index .art__shape--a { width: 23%; height: 76%; left: 10%; top: 12%; }
.art--index .art__shape--b { width: 23%; height: 54%; left: 38%; top: 34%; border-width: 12px; }
.art--index .art__shape--c { width: 23%; height: 30%; left: 66%; top: 58%; background: var(--grey); }
.art--index .art__shape--d { width: 80%; left: 10%; top: 12%; }
@media (max-width: 760px) {
  .art__shape--b, .art--opening .art__shape--b { border-width: 16px; }
  .art--frames .art__shape--a { border-width: 16px; }
}