.ui-container {
    box-sizing: border-box;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: var(--container-max-width, 1280px);
    padding-top: var(--container-padding-block, 0px);
    padding-bottom: var(--container-padding-block, 0px);
    padding-left: var(--container-padding, 16px);
    padding-right: var(--container-padding, 16px);
}

@media (min-width: 768px) {
    .ui-container {
        max-width: var(--container-max-width-md, var(--container-max-width, 1280px));
        padding-top: var(--container-padding-block-md, var(--container-padding-block, 0px));
        padding-bottom: var(--container-padding-block-md, var(--container-padding-block, 0px));
        padding-left: var(--container-padding-md, var(--container-padding, 16px));
        padding-right: var(--container-padding-md, var(--container-padding, 16px));
    }
}

@media (min-width: 1024px) {
    .ui-container {
        max-width: var(--container-max-width-lg, var(--container-max-width-md, var(--container-max-width, 1280px)));
        padding-top: var(--container-padding-block-lg, var(--container-padding-block-md, var(--container-padding-block, 0px)));
        padding-bottom: var(--container-padding-block-lg, var(--container-padding-block-md, var(--container-padding-block, 0px)));
        padding-left: var(--container-padding-lg, var(--container-padding-md, var(--container-padding, 16px)));
        padding-right: var(--container-padding-lg, var(--container-padding-md, var(--container-padding, 16px)));
    }
}


.ui-container[data-bleed~="base"] {
    width: calc(100% + (2 * var(--container-bleed, 0px)));
    margin-left: calc(-1 * var(--container-bleed, 0px));
    margin-right: calc(-1 * var(--container-bleed, 0px));
}

@media (min-width: 768px) {
    .ui-container[data-bleed] {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .ui-container[data-bleed~="md"] {
        width: calc(100% + (2 * var(--container-bleed-md, 0px)));
        margin-left: calc(-1 * var(--container-bleed-md, 0px));
        margin-right: calc(-1 * var(--container-bleed-md, 0px));
    }
}

@media (min-width: 1024px) {
    .ui-container[data-bleed] {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .ui-container[data-bleed~="lg"] {
        width: calc(100% + (2 * var(--container-bleed-lg, 0px)));
        margin-left: calc(-1 * var(--container-bleed-lg, 0px));
        margin-right: calc(-1 * var(--container-bleed-lg, 0px));
    }
}