/* 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-compact {
    margin-block: var(--section-spacing-compact);
}

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

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

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

.banner-padding-responsive-spacious {
    padding-block: 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, 5vw + 1rem, var(--space-large));
}


/* block padding */

/*:root {
    --gutter: 26px;
    --space-small: 2.75em;
    --space-medium: 4.15em;
    --space-regular: 5.5em;
    --space-large: 7.5em;
}

.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);
}

.block-responsive {
    padding: var(--gutter);
}

@media(min-width:576px) {
    .block-sm-small {
        padding: var(--space-small);
    }

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

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

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

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

@media(min-width:768px) {
    .block-md-small {
        padding: var(--space-small);
    }

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

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

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

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

@media(min-width:992px) {
    .block-lg-small {
        padding: var(--space-small);
    }

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

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

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

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

@media(min-width:1200px) {
    .block-xl-small {
        padding: var(--space-small);
    }

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

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

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

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

@media(min-width:1400px) {
    .block-xxl-small {
        padding: var(--space-small);
    }

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

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

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

/* banner */

/*:root {
    --banner-small: 2.5em;
    --banner: 5em;
    --banner-large: 6.5em;
}

.banner-gutter, .banner-gutter-top {
    margin-top: var(--gutter);
}

.banner-gutter, .banner-gutter-bottom {
    margin-bottom: var(--gutter);
}

.banner-small, .banner-small-top {
    margin-top: var(--banner-small);
}

.banner-small, .banner-small-bottom {
    margin-bottom: var(--banner-small);
}

.banner, .banner-top {
    margin-top: var(--banner);
}

.banner, .banner-bottom {
    margin-bottom: var(--banner);
}

.banner-large, .banner-large-top {
    margin-top: var(--banner-large);
}

.banner-large, .banner-large-bottom {
    margin-bottom: var(--banner-large);
}

@media (min-width:576px) {
    .banner-sm-gutter, .banner-sm-gutter-top {
        margin-top: var(--gutter);
    }

    .banner-sm-gutter, .banner-sm-gutter-bottom {
        margin-bottom: var(--gutter);
    }

    .banner-sm-small, .banner-sm-small-top {
        margin-top: var(--banner-small);
    }

    .banner-sm-small, .banner-sm-small-bottom {
        margin-bottom: var(--banner-small);
    }

    .banner-sm, .banner-sm-top {
        margin-top: var(--banner);
    }

    .banner-sm, .banner-sm-bottom {
        margin-bottom: var(--banner);
    }

    .banner-sm-large, .banner-sm-large-top {
        margin-top: var(--banner-large);
    }

    .banner-sm-large, .banner-sm-large-bottom {
        margin-bottom: var(--banner-large);
    }
}

@media (min-width:768px) {
    .banner-md-gutter, .banner-md-gutter-top {
        margin-top: var(--gutter);
    }

    .banner-md-gutter, .banner-md-gutter-bottom {
        margin-bottom: var(--gutter);
    }

    .banner-md-small, .banner-md-small-top {
        margin-top: var(--banner-small);
    }

    .banner-md-small, .banner-md-small-bottom {
        margin-bottom: var(--banner-small);
    }

    .banner-md, .banner-md-top {
        margin-top: var(--banner);
    }

    .banner-md, .banner-md-bottom {
        margin-bottom: var(--banner);
    }

    .banner-md-large, .banner-md-large-top {
        margin-top: var(--banner-large);
    }

    .banner-md-large, .banner-md-large-bottom {
        margin-bottom: var(--banner-large);
    }
}

@media (min-width:992px) {
    .banner-lg-gutter, .banner-lg-gutter-top {
        margin-top: var(--gutter);
    }

    .banner-lg-gutter, .banner-lg-gutter-bottom {
        margin-bottom: var(--gutter);
    }

    .banner-lg-small, .banner-lg-small-top {
        margin-top: var(--banner-small);
    }

    .banner-lg-small, .banner-lg-small-bottom {
        margin-bottom: var(--banner-small);
    }

    .banner-lg, .banner-lg-top {
        margin-top: var(--banner);
    }

    .banner-lg, .banner-lg-bottom {
        margin-bottom: var(--banner);
    }

    .banner-lg-large, .banner-lg-large-top {
        margin-top: var(--banner-large);
    }

    .banner-lg-large, .banner-lg-large-bottom {
        margin-bottom: var(--banner-large);
    }
}

@media (min-width:1200px) {
    .banner-xl-gutter, .banner-xl-gutter-top {
        margin-top: var(--gutter);
    }

    .banner-xl-gutter, .banner-xl-gutter-bottom {
        margin-bottom: var(--gutter);
    }

    .banner-xl-small, .banner-xl-small-top {
        margin-top: var(--banner-small);
    }

    .banner-xl-small, .banner-xl-small-bottom {
        margin-bottom: var(--banner-small);
    }

    .banner-xl, .banner-xl-top {
        margin-top: var(--banner);
    }

    .banner-xl, .banner-xl-bottom {
        margin-bottom: var(--banner);
    }

    .banner-xl-large, .banner-xl-large-top {
        margin-top: var(--banner-large);
    }

    .banner-xl-large, .banner-xl-large-bottom {
        margin-bottom: var(--banner-large);
    }
}

@media (min-width:1400px) {
    .banner-xxl-gutter, .banner-xxl-gutter-top {
        margin-top: var(--gutter);
    }

    .banner-xxl-gutter, .banner-xxl-gutter-bottom {
        margin-bottom: var(--gutter);
    }

    .banner-xxl-small, .banner-xxl-small-top {
        margin-top: var(--banner-small);
    }

    .banner-xxl-small, .banner-xxl-small-bottom {
        margin-bottom: var(--banner-small);
    }

    .banner-xxl, .banner-xxl-top {
        margin-top: var(--banner);
    }

    .banner-xxl, .banner-xxl-bottom {
        margin-bottom: var(--banner);
    }

    .banner-xxl-large, .banner-xxl-large-top {
        margin-top: var(--banner-large);
    }

    .banner-xxl-large, .banner-xxl-large-bottom {
        margin-bottom: var(--banner-large);
    }
}*/

/* banner responsive */

/*.banner-responsive, .banner-responsive-top {
    margin-top: var(--banner-small);
}

.banner-responsive, .banner-responsive-bottom {
    margin-bottom: var(--banner-small);
}

.banner-padding-responsive, .banner-padding-responsive-top {
    padding-top: var(--banner-small);
}

.banner-padding-responsive, .banner-padding-responsive-bottom {
    padding-bottom: var(--banner-small);
}

@media (min-width:768px) {
    .banner-responsive, .banner-responsive-top {
        margin-top: var(--banner);
    }

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

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

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

@media (min-width: 1400px) {
    .banner-responsive, .banner-responsive-top {
        margin-top: var(--banner-large);
    }

    .banner-responsive, .banner-responsive-bottom {
        margin-bottom: var(--banner-large);
    }

    .banner-padding-responsive, .banner-padding-responsive-top {
        padding-top: var(--banner-large);
    }

    .banner-padding-responsive, .banner-padding-responsive-bottom {
        padding-bottom: var(--banner-large);
    }
}*/