/* ===== Container Layout Primitive ===== */

.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)));
    }
}