/*
    Containers match the breakpoints and are max-width for responsive layouts.
*/
.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);
}

@media (min-width: 768px) {
    .p-responsive {
        padding-left: var(--space-8);
        padding-right: 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: -16px;
    margin-right: -16px;
}

.s-prose p {
    margin-bottom: var(--space-2);
}

.l-form-fields {
    display: grid;
    gap: var(--space-4);
}
    .l-form-fields--lg {
        gap: var(--space-8);
    }

.l-form-row {
    display: grid;
    gap: var(--space-4);
}

.l-form-sections {
    display: grid;
    gap: var(--space-12);
}
    .l-form-sections > * {
        padding-bottom: var(--space-12);
    }
    .l-form-sections--sm {
        gap: var(--space-8);
    }
    .l-form-sections--sm > * {
        padding-bottom: var(--space-8);
    }