/*
    Containers match the breakpoints and are max-width for responsive layouts.
*/
.container-2xl {
    width: 100%;
    max-width: 1920px;
    margin-right: auto;
    margin-left: auto;
}
.container-xl {
    width: 100%;
    max-width: 1280px;
    margin-right: auto;
    margin-left: auto;
}
.container-lg {
    width: 100%;
    max-width: 1008px;
    margin-right: auto;
    margin-left: auto;
}
.container-md {
    width: 100%;
    max-width: 768px;
    margin-right: auto;
    margin-left: auto;
}

.p-responsive {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}
.m-ignore-p-responsive {
    margin-left: calc(-1 * var(--space-4));
    margin-right: calc(-1 * var(--space-4));
}

@media (min-width: 768px) {
    .p-responsive {
        padding-left: var(--space-8);
        padding-right: var(--space-8);
    }
    .m-ignore-p-responsive {
        margin-left: calc(-1 * var(--space-8));
        margin-right: calc(-1 * var(--space-8));
    }
}
@media (min-width: 1008px) {
    .p-responsive {
        padding-left: var(--space-12);
        padding-right: var(--space-12);
    }
    .m-ignore-p-responsive {
        margin-left: calc(-1 * var(--space-12));
        margin-right: calc(-1 * var(--space-12));
    }
}

.gap-form-fields {
    gap: var(--space-form-fields);
}

.gap-btns {
    gap: var(--space-btns);
}

.p-box {
    padding: var(--box-padding-y) var(--box-padding-x);
}