:root {
    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-5: 24px;
    --ui-space-6: 32px;
    --ui-content-gutter: 12px;
    --ui-section-gap: 16px;
}

/* Единый внешний край всех пользовательских страниц. */
.site-content-wrapper {
    box-sizing: border-box;
    padding: var(--ui-content-gutter) !important;
}

.site-content-wrapper > * {
    box-sizing: border-box;
    max-width: 100%;
}

/* Bootstrap row рассчитан на контейнер с собственными gutters. У прямых
   секций страницы отрицательные margins создавали разную ширину блоков. */
.site-content-wrapper > .row.justify-content-center,
.site-content-wrapper > .row.text-center,
.site-content-wrapper > .row.p-3.mt-3 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.site-content-wrapper > .row.justify-content-center > [class*="col-"],
.site-content-wrapper > .row.text-center > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

.site-content-wrapper > .row.p-3.mt-3 {
    margin-top: var(--ui-space-3) !important;
    padding: 0 !important;
}

/* Старые SEO-заголовки приводим к тому же ритму, что и новые карточки. */
.site-content-wrapper > .p-1 {
    margin-bottom: var(--ui-space-3);
    padding: 0 !important;
}

.site-content-wrapper > .p-1 > .border-left-right {
    padding: 0 !important;
}

.site-content-wrapper > .p-1 > .border-left-right > .mb-2,
.site-content-wrapper > .p-1 > .border-left-right > [class*="mb-2"] {
    margin-bottom: 0 !important;
}

.site-content-wrapper > .p-1 > .border-left-right > div > .bg-white,
.site-content-wrapper > .p-1 > .border-left-right > div > .custom-background-title {
    padding: var(--ui-space-4) var(--ui-space-5) !important;
}

/* Последовательные интервалы внутри форм кабинета и публикации объявления. */
.site-content-wrapper form .form-group {
    margin-bottom: var(--ui-space-4);
}

.site-content-wrapper form .form-group > label,
.site-content-wrapper form .form-group > .form-label {
    margin-bottom: var(--ui-space-2);
}

.site-content-wrapper form .form-text,
.site-content-wrapper form .invalid-feedback,
.site-content-wrapper form .text-warning {
    margin-top: var(--ui-space-1);
}

.site-content-wrapper .account-section + .account-section,
.site-content-wrapper .profile-section + .profile-section {
    margin-top: var(--ui-space-4);
}

/* Предотвращает накопление лишнего пространства в конце карточек. */
.site-content-wrapper .ibox-content > :last-child,
.site-content-wrapper .panel-body > :last-child,
.site-content-wrapper .card-body > :last-child {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    :root {
        --ui-content-gutter: 8px;
        --ui-section-gap: 12px;
    }

    .site-content-wrapper > .p-1 > .border-left-right > div > .bg-white,
    .site-content-wrapper > .p-1 > .border-left-right > div > .custom-background-title {
        padding: var(--ui-space-3) var(--ui-space-4) !important;
    }
}