.card-green { background: #bcd9bd; }
.card-purple { background: #d4c5df; }
.shirt::before { content: ""; position: absolute; width: 112px; height: 108px; left: calc(50% - 56px); top: 35px; background: #fffdf7; border: 3px solid var(--ink); border-radius: 8px 8px 18px 18px; clip-path: polygon(20% 0,38% 0,42% 12%,58% 12%,62% 0,80% 0,100% 25%,84% 43%,74% 34%,74% 100%,26% 100%,26% 34%,16% 43%,0 25%); }.shirt::after { content: ""; position: absolute; width: 33px; height: 14px; left: calc(50% - 17px); top: 34px; border: 3px solid var(--ink); border-top: 0; border-radius: 0 0 50% 50%; }.shirt i:first-child { position: absolute; z-index: 2; width: 28px; border-top: 3px solid var(--red); left: calc(50% - 14px); top: 82px; }
.pillow::before { content: ""; position: absolute; width: 150px; height: 82px; left: calc(50% - 75px); top: 42px; background: #fffdf7; border: 3px solid var(--ink); border-radius: 46% 54% 42% 58% / 55% 46% 54% 45%; transform: rotate(-4deg); }
.pillow i, .belt i { position: absolute; z-index: 1; border: 2px solid var(--ink); border-radius: 50%; }
.pillow i:first-child { width: 24px; height: 24px; left: calc(50% - 44px); top: 70px; background: var(--red); }.pillow i:last-child { width: 24px; height: 24px; left: calc(50% + 20px); top: 63px; background: var(--yellow); }
.belt::before { content: ""; position: absolute; width: 176px; height: 92px; left: calc(50% - 88px); top: 38px; background: #fffdf7; border: 3px solid var(--ink); border-radius: 35px 35px 22px 22px; }.belt::after { content: ""; position: absolute; width: 42px; height: 54px; left: calc(50% - 21px); top: 56px; background: var(--red); border: 3px solid var(--ink); border-radius: 7px; }.belt i:first-child { width: 28px; height: 28px; left: calc(50% - 68px); top: 69px; }.belt i:nth-child(2) { width: 28px; height: 28px; left: calc(50% + 40px); top: 69px; }
.umbrella::before { content: ""; position: absolute; width: 180px; height: 82px; left: calc(50% - 90px); top: 29px; background: #fffdf7; border: 3px solid var(--ink); border-radius: 100px 100px 8px 8px; clip-path: polygon(50% 0,100% 100%,0 100%); }.umbrella::after { content: ""; position: absolute; left: 50%; top: 68px; height: 79px; border-left: 4px solid var(--ink); }.umbrella i:last-child { position: absolute; width: 26px; height: 22px; left: 50%; top: 126px; border: 4px solid var(--ink); border-top: 0; border-left: 0; border-radius: 0 0 20px 0; }
@media (min-width: 761px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }