@layer components {
    .live-demo {
        text-align: center;
        padding-block: var(--space-xl);
        padding-inline: var(--space-s);
        background: var(--color-surface-mixed);

        & .live-demo__stack {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--space-m);
            margin-block-start: var(--space-m);
        }

        & .live-demo__qr {
            box-shadow: var(--shadow-m);
            transition: transform 0.3s var(--ease-out);

            &:hover {
                transform: scale(1.03) rotate(-1deg);
            }
        }
    }
}