/* Define base spacing units using CSS variables */
:root {
    --section-spacing: clamp(2rem, 8vw, 8rem);
    --section-spacing-compact: clamp(1rem, 4vw, 4rem); /* Reduced the clamp values by 50% (2→1, 8→4, 8→4) */
    --section-spacing-spacious: clamp(3rem, 12vw, 12rem); /* Increased the clamp values by 50% (2→3, 8→12, 8→12) */
}

/* Banner */
.banner-responsive {
    margin-block: var(--section-spacing);
}

.banner-responsive-top {
    margin-top: var(--section-spacing);
}

.banner-responsive-bottom {
    margin-bottom: var(--section-spacing);
}

.banner-responsive-compact {
    margin-block: var(--section-spacing-compact);
}

.banner-responsive-compact-top {
    margin-top: var(--section-spacing-compact);
}

.banner-responsive-compact-bottom {
    margin-bottom: var(--section-spacing-compact);
}

.banner-responsive-spacious {
    margin-block: var(--section-spacing-spacious);
}

.banner-responsive-spacious-top {
    margin-top: var(--section-spacing-spacious);
}

.banner-responsive-spacious-bottom {
    margin-bottom: var(--section-spacing-spacious);
}

.banner-padding-responsive {
    padding-block: var(--section-spacing);
}

.banner-padding-responsive-top {
    padding-top: var(--section-spacing);
}

.banner-padding-responsive-bottom {
    padding-bottom: var(--section-spacing);
}

.banner-padding-responsive-compact {
    padding-block: var(--section-spacing-compact);
}

.banner-padding-responsive-compact-top {
    padding-top: var(--section-spacing-compact);
}

.banner-padding-responsive-compact-bottom {
    padding-bottom: var(--section-spacing-compact);
}

.banner-padding-responsive-spacious {
    padding-block: var(--section-spacing-spacious);
}

.banner-padding-responsive-spacious-top {
    padding-top: var(--section-spacing-spacious);
}

.banner-padding-responsive-spacious-bottom {
    padding-bottom: var(--section-spacing-spacious);
}

/* Block */
:root {
    /* Base values */
    --gutter: clamp(26px, 2vw, 32px);
    /* Fluid spacing scales */
    --space-small: clamp(2.75em, 2vw + 2em, 3.5em);
    --space-medium: clamp(4.15em, 3vw + 3em, 5.25em);
    --space-regular: clamp(5.5em, 4vw + 4em, 7em);
    --space-large: clamp(7.5em, 5vw + 5em, 9.5em);
}

/* Base block classes */
.block-gutter {
    padding: var(--gutter);
}

.block-small {
    padding: var(--space-small);
}

.block-medium {
    padding: var(--space-medium);
}

.block {
    padding: var(--space-regular);
}

.block-large {
    padding: var(--space-large);
}

/* Responsive block that scales smoothly across breakpoints */
.block-responsive {
    padding: clamp(26px, 3vw + 1rem, var(--space-large));
}