/* 1200px of content, like the page builder's boxed sections: the gutter only shows on narrower screens. */
.vb-page .vb-container {
    max-width: calc(var(--vb-container) + 2 * var(--vb-gutter));
}

/* The footer goes through wpautop on these pages and gets an empty paragraph, with its margin, on each side. */
.page-template-blocks .btSiteFooter > p:empty {
    display: none;
}

.vb-section {
    padding-block: clamp(56px, 8vw, 96px);
}

.vb-section--compact {
    padding-block: clamp(32px, 5vw, 48px);
}

.vb-section--flush-top {
    padding-top: 0;
}

.vb-section--grey {
    background: var(--gris-fondo);
}

/* Two sections in a row on the same background share one gap instead of adding up both paddings. */
.vb-section:not(.vb-section--grey) + .vb-section:not(.vb-section--grey),
.vb-section--grey + .vb-section--grey {
    padding-top: 0;
}

/* A photo section and the contact band are both full-bleed: without a gap they read as one block. */
.vb-split + .vb-contact,
.vb-split + .vb-split {
    margin-top: clamp(56px, 8vw, 96px);
}

.vb-page .vb-section--narrow .vb-section__inner {
    max-width: 860px;
}

/* Zero specificity: any margin a component sets for itself wins. */
:where(.vb-section__inner > * + *) {
    margin-top: 40px;
}