/* block padding */

:root {
    --gutter: 26px;
    --space-small: 2.5em;
    --space-medium: 4em;
    --space-regular: 5em;
    --space-large: 6.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: 5em;
    --banner: 6.5em;
    --banner-large: 8.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);
    }
}