/* Shape Memory Match — plain CSS shapes (border-radius / clip-path) */

.smm-shape { display: inline-block; width: 34px; height: 34px; width: 52cqi; height: 52cqi; }
.smm-shape--circle { border-radius: 50%; }
.smm-shape--square { border-radius: 5px; }
.smm-shape--rectangle { width: 44px; height: 26px; width: 66cqi; height: 40cqi; border-radius: 5px; }
.smm-shape--oval { width: 44px; height: 28px; width: 66cqi; height: 42cqi; border-radius: 50%; }
.smm-shape--triangle { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.smm-shape--star { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.smm-shape--diamond { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.smm-shape--trapezoid { clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); }
.smm-shape--pentagon { clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); }
.smm-shape--hexagon { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
.smm-shape--cross { clip-path: polygon(35% 0%, 65% 0%, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0% 65%, 0% 35%, 35% 35%); }
.smm-shape--arrow { width: 42px; width: 64cqi; clip-path: polygon(0% 25%, 50% 25%, 50% 0%, 100% 50%, 50% 100%, 50% 75%, 0% 75%); }