.northstar-configurator-container {
    &.container-position--top-global-header-offset {
        top: calc(var(--wink-global-header-height));
    }

    &.container-display--grid > div > div > div.cmp-container {
        display: grid;
    }

    &.container-display--flex > div > div > div.cmp-container {
        display: flex;
    }

    &.container-align-items--center > div > div > div.cmp-container {
        align-items: center;
    }

    &.container-justify-content--space-between > div > div > div.cmp-container {
        justify-content: space-between;
    }

    &.container-justify-content--center > div > div > div.cmp-container {
        justify-content: center;
    }

    &.container-gap--3xs > div > div > div.cmp-container {
        gap: calc(var(--semantic-spacing-3xs) * 1rem);
        gap: calc(var(--semantic-spacing-3xs) * var(--rem-multiplier, 1rem));
    }

    &.container-gap--2xs > div > div > div.cmp-container {
        gap: calc(var(--semantic-spacing-2xs) * 1rem);
        gap: calc(var(--semantic-spacing-2xs) * var(--rem-multiplier, 1rem));
    }

    &.container-gap--xs > div > div > div.cmp-container {
        gap: calc(var(--semantic-spacing-xs) * 1rem);
        gap: calc(var(--semantic-spacing-xs) * var(--rem-multiplier, 1rem));
    }

    &.container-gap--sm > div > div > div.cmp-container {
        gap: calc(var(--semantic-spacing-sm) * 1rem);
        gap: calc(var(--semantic-spacing-sm) * var(--rem-multiplier, 1rem));
    }

    &.container-gap--md > div > div > div.cmp-container {
        gap: calc(var(--semantic-spacing-md) * 1rem);
        gap: calc(var(--semantic-spacing-md) * var(--rem-multiplier, 1rem));
    }

    &.container-gap--lg > div > div > div.cmp-container {
        gap: calc(var(--semantic-spacing-lg) * 1rem);
        gap: calc(var(--semantic-spacing-lg) * var(--rem-multiplier, 1rem));
    }

    &.container-gap--xl > div > div > div.cmp-container {
        gap: calc(var(--semantic-spacing-xl) * 1rem);
        gap: calc(var(--semantic-spacing-xl) * var(--rem-multiplier, 1rem));
    }

    &.container-gap--2xl > div > div > div.cmp-container {
        gap: calc(var(--semantic-spacing-2xl) * 1rem);
        gap: calc(var(--semantic-spacing-2xl) * var(--rem-multiplier, 1rem));
    }

    &.container-gap--3xl > div > div > div.cmp-container {
        gap: calc(var(--semantic-spacing-3xl) * 1rem);
        gap: calc(var(--semantic-spacing-3xl) * var(--rem-multiplier, 1rem));
    }

    &.container-gap--4xl > div > div > div.cmp-container {
        gap: calc(var(--semantic-spacing-4xl) * 1rem);
        gap: calc(var(--semantic-spacing-4xl) * var(--rem-multiplier, 1rem));
    }

    &.container-gap--5xl > div > div > div.cmp-container {
        gap: calc(var(--semantic-spacing-5xl) * 1rem);
        gap: calc(var(--semantic-spacing-5xl) * var(--rem-multiplier, 1rem));
    }

    &:not(.container-padding-breakpoint--mobile)&:not(.container-padding-breakpoint--tablet)&:not(.container-padding-breakpoint--desktop) {
        &.container-padding-size--3xs {
            &.container-padding-side--top {
                > div > div {
                    padding-top: calc(var(--semantic-spacing-3xs) * 1rem);
                    padding-top: calc(var(--semantic-spacing-3xs) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-padding-side--bottom {
                > div > div {
                    padding-bottom: calc(var(--semantic-spacing-3xs) * 1rem);
                    padding-bottom: calc(var(--semantic-spacing-3xs) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-padding-side--left {
                > div > div {
                    padding-left: calc(var(--semantic-spacing-3xs) * 1rem);
                    padding-left: calc(var(--semantic-spacing-3xs) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-padding-side--right {
                > div > div {
                    padding-right: calc(var(--semantic-spacing-3xs) * 1rem);
                    padding-right: calc(var(--semantic-spacing-3xs) * var(--rem-multiplier, 1rem));
                }
            }
        }

        &.container-padding-size--2xs {
            &.container-padding-side--top {
                > div > div {
                    padding-top: calc(var(--semantic-spacing-2xs) * 1rem);
                    padding-top: calc(var(--semantic-spacing-2xs) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-padding-side--bottom {
                > div > div {
                    padding-bottom: calc(var(--semantic-spacing-2xs) * 1rem);
                    padding-bottom: calc(var(--semantic-spacing-2xs) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-padding-side--left {
                > div > div {
                    padding-left: calc(var(--semantic-spacing-2xs) * 1rem);
                    padding-left: calc(var(--semantic-spacing-2xs) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-padding-side--right {
                > div > div {
                    padding-right: calc(var(--semantic-spacing-2xs) * 1rem);
                    padding-right: calc(var(--semantic-spacing-2xs) * var(--rem-multiplier, 1rem));
                }
            }
        }

        &.container-padding-size--xs {
            &.container-padding-side--top {
                > div > div {
                    padding-top: calc(var(--semantic-spacing-xs) * 1rem);
                    padding-top: calc(var(--semantic-spacing-xs) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-padding-side--bottom {
                > div > div {
                    padding-bottom: calc(var(--semantic-spacing-xs) * 1rem);
                    padding-bottom: calc(var(--semantic-spacing-xs) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-padding-side--left {
                > div > div {
                    padding-left: calc(var(--semantic-spacing-xs) * 1rem);
                    padding-left: calc(var(--semantic-spacing-xs) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-padding-side--right {
                > div > div {
                    padding-right: calc(var(--semantic-spacing-xs) * 1rem);
                    padding-right: calc(var(--semantic-spacing-xs) * var(--rem-multiplier, 1rem));
                }
            }
        }

        &.container-padding-size--sm {
            &.container-padding-side--top {
                > div > div {
                    padding-top: calc(var(--semantic-spacing-sm) * 1rem);
                    padding-top: calc(var(--semantic-spacing-sm) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-padding-side--bottom {
                > div > div {
                    padding-bottom: calc(var(--semantic-spacing-sm) * 1rem);
                    padding-bottom: calc(var(--semantic-spacing-sm) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-padding-side--left {
                > div > div {
                    padding-left: calc(var(--semantic-spacing-sm) * 1rem);
                    padding-left: calc(var(--semantic-spacing-sm) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-padding-side--right {
                > div > div {
                    padding-right: calc(var(--semantic-spacing-sm) * 1rem);
                    padding-right: calc(var(--semantic-spacing-sm) * var(--rem-multiplier, 1rem));
                }
            }
        }

        &.container-padding-size--md {
            &.container-padding-side--top {
                > div > div {
                    padding-top: calc(var(--semantic-spacing-md) * 1rem);
                    padding-top: calc(var(--semantic-spacing-md) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-padding-side--bottom {
                > div > div {
                    padding-bottom: calc(var(--semantic-spacing-md) * 1rem);
                    padding-bottom: calc(var(--semantic-spacing-md) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-padding-side--left {
                > div > div {
                    padding-left: calc(var(--semantic-spacing-md) * 1rem);
                    padding-left: calc(var(--semantic-spacing-md) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-padding-side--right {
                > div > div {
                    padding-right: calc(var(--semantic-spacing-md) * 1rem);
                    padding-right: calc(var(--semantic-spacing-md) * var(--rem-multiplier, 1rem));
                }
            }
        }

        &.container-padding-size--lg {
            &.container-padding-side--top {
                > div > div {
                    padding-top: calc(var(--semantic-spacing-lg) * 1rem);
                    padding-top: calc(var(--semantic-spacing-lg) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-padding-side--bottom {
                > div > div {
                    padding-bottom: calc(var(--semantic-spacing-lg) * 1rem);
                    padding-bottom: calc(var(--semantic-spacing-lg) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-padding-side--left {
                > div > div {
                    padding-left: calc(var(--semantic-spacing-lg) * 1rem);
                    padding-left: calc(var(--semantic-spacing-lg) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-padding-side--right {
                > div > div {
                    padding-right: calc(var(--semantic-spacing-lg) * 1rem);
                    padding-right: calc(var(--semantic-spacing-lg) * var(--rem-multiplier, 1rem));
                }
            }
        }

        &.container-padding-size--2xl {
            &.container-padding-side--top {
                > div > div {
                    padding-top: calc(var(--semantic-spacing-2xl) * 1rem);
                    padding-top: calc(var(--semantic-spacing-2xl) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-padding-side--bottom {
                > div > div {
                    padding-bottom: calc(var(--semantic-spacing-2xl) * 1rem);
                    padding-bottom: calc(var(--semantic-spacing-2xl) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-padding-side--left {
                > div > div {
                    padding-left: calc(var(--semantic-spacing-2xl) * 1rem);
                    padding-left: calc(var(--semantic-spacing-2xl) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-padding-side--right {
                > div > div {
                    padding-right: calc(var(--semantic-spacing-2xl) * 1rem);
                    padding-right: calc(var(--semantic-spacing-2xl) * var(--rem-multiplier, 1rem));
                }
            }
        }

        &.container-padding-size--3xl {
            &.container-padding-side--top {
                > div > div {
                    padding-top: calc(var(--semantic-spacing-3xl) * 1rem);
                    padding-top: calc(var(--semantic-spacing-3xl) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-padding-side--bottom {
                > div > div {
                    padding-bottom: calc(var(--semantic-spacing-3xl) * 1rem);
                    padding-bottom: calc(var(--semantic-spacing-3xl) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-padding-side--left {
                > div > div {
                    padding-left: calc(var(--semantic-spacing-3xl) * 1rem);
                    padding-left: calc(var(--semantic-spacing-3xl) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-padding-side--right {
                > div > div {
                    padding-right: calc(var(--semantic-spacing-3xl) * 1rem);
                    padding-right: calc(var(--semantic-spacing-3xl) * var(--rem-multiplier, 1rem));
                }
            }
        }

        &.container-padding-size--4xl {
            &.container-padding-side--top {
                > div > div {
                    padding-top: calc(var(--semantic-spacing-4xl) * 1rem);
                    padding-top: calc(var(--semantic-spacing-4xl) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-padding-side--bottom {
                > div > div {
                    padding-bottom: calc(var(--semantic-spacing-4xl) * 1rem);
                    padding-bottom: calc(var(--semantic-spacing-4xl) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-padding-side--left {
                > div > div {
                    padding-left: calc(var(--semantic-spacing-4xl) * 1rem);
                    padding-left: calc(var(--semantic-spacing-4xl) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-padding-side--right {
                > div > div {
                    padding-right: calc(var(--semantic-spacing-4xl) * 1rem);
                    padding-right: calc(var(--semantic-spacing-4xl) * var(--rem-multiplier, 1rem));
                }
            }
        }

        &.container-padding-size--5xl {
            &.container-padding-side--top {
                > div > div {
                    padding-top: calc(var(--semantic-spacing-5xl) * 1rem);
                    padding-top: calc(var(--semantic-spacing-5xl) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-padding-side--bottom {
                > div > div {
                    padding-bottom: calc(var(--semantic-spacing-5xl) * 1rem);
                    padding-bottom: calc(var(--semantic-spacing-5xl) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-padding-side--left {
                > div > div {
                    padding-left: calc(var(--semantic-spacing-5xl) * 1rem);
                    padding-left: calc(var(--semantic-spacing-5xl) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-padding-side--right {
                > div > div {
                    padding-right: calc(var(--semantic-spacing-5xl) * 1rem);
                    padding-right: calc(var(--semantic-spacing-5xl) * var(--rem-multiplier, 1rem));
                }
            }
        }
    }

    &:not(.container-margin-breakpoint--mobile)&:not(.container-margin-breakpoint--tablet)&:not(.container-margin-breakpoint--desktop) {
        &.container-margin-size--3xs {
            &.container-margin-side--top {
                margin-top: calc(var(--semantic-spacing-3xs) * 1rem);
                margin-top: calc(var(--semantic-spacing-3xs) * var(--rem-multiplier, 1rem));
            }

            &.container-margin-side--bottom {
                margin-bottom: calc(var(--semantic-spacing-3xs) * 1rem);
                margin-bottom: calc(var(--semantic-spacing-3xs) * var(--rem-multiplier, 1rem));
            }

            &.container-margin-side--left {
                margin-left: calc(var(--semantic-spacing-3xs) * 1rem);
                margin-left: calc(var(--semantic-spacing-3xs) * var(--rem-multiplier, 1rem));
            }

            &.container-margin-side--right {
                margin-right: calc(var(--semantic-spacing-3xs) * 1rem);
                margin-right: calc(var(--semantic-spacing-3xs) * var(--rem-multiplier, 1rem));
            }
        }

        &.container-margin-size--2xs {
            &.container-margin-side--top {
                margin-top: calc(var(--semantic-spacing-2xs) * 1rem);
                margin-top: calc(var(--semantic-spacing-2xs) * var(--rem-multiplier, 1rem));
            }

            &.container-margin-side--bottom {
                margin-bottom: calc(var(--semantic-spacing-2xs) * 1rem);
                margin-bottom: calc(var(--semantic-spacing-2xs) * var(--rem-multiplier, 1rem));
            }

            &.container-margin-side--left {
                margin-left: calc(var(--semantic-spacing-2xs) * 1rem);
                margin-left: calc(var(--semantic-spacing-2xs) * var(--rem-multiplier, 1rem));
            }

            &.container-margin-side--right {
                margin-right: calc(var(--semantic-spacing-2xs) * 1rem);
                margin-right: calc(var(--semantic-spacing-2xs) * var(--rem-multiplier, 1rem));
            }
        }

        &.container-margin-size--xs {
            &.container-margin-side--top {
                margin-top: calc(var(--semantic-spacing-xs) * 1rem);
                margin-top: calc(var(--semantic-spacing-xs) * var(--rem-multiplier, 1rem));
            }

            &.container-margin-side--bottom {
                margin-bottom: calc(var(--semantic-spacing-xs) * 1rem);
                margin-bottom: calc(var(--semantic-spacing-xs) * var(--rem-multiplier, 1rem));
            }

            &.container-margin-side--left {
                margin-left: calc(var(--semantic-spacing-xs) * 1rem);
                margin-left: calc(var(--semantic-spacing-xs) * var(--rem-multiplier, 1rem));
            }

            &.container-margin-side--right {
                margin-right: calc(var(--semantic-spacing-xs) * 1rem);
                margin-right: calc(var(--semantic-spacing-xs) * var(--rem-multiplier, 1rem));
            }
        }

        &.container-margin-size--sm {
            &.container-margin-side--top {
                margin-top: calc(var(--semantic-spacing-sm) * 1rem);
                margin-top: calc(var(--semantic-spacing-sm) * var(--rem-multiplier, 1rem));
            }

            &.container-margin-side--bottom {
                margin-bottom: calc(var(--semantic-spacing-sm) * 1rem);
                margin-bottom: calc(var(--semantic-spacing-sm) * var(--rem-multiplier, 1rem));
            }

            &.container-margin-side--left {
                margin-left: calc(var(--semantic-spacing-sm) * 1rem);
                margin-left: calc(var(--semantic-spacing-sm) * var(--rem-multiplier, 1rem));
            }

            &.container-margin-side--right {
                margin-right: calc(var(--semantic-spacing-sm) * 1rem);
                margin-right: calc(var(--semantic-spacing-sm) * var(--rem-multiplier, 1rem));
            }
        }

        &.container-margin-size--md {
            &.container-margin-side--top {
                margin-top: calc(var(--semantic-spacing-md) * 1rem);
                margin-top: calc(var(--semantic-spacing-md) * var(--rem-multiplier, 1rem));
            }

            &.container-margin-side--bottom {
                margin-bottom: calc(var(--semantic-spacing-md) * 1rem);
                margin-bottom: calc(var(--semantic-spacing-md) * var(--rem-multiplier, 1rem));
            }

            &.container-margin-side--left {
                margin-left: calc(var(--semantic-spacing-md) * 1rem);
                margin-left: calc(var(--semantic-spacing-md) * var(--rem-multiplier, 1rem));
            }

            &.container-margin-side--right {
                margin-right: calc(var(--semantic-spacing-md) * 1rem);
                margin-right: calc(var(--semantic-spacing-md) * var(--rem-multiplier, 1rem));
            }
        }

        &.container-margin-size--lg {
            &.container-margin-side--top {
                margin-top: calc(var(--semantic-spacing-lg) * 1rem);
                margin-top: calc(var(--semantic-spacing-lg) * var(--rem-multiplier, 1rem));
            }

            &.container-margin-side--bottom {
                margin-bottom: calc(var(--semantic-spacing-lg) * 1rem);
                margin-bottom: calc(var(--semantic-spacing-lg) * var(--rem-multiplier, 1rem));
            }

            &.container-margin-side--left {
                margin-left: calc(var(--semantic-spacing-lg) * 1rem);
                margin-left: calc(var(--semantic-spacing-lg) * var(--rem-multiplier, 1rem));
            }

            &.container-margin-side--right {
                margin-right: calc(var(--semantic-spacing-lg) * 1rem);
                margin-right: calc(var(--semantic-spacing-lg) * var(--rem-multiplier, 1rem));
            }
        }

        &.container-margin-size--2xl {
            &.container-margin-side--top {
                margin-top: calc(var(--semantic-spacing-2xl) * 1rem);
                margin-top: calc(var(--semantic-spacing-2xl) * var(--rem-multiplier, 1rem));
            }

            &.container-margin-side--bottom {
                margin-bottom: calc(var(--semantic-spacing-2xl) * 1rem);
                margin-bottom: calc(var(--semantic-spacing-2xl) * var(--rem-multiplier, 1rem));
            }

            &.container-margin-side--left {
                margin-left: calc(var(--semantic-spacing-2xl) * 1rem);
                margin-left: calc(var(--semantic-spacing-2xl) * var(--rem-multiplier, 1rem));
            }

            &.container-margin-side--right {
                margin-right: calc(var(--semantic-spacing-2xl) * 1rem);
                margin-right: calc(var(--semantic-spacing-2xl) * var(--rem-multiplier, 1rem));
            }
        }

        &.container-margin-size--3xl {
            &.container-margin-side--top {
                margin-top: calc(var(--semantic-spacing-3xl) * 1rem);
                margin-top: calc(var(--semantic-spacing-3xl) * var(--rem-multiplier, 1rem));
            }

            &.container-margin-side--bottom {
                margin-bottom: calc(var(--semantic-spacing-3xl) * 1rem);
                margin-bottom: calc(var(--semantic-spacing-3xl) * var(--rem-multiplier, 1rem));
            }

            &.container-margin-side--left {
                margin-left: calc(var(--semantic-spacing-3xl) * 1rem);
                margin-left: calc(var(--semantic-spacing-3xl) * var(--rem-multiplier, 1rem));
            }

            &.container-margin-side--right {
                margin-right: calc(var(--semantic-spacing-3xl) * 1rem);
                margin-right: calc(var(--semantic-spacing-3xl) * var(--rem-multiplier, 1rem));
            }
        }

        &.container-margin-size--4xl {
            &.container-margin-side--top {
                margin-top: calc(var(--semantic-spacing-4xl) * 1rem);
                margin-top: calc(var(--semantic-spacing-4xl) * var(--rem-multiplier, 1rem));
            }

            &.container-margin-side--bottom {
                margin-bottom: calc(var(--semantic-spacing-4xl) * 1rem);
                margin-bottom: calc(var(--semantic-spacing-4xl) * var(--rem-multiplier, 1rem));
            }

            &.container-margin-side--left {
                margin-left: calc(var(--semantic-spacing-4xl) * 1rem);
                margin-left: calc(var(--semantic-spacing-4xl) * var(--rem-multiplier, 1rem));
            }

            &.container-margin-side--right {
                margin-right: calc(var(--semantic-spacing-4xl) * 1rem);
                margin-right: calc(var(--semantic-spacing-4xl) * var(--rem-multiplier, 1rem));
            }
        }

        &.container-margin-size--5xl {
            &.container-margin-side--top {
                margin-top: calc(var(--semantic-spacing-5xl) * 1rem);
                margin-top: calc(var(--semantic-spacing-5xl) * var(--rem-multiplier, 1rem));
            }

            &.container-margin-side--bottom {
                margin-bottom: calc(var(--semantic-spacing-5xl) * 1rem);
                margin-bottom: calc(var(--semantic-spacing-5xl) * var(--rem-multiplier, 1rem));
            }

            &.container-margin-side--left {
                margin-left: calc(var(--semantic-spacing-5xl) * 1rem);
                margin-left: calc(var(--semantic-spacing-5xl) * var(--rem-multiplier, 1rem));
            }

            &.container-margin-side--right {
                margin-right: calc(var(--semantic-spacing-5xl) * 1rem);
                margin-right: calc(var(--semantic-spacing-5xl) * var(--rem-multiplier, 1rem));
            }
        }
    }

    @media only screen and (min-width: 36em) {
        &.container-padding-breakpoint--mobile {
            &.container-padding-size--3xs {
                &.container-padding-side--top {
                    > div > div {
                        padding-top: calc(var(--semantic-spacing-3xs) * 1rem);
                        padding-top: calc(var(--semantic-spacing-3xs) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--bottom {
                    > div > div {
                        padding-bottom: calc(var(--semantic-spacing-3xs) * 1rem);
                        padding-bottom: calc(var(--semantic-spacing-3xs) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--left {
                    > div > div {
                        padding-left: calc(var(--semantic-spacing-3xs) * 1rem);
                        padding-left: calc(var(--semantic-spacing-3xs) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--right {
                    > div > div {
                        padding-right: calc(var(--semantic-spacing-3xs) * 1rem);
                        padding-right: calc(var(--semantic-spacing-3xs) * var(--rem-multiplier, 1rem));
                    }
                }
            }

            &.container-padding-size--2xs {
                &.container-padding-side--top {
                    > div > div {
                        padding-top: calc(var(--semantic-spacing-2xs) * 1rem);
                        padding-top: calc(var(--semantic-spacing-2xs) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--bottom {
                    > div > div {
                        padding-bottom: calc(var(--semantic-spacing-2xs) * 1rem);
                        padding-bottom: calc(var(--semantic-spacing-2xs) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--left {
                    > div > div {
                        padding-left: calc(var(--semantic-spacing-2xs) * 1rem);
                        padding-left: calc(var(--semantic-spacing-2xs) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--right {
                    > div > div {
                        padding-right: calc(var(--semantic-spacing-2xs) * 1rem);
                        padding-right: calc(var(--semantic-spacing-2xs) * var(--rem-multiplier, 1rem));
                    }
                }
            }

            &.container-padding-size--xs {
                &.container-padding-side--top {
                    > div > div {
                        padding-top: calc(var(--semantic-spacing-xs) * 1rem);
                        padding-top: calc(var(--semantic-spacing-xs) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--bottom {
                    > div > div {
                        padding-bottom: calc(var(--semantic-spacing-xs) * 1rem);
                        padding-bottom: calc(var(--semantic-spacing-xs) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--left {
                    > div > div {
                        padding-left: calc(var(--semantic-spacing-xs) * 1rem);
                        padding-left: calc(var(--semantic-spacing-xs) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--right {
                    > div > div {
                        padding-right: calc(var(--semantic-spacing-xs) * 1rem);
                        padding-right: calc(var(--semantic-spacing-xs) * var(--rem-multiplier, 1rem));
                    }
                }
            }

            &.container-padding-size--sm {
                &.container-padding-side--top {
                    > div > div {
                        padding-top: calc(var(--semantic-spacing-sm) * 1rem);
                        padding-top: calc(var(--semantic-spacing-sm) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--bottom {
                    > div > div {
                        padding-bottom: calc(var(--semantic-spacing-sm) * 1rem);
                        padding-bottom: calc(var(--semantic-spacing-sm) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--left {
                    > div > div {
                        padding-left: calc(var(--semantic-spacing-sm) * 1rem);
                        padding-left: calc(var(--semantic-spacing-sm) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--right {
                    > div > div {
                        padding-right: calc(var(--semantic-spacing-sm) * 1rem);
                        padding-right: calc(var(--semantic-spacing-sm) * var(--rem-multiplier, 1rem));
                    }
                }
            }

            &.container-padding-size--md {
                &.container-padding-side--top {
                    > div > div {
                        padding-top: calc(var(--semantic-spacing-md) * 1rem);
                        padding-top: calc(var(--semantic-spacing-md) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--bottom {
                    > div > div {
                        padding-bottom: calc(var(--semantic-spacing-md) * 1rem);
                        padding-bottom: calc(var(--semantic-spacing-md) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--left {
                    > div > div {
                        padding-left: calc(var(--semantic-spacing-md) * 1rem);
                        padding-left: calc(var(--semantic-spacing-md) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--right {
                    > div > div {
                        padding-right: calc(var(--semantic-spacing-md) * 1rem);
                        padding-right: calc(var(--semantic-spacing-md) * var(--rem-multiplier, 1rem));
                    }
                }
            }

            &.container-padding-size--lg {
                &.container-padding-side--top {
                    > div > div {
                        padding-top: calc(var(--semantic-spacing-lg) * 1rem);
                        padding-top: calc(var(--semantic-spacing-lg) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--bottom {
                    > div > div {
                        padding-bottom: calc(var(--semantic-spacing-lg) * 1rem);
                        padding-bottom: calc(var(--semantic-spacing-lg) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--left {
                    > div > div {
                        padding-left: calc(var(--semantic-spacing-lg) * 1rem);
                        padding-left: calc(var(--semantic-spacing-lg) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--right {
                    > div > div {
                        padding-right: calc(var(--semantic-spacing-lg) * 1rem);
                        padding-right: calc(var(--semantic-spacing-lg) * var(--rem-multiplier, 1rem));
                    }
                }
            }

            &.container-padding-size--2xl {
                &.container-padding-side--top {
                    > div > div {
                        padding-top: calc(var(--semantic-spacing-2xl) * 1rem);
                        padding-top: calc(var(--semantic-spacing-2xl) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--bottom {
                    > div > div {
                        padding-bottom: calc(var(--semantic-spacing-2xl) * 1rem);
                        padding-bottom: calc(var(--semantic-spacing-2xl) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--left {
                    > div > div {
                        padding-left: calc(var(--semantic-spacing-2xl) * 1rem);
                        padding-left: calc(var(--semantic-spacing-2xl) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--right {
                    > div > div {
                        padding-right: calc(var(--semantic-spacing-2xl) * 1rem);
                        padding-right: calc(var(--semantic-spacing-2xl) * var(--rem-multiplier, 1rem));
                    }
                }
            }

            &.container-padding-size--3xl {
                &.container-padding-side--top {
                    > div > div {
                        padding-top: calc(var(--semantic-spacing-3xl) * 1rem);
                        padding-top: calc(var(--semantic-spacing-3xl) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--bottom {
                    > div > div {
                        padding-bottom: calc(var(--semantic-spacing-3xl) * 1rem);
                        padding-bottom: calc(var(--semantic-spacing-3xl) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--left {
                    > div > div {
                        padding-left: calc(var(--semantic-spacing-3xl) * 1rem);
                        padding-left: calc(var(--semantic-spacing-3xl) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--right {
                    > div > div {
                        padding-right: calc(var(--semantic-spacing-3xl) * 1rem);
                        padding-right: calc(var(--semantic-spacing-3xl) * var(--rem-multiplier, 1rem));
                    }
                }
            }

            &.container-padding-size--4xl {
                &.container-padding-side--top {
                    > div > div {
                        padding-top: calc(var(--semantic-spacing-4xl) * 1rem);
                        padding-top: calc(var(--semantic-spacing-4xl) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--bottom {
                    > div > div {
                        padding-bottom: calc(var(--semantic-spacing-4xl) * 1rem);
                        padding-bottom: calc(var(--semantic-spacing-4xl) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--left {
                    > div > div {
                        padding-left: calc(var(--semantic-spacing-4xl) * 1rem);
                        padding-left: calc(var(--semantic-spacing-4xl) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--right {
                    > div > div {
                        padding-right: calc(var(--semantic-spacing-4xl) * 1rem);
                        padding-right: calc(var(--semantic-spacing-4xl) * var(--rem-multiplier, 1rem));
                    }
                }
            }

            &.container-padding-size--5xl {
                &.container-padding-side--top {
                    > div > div {
                        padding-top: calc(var(--semantic-spacing-5xl) * 1rem);
                        padding-top: calc(var(--semantic-spacing-5xl) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--bottom {
                    > div > div {
                        padding-bottom: calc(var(--semantic-spacing-5xl) * 1rem);
                        padding-bottom: calc(var(--semantic-spacing-5xl) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--left {
                    > div > div {
                        padding-left: calc(var(--semantic-spacing-5xl) * 1rem);
                        padding-left: calc(var(--semantic-spacing-5xl) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--right {
                    > div > div {
                        padding-right: calc(var(--semantic-spacing-5xl) * 1rem);
                        padding-right: calc(var(--semantic-spacing-5xl) * var(--rem-multiplier, 1rem));
                    }
                }
            }
        }

        &.container-margin-breakpoint--mobile {
            &.container-margin-size--3xs {
                &.container-margin-side--top {
                    margin-top: calc(var(--semantic-spacing-3xs) * 1rem);
                    margin-top: calc(var(--semantic-spacing-3xs) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--bottom {
                    margin-bottom: calc(var(--semantic-spacing-3xs) * 1rem);
                    margin-bottom: calc(var(--semantic-spacing-3xs) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--left {
                    margin-left: calc(var(--semantic-spacing-3xs) * 1rem);
                    margin-left: calc(var(--semantic-spacing-3xs) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--right {
                    margin-right: calc(var(--semantic-spacing-3xs) * 1rem);
                    margin-right: calc(var(--semantic-spacing-3xs) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-margin-size--2xs {
                &.container-margin-side--top {
                    margin-top: calc(var(--semantic-spacing-2xs) * 1rem);
                    margin-top: calc(var(--semantic-spacing-2xs) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--bottom {
                    margin-bottom: calc(var(--semantic-spacing-2xs) * 1rem);
                    margin-bottom: calc(var(--semantic-spacing-2xs) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--left {
                    margin-left: calc(var(--semantic-spacing-2xs) * 1rem);
                    margin-left: calc(var(--semantic-spacing-2xs) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--right {
                    margin-right: calc(var(--semantic-spacing-2xs) * 1rem);
                    margin-right: calc(var(--semantic-spacing-2xs) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-margin-size--xs {
                &.container-margin-side--top {
                    margin-top: calc(var(--semantic-spacing-xs) * 1rem);
                    margin-top: calc(var(--semantic-spacing-xs) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--bottom {
                    margin-bottom: calc(var(--semantic-spacing-xs) * 1rem);
                    margin-bottom: calc(var(--semantic-spacing-xs) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--left {
                    margin-left: calc(var(--semantic-spacing-xs) * 1rem);
                    margin-left: calc(var(--semantic-spacing-xs) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--right {
                    margin-right: calc(var(--semantic-spacing-xs) * 1rem);
                    margin-right: calc(var(--semantic-spacing-xs) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-margin-size--sm {
                &.container-margin-side--top {
                    margin-top: calc(var(--semantic-spacing-sm) * 1rem);
                    margin-top: calc(var(--semantic-spacing-sm) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--bottom {
                    margin-bottom: calc(var(--semantic-spacing-sm) * 1rem);
                    margin-bottom: calc(var(--semantic-spacing-sm) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--left {
                    margin-left: calc(var(--semantic-spacing-sm) * 1rem);
                    margin-left: calc(var(--semantic-spacing-sm) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--right {
                    margin-right: calc(var(--semantic-spacing-sm) * 1rem);
                    margin-right: calc(var(--semantic-spacing-sm) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-margin-size--md {
                &.container-margin-side--top {
                    margin-top: calc(var(--semantic-spacing-md) * 1rem);
                    margin-top: calc(var(--semantic-spacing-md) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--bottom {
                    margin-bottom: calc(var(--semantic-spacing-md) * 1rem);
                    margin-bottom: calc(var(--semantic-spacing-md) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--left {
                    margin-left: calc(var(--semantic-spacing-md) * 1rem);
                    margin-left: calc(var(--semantic-spacing-md) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--right {
                    margin-right: calc(var(--semantic-spacing-md) * 1rem);
                    margin-right: calc(var(--semantic-spacing-md) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-margin-size--lg {
                &.container-margin-side--top {
                    margin-top: calc(var(--semantic-spacing-lg) * 1rem);
                    margin-top: calc(var(--semantic-spacing-lg) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--bottom {
                    margin-bottom: calc(var(--semantic-spacing-lg) * 1rem);
                    margin-bottom: calc(var(--semantic-spacing-lg) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--left {
                    margin-left: calc(var(--semantic-spacing-lg) * 1rem);
                    margin-left: calc(var(--semantic-spacing-lg) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--right {
                    margin-right: calc(var(--semantic-spacing-lg) * 1rem);
                    margin-right: calc(var(--semantic-spacing-lg) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-margin-size--2xl {
                &.container-margin-side--top {
                    margin-top: calc(var(--semantic-spacing-2xl) * 1rem);
                    margin-top: calc(var(--semantic-spacing-2xl) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--bottom {
                    margin-bottom: calc(var(--semantic-spacing-2xl) * 1rem);
                    margin-bottom: calc(var(--semantic-spacing-2xl) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--left {
                    margin-left: calc(var(--semantic-spacing-2xl) * 1rem);
                    margin-left: calc(var(--semantic-spacing-2xl) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--right {
                    margin-right: calc(var(--semantic-spacing-2xl) * 1rem);
                    margin-right: calc(var(--semantic-spacing-2xl) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-margin-size--3xl {
                &.container-margin-side--top {
                    margin-top: calc(var(--semantic-spacing-3xl) * 1rem);
                    margin-top: calc(var(--semantic-spacing-3xl) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--bottom {
                    margin-bottom: calc(var(--semantic-spacing-3xl) * 1rem);
                    margin-bottom: calc(var(--semantic-spacing-3xl) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--left {
                    margin-left: calc(var(--semantic-spacing-3xl) * 1rem);
                    margin-left: calc(var(--semantic-spacing-3xl) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--right {
                    margin-right: calc(var(--semantic-spacing-3xl) * 1rem);
                    margin-right: calc(var(--semantic-spacing-3xl) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-margin-size--4xl {
                &.container-margin-side--top {
                    margin-top: calc(var(--semantic-spacing-4xl) * 1rem);
                    margin-top: calc(var(--semantic-spacing-4xl) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--bottom {
                    margin-bottom: calc(var(--semantic-spacing-4xl) * 1rem);
                    margin-bottom: calc(var(--semantic-spacing-4xl) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--left {
                    margin-left: calc(var(--semantic-spacing-4xl) * 1rem);
                    margin-left: calc(var(--semantic-spacing-4xl) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--right {
                    margin-right: calc(var(--semantic-spacing-4xl) * 1rem);
                    margin-right: calc(var(--semantic-spacing-4xl) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-margin-size--5xl {
                &.container-margin-side--top {
                    margin-top: calc(var(--semantic-spacing-5xl) * 1rem);
                    margin-top: calc(var(--semantic-spacing-5xl) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--bottom {
                    margin-bottom: calc(var(--semantic-spacing-5xl) * 1rem);
                    margin-bottom: calc(var(--semantic-spacing-5xl) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--left {
                    margin-left: calc(var(--semantic-spacing-5xl) * 1rem);
                    margin-left: calc(var(--semantic-spacing-5xl) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--right {
                    margin-right: calc(var(--semantic-spacing-5xl) * 1rem);
                    margin-right: calc(var(--semantic-spacing-5xl) * var(--rem-multiplier, 1rem));
                }
            }
        }
    }

    @media only screen and (min-width: 48.0625em) {
        &.container-padding-breakpoint--tablet {
            &.container-padding-size--3xs {
                &.container-padding-side--top {
                    > div > div {
                        padding-top: calc(var(--semantic-spacing-3xs) * 1rem);
                        padding-top: calc(var(--semantic-spacing-3xs) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--bottom {
                    > div > div {
                        padding-bottom: calc(var(--semantic-spacing-3xs) * 1rem);
                        padding-bottom: calc(var(--semantic-spacing-3xs) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--left {
                    > div > div {
                        padding-left: calc(var(--semantic-spacing-3xs) * 1rem);
                        padding-left: calc(var(--semantic-spacing-3xs) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--right {
                    > div > div {
                        padding-right: calc(var(--semantic-spacing-3xs) * 1rem);
                        padding-right: calc(var(--semantic-spacing-3xs) * var(--rem-multiplier, 1rem));
                    }
                }
            }

            &.container-padding-size--2xs {
                &.container-padding-side--top {
                    > div > div {
                        padding-top: calc(var(--semantic-spacing-2xs) * 1rem);
                        padding-top: calc(var(--semantic-spacing-2xs) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--bottom {
                    > div > div {
                        padding-bottom: calc(var(--semantic-spacing-2xs) * 1rem);
                        padding-bottom: calc(var(--semantic-spacing-2xs) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--left {
                    > div > div {
                        padding-left: calc(var(--semantic-spacing-2xs) * 1rem);
                        padding-left: calc(var(--semantic-spacing-2xs) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--right {
                    > div > div {
                        padding-right: calc(var(--semantic-spacing-2xs) * 1rem);
                        padding-right: calc(var(--semantic-spacing-2xs) * var(--rem-multiplier, 1rem));
                    }
                }
            }

            &.container-padding-size--xs {
                &.container-padding-side--top {
                    > div > div {
                        padding-top: calc(var(--semantic-spacing-xs) * 1rem);
                        padding-top: calc(var(--semantic-spacing-xs) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--bottom {
                    > div > div {
                        padding-bottom: calc(var(--semantic-spacing-xs) * 1rem);
                        padding-bottom: calc(var(--semantic-spacing-xs) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--left {
                    > div > div {
                        padding-left: calc(var(--semantic-spacing-xs) * 1rem);
                        padding-left: calc(var(--semantic-spacing-xs) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--right {
                    > div > div {
                        padding-right: calc(var(--semantic-spacing-xs) * 1rem);
                        padding-right: calc(var(--semantic-spacing-xs) * var(--rem-multiplier, 1rem));
                    }
                }
            }

            &.container-padding-size--sm {
                &.container-padding-side--top {
                    > div > div {
                        padding-top: calc(var(--semantic-spacing-sm) * 1rem);
                        padding-top: calc(var(--semantic-spacing-sm) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--bottom {
                    > div > div {
                        padding-bottom: calc(var(--semantic-spacing-sm) * 1rem);
                        padding-bottom: calc(var(--semantic-spacing-sm) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--left {
                    > div > div {
                        padding-left: calc(var(--semantic-spacing-sm) * 1rem);
                        padding-left: calc(var(--semantic-spacing-sm) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--right {
                    > div > div {
                        padding-right: calc(var(--semantic-spacing-sm) * 1rem);
                        padding-right: calc(var(--semantic-spacing-sm) * var(--rem-multiplier, 1rem));
                    }
                }
            }

            &.container-padding-size--md {
                &.container-padding-side--top {
                    > div > div {
                        padding-top: calc(var(--semantic-spacing-md) * 1rem);
                        padding-top: calc(var(--semantic-spacing-md) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--bottom {
                    > div > div {
                        padding-bottom: calc(var(--semantic-spacing-md) * 1rem);
                        padding-bottom: calc(var(--semantic-spacing-md) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--left {
                    > div > div {
                        padding-left: calc(var(--semantic-spacing-md) * 1rem);
                        padding-left: calc(var(--semantic-spacing-md) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--right {
                    > div > div {
                        padding-right: calc(var(--semantic-spacing-md) * 1rem);
                        padding-right: calc(var(--semantic-spacing-md) * var(--rem-multiplier, 1rem));
                    }
                }
            }

            &.container-padding-size--lg {
                &.container-padding-side--top {
                    > div > div {
                        padding-top: calc(var(--semantic-spacing-lg) * 1rem);
                        padding-top: calc(var(--semantic-spacing-lg) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--bottom {
                    > div > div {
                        padding-bottom: calc(var(--semantic-spacing-lg) * 1rem);
                        padding-bottom: calc(var(--semantic-spacing-lg) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--left {
                    > div > div {
                        padding-left: calc(var(--semantic-spacing-lg) * 1rem);
                        padding-left: calc(var(--semantic-spacing-lg) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--right {
                    > div > div {
                        padding-right: calc(var(--semantic-spacing-lg) * 1rem);
                        padding-right: calc(var(--semantic-spacing-lg) * var(--rem-multiplier, 1rem));
                    }
                }
            }

            &.container-padding-size--2xl {
                &.container-padding-side--top {
                    > div > div {
                        padding-top: calc(var(--semantic-spacing-2xl) * 1rem);
                        padding-top: calc(var(--semantic-spacing-2xl) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--bottom {
                    > div > div {
                        padding-bottom: calc(var(--semantic-spacing-2xl) * 1rem);
                        padding-bottom: calc(var(--semantic-spacing-2xl) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--left {
                    > div > div {
                        padding-left: calc(var(--semantic-spacing-2xl) * 1rem);
                        padding-left: calc(var(--semantic-spacing-2xl) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--right {
                    > div > div {
                        padding-right: calc(var(--semantic-spacing-2xl) * 1rem);
                        padding-right: calc(var(--semantic-spacing-2xl) * var(--rem-multiplier, 1rem));
                    }
                }
            }

            &.container-padding-size--3xl {
                &.container-padding-side--top {
                    > div > div {
                        padding-top: calc(var(--semantic-spacing-3xl) * 1rem);
                        padding-top: calc(var(--semantic-spacing-3xl) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--bottom {
                    > div > div {
                        padding-bottom: calc(var(--semantic-spacing-3xl) * 1rem);
                        padding-bottom: calc(var(--semantic-spacing-3xl) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--left {
                    > div > div {
                        padding-left: calc(var(--semantic-spacing-3xl) * 1rem);
                        padding-left: calc(var(--semantic-spacing-3xl) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--right {
                    > div > div {
                        padding-right: calc(var(--semantic-spacing-3xl) * 1rem);
                        padding-right: calc(var(--semantic-spacing-3xl) * var(--rem-multiplier, 1rem));
                    }
                }
            }

            &.container-padding-size--4xl {
                &.container-padding-side--top {
                    > div > div {
                        padding-top: calc(var(--semantic-spacing-4xl) * 1rem);
                        padding-top: calc(var(--semantic-spacing-4xl) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--bottom {
                    > div > div {
                        padding-bottom: calc(var(--semantic-spacing-4xl) * 1rem);
                        padding-bottom: calc(var(--semantic-spacing-4xl) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--left {
                    > div > div {
                        padding-left: calc(var(--semantic-spacing-4xl) * 1rem);
                        padding-left: calc(var(--semantic-spacing-4xl) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--right {
                    > div > div {
                        padding-right: calc(var(--semantic-spacing-4xl) * 1rem);
                        padding-right: calc(var(--semantic-spacing-4xl) * var(--rem-multiplier, 1rem));
                    }
                }
            }

            &.container-padding-size--5xl {
                &.container-padding-side--top {
                    > div > div {
                        padding-top: calc(var(--semantic-spacing-5xl) * 1rem);
                        padding-top: calc(var(--semantic-spacing-5xl) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--bottom {
                    > div > div {
                        padding-bottom: calc(var(--semantic-spacing-5xl) * 1rem);
                        padding-bottom: calc(var(--semantic-spacing-5xl) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--left {
                    > div > div {
                        padding-left: calc(var(--semantic-spacing-5xl) * 1rem);
                        padding-left: calc(var(--semantic-spacing-5xl) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--right {
                    > div > div {
                        padding-right: calc(var(--semantic-spacing-5xl) * 1rem);
                        padding-right: calc(var(--semantic-spacing-5xl) * var(--rem-multiplier, 1rem));
                    }
                }
            }
        }

        &.container-margin-breakpoint--tablet {
            &.container-margin-size--3xs {
                &.container-margin-side--top {
                    margin-top: calc(var(--semantic-spacing-3xs) * 1rem);
                    margin-top: calc(var(--semantic-spacing-3xs) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--bottom {
                    margin-bottom: calc(var(--semantic-spacing-3xs) * 1rem);
                    margin-bottom: calc(var(--semantic-spacing-3xs) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--left {
                    margin-left: calc(var(--semantic-spacing-3xs) * 1rem);
                    margin-left: calc(var(--semantic-spacing-3xs) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--right {
                    margin-right: calc(var(--semantic-spacing-3xs) * 1rem);
                    margin-right: calc(var(--semantic-spacing-3xs) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-margin-size--2xs {
                &.container-margin-side--top {
                    margin-top: calc(var(--semantic-spacing-2xs) * 1rem);
                    margin-top: calc(var(--semantic-spacing-2xs) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--bottom {
                    margin-bottom: calc(var(--semantic-spacing-2xs) * 1rem);
                    margin-bottom: calc(var(--semantic-spacing-2xs) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--left {
                    margin-left: calc(var(--semantic-spacing-2xs) * 1rem);
                    margin-left: calc(var(--semantic-spacing-2xs) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--right {
                    margin-right: calc(var(--semantic-spacing-2xs) * 1rem);
                    margin-right: calc(var(--semantic-spacing-2xs) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-margin-size--xs {
                &.container-margin-side--top {
                    margin-top: calc(var(--semantic-spacing-xs) * 1rem);
                    margin-top: calc(var(--semantic-spacing-xs) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--bottom {
                    margin-bottom: calc(var(--semantic-spacing-xs) * 1rem);
                    margin-bottom: calc(var(--semantic-spacing-xs) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--left {
                    margin-left: calc(var(--semantic-spacing-xs) * 1rem);
                    margin-left: calc(var(--semantic-spacing-xs) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--right {
                    margin-right: calc(var(--semantic-spacing-xs) * 1rem);
                    margin-right: calc(var(--semantic-spacing-xs) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-margin-size--sm {
                &.container-margin-side--top {
                    margin-top: calc(var(--semantic-spacing-sm) * 1rem);
                    margin-top: calc(var(--semantic-spacing-sm) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--bottom {
                    margin-bottom: calc(var(--semantic-spacing-sm) * 1rem);
                    margin-bottom: calc(var(--semantic-spacing-sm) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--left {
                    margin-left: calc(var(--semantic-spacing-sm) * 1rem);
                    margin-left: calc(var(--semantic-spacing-sm) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--right {
                    margin-right: calc(var(--semantic-spacing-sm) * 1rem);
                    margin-right: calc(var(--semantic-spacing-sm) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-margin-size--md {
                &.container-margin-side--top {
                    margin-top: calc(var(--semantic-spacing-md) * 1rem);
                    margin-top: calc(var(--semantic-spacing-md) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--bottom {
                    margin-bottom: calc(var(--semantic-spacing-md) * 1rem);
                    margin-bottom: calc(var(--semantic-spacing-md) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--left {
                    margin-left: calc(var(--semantic-spacing-md) * 1rem);
                    margin-left: calc(var(--semantic-spacing-md) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--right {
                    margin-right: calc(var(--semantic-spacing-md) * 1rem);
                    margin-right: calc(var(--semantic-spacing-md) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-margin-size--lg {
                &.container-margin-side--top {
                    margin-top: calc(var(--semantic-spacing-lg) * 1rem);
                    margin-top: calc(var(--semantic-spacing-lg) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--bottom {
                    margin-bottom: calc(var(--semantic-spacing-lg) * 1rem);
                    margin-bottom: calc(var(--semantic-spacing-lg) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--left {
                    margin-left: calc(var(--semantic-spacing-lg) * 1rem);
                    margin-left: calc(var(--semantic-spacing-lg) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--right {
                    margin-right: calc(var(--semantic-spacing-lg) * 1rem);
                    margin-right: calc(var(--semantic-spacing-lg) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-margin-size--2xl {
                &.container-margin-side--top {
                    margin-top: calc(var(--semantic-spacing-2xl) * 1rem);
                    margin-top: calc(var(--semantic-spacing-2xl) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--bottom {
                    margin-bottom: calc(var(--semantic-spacing-2xl) * 1rem);
                    margin-bottom: calc(var(--semantic-spacing-2xl) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--left {
                    margin-left: calc(var(--semantic-spacing-2xl) * 1rem);
                    margin-left: calc(var(--semantic-spacing-2xl) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--right {
                    margin-right: calc(var(--semantic-spacing-2xl) * 1rem);
                    margin-right: calc(var(--semantic-spacing-2xl) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-margin-size--3xl {
                &.container-margin-side--top {
                    margin-top: calc(var(--semantic-spacing-3xl) * 1rem);
                    margin-top: calc(var(--semantic-spacing-3xl) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--bottom {
                    margin-bottom: calc(var(--semantic-spacing-3xl) * 1rem);
                    margin-bottom: calc(var(--semantic-spacing-3xl) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--left {
                    margin-left: calc(var(--semantic-spacing-3xl) * 1rem);
                    margin-left: calc(var(--semantic-spacing-3xl) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--right {
                    margin-right: calc(var(--semantic-spacing-3xl) * 1rem);
                    margin-right: calc(var(--semantic-spacing-3xl) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-margin-size--4xl {
                &.container-margin-side--top {
                    margin-top: calc(var(--semantic-spacing-4xl) * 1rem);
                    margin-top: calc(var(--semantic-spacing-4xl) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--bottom {
                    margin-bottom: calc(var(--semantic-spacing-4xl) * 1rem);
                    margin-bottom: calc(var(--semantic-spacing-4xl) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--left {
                    margin-left: calc(var(--semantic-spacing-4xl) * 1rem);
                    margin-left: calc(var(--semantic-spacing-4xl) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--right {
                    margin-right: calc(var(--semantic-spacing-4xl) * 1rem);
                    margin-right: calc(var(--semantic-spacing-4xl) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-margin-size--5xl {
                &.container-margin-side--top {
                    margin-top: calc(var(--semantic-spacing-5xl) * 1rem);
                    margin-top: calc(var(--semantic-spacing-5xl) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--bottom {
                    margin-bottom: calc(var(--semantic-spacing-5xl) * 1rem);
                    margin-bottom: calc(var(--semantic-spacing-5xl) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--left {
                    margin-left: calc(var(--semantic-spacing-5xl) * 1rem);
                    margin-left: calc(var(--semantic-spacing-5xl) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--right {
                    margin-right: calc(var(--semantic-spacing-5xl) * 1rem);
                    margin-right: calc(var(--semantic-spacing-5xl) * var(--rem-multiplier, 1rem));
                }
            }
        }
    }

    @media only screen and (min-width: 74.5em) {
        &.container-padding-breakpoint--desktop {
            &.container-padding-size--3xs {
                &.container-padding-side--top {
                    > div > div {
                        padding-top: calc(var(--semantic-spacing-3xs) * 1rem);
                        padding-top: calc(var(--semantic-spacing-3xs) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--bottom {
                    > div > div {
                        padding-bottom: calc(var(--semantic-spacing-3xs) * 1rem);
                        padding-bottom: calc(var(--semantic-spacing-3xs) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--left {
                    > div > div {
                        padding-left: calc(var(--semantic-spacing-3xs) * 1rem);
                        padding-left: calc(var(--semantic-spacing-3xs) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--right {
                    > div > div {
                        padding-right: calc(var(--semantic-spacing-3xs) * 1rem);
                        padding-right: calc(var(--semantic-spacing-3xs) * var(--rem-multiplier, 1rem));
                    }
                }
            }

            &.container-padding-size--2xs {
                &.container-padding-side--top {
                    > div > div {
                        padding-top: calc(var(--semantic-spacing-2xs) * 1rem);
                        padding-top: calc(var(--semantic-spacing-2xs) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--bottom {
                    > div > div {
                        padding-bottom: calc(var(--semantic-spacing-2xs) * 1rem);
                        padding-bottom: calc(var(--semantic-spacing-2xs) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--left {
                    > div > div {
                        padding-left: calc(var(--semantic-spacing-2xs) * 1rem);
                        padding-left: calc(var(--semantic-spacing-2xs) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--right {
                    > div > div {
                        padding-right: calc(var(--semantic-spacing-2xs) * 1rem);
                        padding-right: calc(var(--semantic-spacing-2xs) * var(--rem-multiplier, 1rem));
                    }
                }
            }

            &.container-padding-size--xs {
                &.container-padding-side--top {
                    > div > div {
                        padding-top: calc(var(--semantic-spacing-xs) * 1rem);
                        padding-top: calc(var(--semantic-spacing-xs) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--bottom {
                    > div > div {
                        padding-bottom: calc(var(--semantic-spacing-xs) * 1rem);
                        padding-bottom: calc(var(--semantic-spacing-xs) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--left {
                    > div > div {
                        padding-left: calc(var(--semantic-spacing-xs) * 1rem);
                        padding-left: calc(var(--semantic-spacing-xs) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--right {
                    > div > div {
                        padding-right: calc(var(--semantic-spacing-xs) * 1rem);
                        padding-right: calc(var(--semantic-spacing-xs) * var(--rem-multiplier, 1rem));
                    }
                }
            }

            &.container-padding-size--sm {
                &.container-padding-side--top {
                    > div > div {
                        padding-top: calc(var(--semantic-spacing-sm) * 1rem);
                        padding-top: calc(var(--semantic-spacing-sm) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--bottom {
                    > div > div {
                        padding-bottom: calc(var(--semantic-spacing-sm) * 1rem);
                        padding-bottom: calc(var(--semantic-spacing-sm) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--left {
                    > div > div {
                        padding-left: calc(var(--semantic-spacing-sm) * 1rem);
                        padding-left: calc(var(--semantic-spacing-sm) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--right {
                    > div > div {
                        padding-right: calc(var(--semantic-spacing-sm) * 1rem);
                        padding-right: calc(var(--semantic-spacing-sm) * var(--rem-multiplier, 1rem));
                    }
                }
            }

            &.container-padding-size--md {
                &.container-padding-side--top {
                    > div > div {
                        padding-top: calc(var(--semantic-spacing-md) * 1rem);
                        padding-top: calc(var(--semantic-spacing-md) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--bottom {
                    > div > div {
                        padding-bottom: calc(var(--semantic-spacing-md) * 1rem);
                        padding-bottom: calc(var(--semantic-spacing-md) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--left {
                    > div > div {
                        padding-left: calc(var(--semantic-spacing-md) * 1rem);
                        padding-left: calc(var(--semantic-spacing-md) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--right {
                    > div > div {
                        padding-right: calc(var(--semantic-spacing-md) * 1rem);
                        padding-right: calc(var(--semantic-spacing-md) * var(--rem-multiplier, 1rem));
                    }
                }
            }

            &.container-padding-size--lg {
                &.container-padding-side--top {
                    > div > div {
                        padding-top: calc(var(--semantic-spacing-lg) * 1rem);
                        padding-top: calc(var(--semantic-spacing-lg) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--bottom {
                    > div > div {
                        padding-bottom: calc(var(--semantic-spacing-lg) * 1rem);
                        padding-bottom: calc(var(--semantic-spacing-lg) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--left {
                    > div > div {
                        padding-left: calc(var(--semantic-spacing-lg) * 1rem);
                        padding-left: calc(var(--semantic-spacing-lg) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--right {
                    > div > div {
                        padding-right: calc(var(--semantic-spacing-lg) * 1rem);
                        padding-right: calc(var(--semantic-spacing-lg) * var(--rem-multiplier, 1rem));
                    }
                }
            }

            &.container-padding-size--2xl {
                &.container-padding-side--top {
                    > div > div {
                        padding-top: calc(var(--semantic-spacing-2xl) * 1rem);
                        padding-top: calc(var(--semantic-spacing-2xl) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--bottom {
                    > div > div {
                        padding-bottom: calc(var(--semantic-spacing-2xl) * 1rem);
                        padding-bottom: calc(var(--semantic-spacing-2xl) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--left {
                    > div > div {
                        padding-left: calc(var(--semantic-spacing-2xl) * 1rem);
                        padding-left: calc(var(--semantic-spacing-2xl) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--right {
                    > div > div {
                        padding-right: calc(var(--semantic-spacing-2xl) * 1rem);
                        padding-right: calc(var(--semantic-spacing-2xl) * var(--rem-multiplier, 1rem));
                    }
                }
            }

            &.container-padding-size--3xl {
                &.container-padding-side--top {
                    > div > div {
                        padding-top: calc(var(--semantic-spacing-3xl) * 1rem);
                        padding-top: calc(var(--semantic-spacing-3xl) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--bottom {
                    > div > div {
                        padding-bottom: calc(var(--semantic-spacing-3xl) * 1rem);
                        padding-bottom: calc(var(--semantic-spacing-3xl) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--left {
                    > div > div {
                        padding-left: calc(var(--semantic-spacing-3xl) * 1rem);
                        padding-left: calc(var(--semantic-spacing-3xl) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--right {
                    > div > div {
                        padding-right: calc(var(--semantic-spacing-3xl) * 1rem);
                        padding-right: calc(var(--semantic-spacing-3xl) * var(--rem-multiplier, 1rem));
                    }
                }
            }

            &.container-padding-size--4xl {
                &.container-padding-side--top {
                    > div > div {
                        padding-top: calc(var(--semantic-spacing-4xl) * 1rem);
                        padding-top: calc(var(--semantic-spacing-4xl) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--bottom {
                    > div > div {
                        padding-bottom: calc(var(--semantic-spacing-4xl) * 1rem);
                        padding-bottom: calc(var(--semantic-spacing-4xl) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--left {
                    > div > div {
                        padding-left: calc(var(--semantic-spacing-4xl) * 1rem);
                        padding-left: calc(var(--semantic-spacing-4xl) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--right {
                    > div > div {
                        padding-right: calc(var(--semantic-spacing-4xl) * 1rem);
                        padding-right: calc(var(--semantic-spacing-4xl) * var(--rem-multiplier, 1rem));
                    }
                }
            }

            &.container-padding-size--5xl {
                &.container-padding-side--top {
                    > div > div {
                        padding-top: calc(var(--semantic-spacing-5xl) * 1rem);
                        padding-top: calc(var(--semantic-spacing-5xl) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--bottom {
                    > div > div {
                        padding-bottom: calc(var(--semantic-spacing-5xl) * 1rem);
                        padding-bottom: calc(var(--semantic-spacing-5xl) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--left {
                    > div > div {
                        padding-left: calc(var(--semantic-spacing-5xl) * 1rem);
                        padding-left: calc(var(--semantic-spacing-5xl) * var(--rem-multiplier, 1rem));
                    }
                }

                &.container-padding-side--right {
                    > div > div {
                        padding-right: calc(var(--semantic-spacing-5xl) * 1rem);
                        padding-right: calc(var(--semantic-spacing-5xl) * var(--rem-multiplier, 1rem));
                    }
                }
            }
        }

        &.container-margin-breakpoint--desktop {
            &.container-margin-size--3xs {
                &.container-margin-side--top {
                    margin-top: calc(var(--semantic-spacing-3xs) * 1rem);
                    margin-top: calc(var(--semantic-spacing-3xs) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--bottom {
                    margin-bottom: calc(var(--semantic-spacing-3xs) * 1rem);
                    margin-bottom: calc(var(--semantic-spacing-3xs) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--left {
                    margin-left: calc(var(--semantic-spacing-3xs) * 1rem);
                    margin-left: calc(var(--semantic-spacing-3xs) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--right {
                    margin-right: calc(var(--semantic-spacing-3xs) * 1rem);
                    margin-right: calc(var(--semantic-spacing-3xs) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-margin-size--2xs {
                &.container-margin-side--top {
                    margin-top: calc(var(--semantic-spacing-2xs) * 1rem);
                    margin-top: calc(var(--semantic-spacing-2xs) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--bottom {
                    margin-bottom: calc(var(--semantic-spacing-2xs) * 1rem);
                    margin-bottom: calc(var(--semantic-spacing-2xs) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--left {
                    margin-left: calc(var(--semantic-spacing-2xs) * 1rem);
                    margin-left: calc(var(--semantic-spacing-2xs) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--right {
                    margin-right: calc(var(--semantic-spacing-2xs) * 1rem);
                    margin-right: calc(var(--semantic-spacing-2xs) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-margin-size--xs {
                &.container-margin-side--top {
                    margin-top: calc(var(--semantic-spacing-xs) * 1rem);
                    margin-top: calc(var(--semantic-spacing-xs) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--bottom {
                    margin-bottom: calc(var(--semantic-spacing-xs) * 1rem);
                    margin-bottom: calc(var(--semantic-spacing-xs) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--left {
                    margin-left: calc(var(--semantic-spacing-xs) * 1rem);
                    margin-left: calc(var(--semantic-spacing-xs) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--right {
                    margin-right: calc(var(--semantic-spacing-xs) * 1rem);
                    margin-right: calc(var(--semantic-spacing-xs) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-margin-size--sm {
                &.container-margin-side--top {
                    margin-top: calc(var(--semantic-spacing-sm) * 1rem);
                    margin-top: calc(var(--semantic-spacing-sm) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--bottom {
                    margin-bottom: calc(var(--semantic-spacing-sm) * 1rem);
                    margin-bottom: calc(var(--semantic-spacing-sm) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--left {
                    margin-left: calc(var(--semantic-spacing-sm) * 1rem);
                    margin-left: calc(var(--semantic-spacing-sm) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--right {
                    margin-right: calc(var(--semantic-spacing-sm) * 1rem);
                    margin-right: calc(var(--semantic-spacing-sm) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-margin-size--md {
                &.container-margin-side--top {
                    margin-top: calc(var(--semantic-spacing-md) * 1rem);
                    margin-top: calc(var(--semantic-spacing-md) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--bottom {
                    margin-bottom: calc(var(--semantic-spacing-md) * 1rem);
                    margin-bottom: calc(var(--semantic-spacing-md) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--left {
                    margin-left: calc(var(--semantic-spacing-md) * 1rem);
                    margin-left: calc(var(--semantic-spacing-md) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--right {
                    margin-right: calc(var(--semantic-spacing-md) * 1rem);
                    margin-right: calc(var(--semantic-spacing-md) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-margin-size--lg {
                &.container-margin-side--top {
                    margin-top: calc(var(--semantic-spacing-lg) * 1rem);
                    margin-top: calc(var(--semantic-spacing-lg) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--bottom {
                    margin-bottom: calc(var(--semantic-spacing-lg) * 1rem);
                    margin-bottom: calc(var(--semantic-spacing-lg) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--left {
                    margin-left: calc(var(--semantic-spacing-lg) * 1rem);
                    margin-left: calc(var(--semantic-spacing-lg) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--right {
                    margin-right: calc(var(--semantic-spacing-lg) * 1rem);
                    margin-right: calc(var(--semantic-spacing-lg) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-margin-size--2xl {
                &.container-margin-side--top {
                    margin-top: calc(var(--semantic-spacing-2xl) * 1rem);
                    margin-top: calc(var(--semantic-spacing-2xl) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--bottom {
                    margin-bottom: calc(var(--semantic-spacing-2xl) * 1rem);
                    margin-bottom: calc(var(--semantic-spacing-2xl) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--left {
                    margin-left: calc(var(--semantic-spacing-2xl) * 1rem);
                    margin-left: calc(var(--semantic-spacing-2xl) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--right {
                    margin-right: calc(var(--semantic-spacing-2xl) * 1rem);
                    margin-right: calc(var(--semantic-spacing-2xl) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-margin-size--3xl {
                &.container-margin-side--top {
                    margin-top: calc(var(--semantic-spacing-3xl) * 1rem);
                    margin-top: calc(var(--semantic-spacing-3xl) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--bottom {
                    margin-bottom: calc(var(--semantic-spacing-3xl) * 1rem);
                    margin-bottom: calc(var(--semantic-spacing-3xl) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--left {
                    margin-left: calc(var(--semantic-spacing-3xl) * 1rem);
                    margin-left: calc(var(--semantic-spacing-3xl) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--right {
                    margin-right: calc(var(--semantic-spacing-3xl) * 1rem);
                    margin-right: calc(var(--semantic-spacing-3xl) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-margin-size--4xl {
                &.container-margin-side--top {
                    margin-top: calc(var(--semantic-spacing-4xl) * 1rem);
                    margin-top: calc(var(--semantic-spacing-4xl) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--bottom {
                    margin-bottom: calc(var(--semantic-spacing-4xl) * 1rem);
                    margin-bottom: calc(var(--semantic-spacing-4xl) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--left {
                    margin-left: calc(var(--semantic-spacing-4xl) * 1rem);
                    margin-left: calc(var(--semantic-spacing-4xl) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--right {
                    margin-right: calc(var(--semantic-spacing-4xl) * 1rem);
                    margin-right: calc(var(--semantic-spacing-4xl) * var(--rem-multiplier, 1rem));
                }
            }

            &.container-margin-size--5xl {
                &.container-margin-side--top {
                    margin-top: calc(var(--semantic-spacing-5xl) * 1rem);
                    margin-top: calc(var(--semantic-spacing-5xl) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--bottom {
                    margin-bottom: calc(var(--semantic-spacing-5xl) * 1rem);
                    margin-bottom: calc(var(--semantic-spacing-5xl) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--left {
                    margin-left: calc(var(--semantic-spacing-5xl) * 1rem);
                    margin-left: calc(var(--semantic-spacing-5xl) * var(--rem-multiplier, 1rem));
                }

                &.container-margin-side--right {
                    margin-right: calc(var(--semantic-spacing-5xl) * 1rem);
                    margin-right: calc(var(--semantic-spacing-5xl) * var(--rem-multiplier, 1rem));
                }
            }
        }
    }

    &.border-radius--md {
        overflow: hidden;
    }

    &.border-radius--sm {
        overflow: hidden;
    }

    &.border-radius--lg {
        overflow: hidden;
    }

    &.border-radius--xl {
        overflow: hidden;
    }
}