.gutter {
    padding-right: var(--small); 
    padding-left: var(--small);
}

/* margin bottom */ 

.margin-xxlarge {
    margin-bottom: var(--xxlarge);
}
.margin-xlarge {
    margin-bottom: var(--xlarge)
}
.margin-large {
    margin-bottom: var(--large);
}
.margin-medium {
    margin-bottom: var(--medium);
}
.margin-small {
    margin-bottom: var(--small);
}
.margin-xsmall {
    margin-bottom: var(--xsmall);
}
.margin-xxsmall {
    margin-bottom: var(--xxsmall);
}
.margin-xxxsmall {
    margin-bottom: var(--xxxsmall);
}


/* padding top and bottom */ 

.padding-xxlarge {
    padding-bottom: var(--xxlarge);
    padding-top: var(--xxlarge);
}
.padding-xlarge {
    padding-bottom: var(--xlarge);
    padding-top: var(--xlarge);
}
.padding-large {
    padding-bottom: var(--large);
    padding-top: var(--large);
}
.padding-medium {
    padding-bottom: var(--medium);
    padding-top: var(--medium);
}
.padding-small {
    padding-bottom: var(--small);
    padding-top: var(--small);
}
.padding-xsmall {
    padding-bottom: var(--xsmall);
    padding-top: var(--xsmall);
}
.padding-xxsmall {
    padding-bottom: var(--xxsmall);
    padding-top: var(--xxsmall);
}

.padding-xxxsmall {
    padding-bottom: var(--xxxsmall);
    padding-top: var(--xxxsmall);
}

/* padding left and right */

.padding-side-xlarge {
    padding-bottom: var(--xxlarge);
    padding-top: var(--xxlarge);
}
.padding-side-large {
    padding-left: var(--xlarge);
    padding-right: var(--xlarge);
}
.padding-side-medium {
    padding-left: var(--large);
    padding-right: var(--large);
}
.padding-side-small {
    padding-left: var(--medium);
    padding-right: var(--medium);
}
.padding-side-small {
    padding-left: var(--small);
    padding-right: var(--small);
}
.padding-side-xsmall {
    padding-left: var(--xsmall);
    padding-right: var(--xsmall);
}
.padding-side-xxsmall {
    padding-left: var(--xxsmall);
    padding-right: var(--xxsmall);
}
.padding-side-xxxsmall {
    padding-left: var(--xxxsmall);
    padding-right: var(--xxxsmall);
}

/* padding  bottom */ 

.padding-bottom-xxlarge {
    padding-bottom: var(--xxlarge);
}
.padding-bottom-xlarge {
    padding-bottom: var(--xlarge);
}
.padding-bottom-large {
    padding-bottom: var(--large);
}
.padding-bottom-medium {
    padding-bottom: var(--medium);
}
.padding-bottom-small {
    padding-bottom: var(--small);
}
.padding-bottom-xsmall {
    padding-bottom: var(--xsmall);
}
.padding-bottom-xxsmall {
    padding-bottom: var(--xxsmall);
}
.padding-bottom-xxxsmall {
    padding-bottom: var(--xxxsmall);
}


/*Margin added to a colun of items for mobile drop down but removes from last item */

/* Mobile space up to 768 */ 
.margin-mobile-space {
    margin-bottom: var(--xsmall);  
}
.margin-mobile-space:last-child {
    margin-bottom: 0;  
}

/* Mobile space up to 1024 */ 
.margin-tablet-space {
    margin-bottom: var(--xsmall);  
}
.margin-tablet-space:last-child {
    margin-bottom: 0;  
}

/* desktop space up to 1440 */ 
.margin-desktop-space {
    margin-bottom: var(--xsmall);  
}
.margin-desktop-space:last-child {
    margin-bottom: 0;  
}


/* Margin for single item to add space o column dropdown */ 
/* Mobile space up to 768 */ 
.margin-mobile-space-single {
    margin-bottom: var(--small);  
}

/* Mobile space up to 768 */ 
.margin-tablet-space-single {
    margin-bottom: var(--small);  
}
/* desktop space up to 768 */ 
.margin-desktop-space-single {
    margin-bottom: var(--small);  
}

@media (min-width: 768px) {
    .margin-mobile-space {
        margin-bottom: 0;  
    }
    .margin-mobile-space-single {
        margin-bottom: 0;  
    }
}

@media (min-width: 1024px) {
    .margin-tablet-space {
        margin-bottom: 0;  
    }
    .margin-tablet-space-single {
        margin-bottom: 0;  
    }
    /* margin small desktop */ 
    .margin-xlarge {
        margin-bottom: var(--xxxlarge);
    }
    .margin-large {
        margin-bottom: var(--xxlarge);
    }
    .margin-medium {
        margin-bottom: var(--xlarge);
    }
    .margin-small {
        margin-bottom: var(--large);
    }
    .margin-xsmall {
        margin-bottom: var(--medium);
    }
    .margin-xxsmall {
        margin-bottom: var(--small);
    }
    .margin-xxxsmall {
        margin-bottom: var(--xsmall);
    }
    /* padding small desktop */ 
    .padding-large {
        padding-bottom: var(--xxxlarge);
        padding-top: var(--xxxlarge);
    }
    .padding-large {
        padding-bottom: var(--xxlarge);
        padding-top: var(--xxlarge);
    }
    .padding-medium {
        padding-bottom: var(--xlarge);
        padding-top: var(--xlarge);
    }
    .padding-small {
        padding-bottom: var(--large);
        padding-top: var(--large);
    }
    .padding-xsmall {
        padding-bottom: var(--medium);
        padding-top: var(--medium);
    }
    .padding-xxsmall {
        padding-bottom: var(--small);
        padding-top: var(--small);
    }
    .padding-xxxsmall {
        padding-top: var(--xsmall);
        padding-bottom: var(--xsmall);
    }
    /* padding side small desktop */ 
    .padding-side-large {
        padding-left: var(--xxxlarge);
        padding-right: var(--xxxlarge);
    }
    .padding-side-large {
        padding-left: var(--xxlarge);
        padding-right: var(--xxlarge);
    }
    .padding-side-medium {
        padding-left: var(--xlarge);
        padding-right: var(--xlarge);
    }
    .padding-side-small {
        padding-left: var(--large);
        padding-right: var(--large);
    }
    .padding-side-xsmall {
        padding-left: var(--medium);
        padding-right: var(--medium);
    }
    .padding-side-xxsmall {
        padding-left: var(--small);
        padding-right: var(--small);
    }
    .padding-side-xxxsmall {
        padding-left: var(--xsmall);
        padding-right: var(--xsmall);
    }
    /* padding bottom desktop */ 
    .padding-bottom-large {
        padding-bottom: var(--xxxlarge);
    }
    .padding-bottom-large {
        padding-bottom: var(--xxlarge);
    }
    .padding-bottom-medium {
        padding-bottom: var(--xlarge);
    }
    .padding-bottom-small {
        padding-bottom: var(--large);
    }
    .padding-bottom-xsmall {
        padding-bottom: var(--medium);
    }
    .padding-bottom-xxsmall {
        padding-bottom: var(--small);
    } 
    .padding-bottom-xxxsmall {
        padding-bottom: var(--xsmall);
    }

    .gutter {
        padding-right: var(--medium); 
        padding-left: var(--medium);
    }
}

@media (min-width: 1440px) {
    .margin-desktop-space {
        margin-bottom: 0;  
    }
    .margin-desktop-space-single {
        margin-bottom: 0;  
    }
    .gutter {
        padding-right: var(--xlarge); 
        padding-left: var(--xlarge);
    }
    /* margin large desktop */ 
    .margin-large {
        margin-bottom: var(--xxxxlarge);
    }
    .margin-large {
        margin-bottom: var(--xxxlarge);
    }
    .margin-medium {
        margin-bottom: var(--xxlarge);
    }
    .margin-small {
        margin-bottom: var(--xlarge);
    }
    .margin-xsmall {
        margin-bottom: var(--large);
    }
    .margin-xxsmall {
        margin-bottom: var(--medium);
    }
    .margin-xxxsmall {
        margin-bottom: var(--small);
    }
    /* padding large desktop */ 
    .padding-xlarge {
        padding-bottom: var(--xxxxlarge);
        padding-top: var(--xxxxlarge);
    }
    .padding-large {
        padding-bottom: var(--xxxlarge);
        padding-top: var(--xxxlarge);
    }
    .padding-medium {
        padding-bottom: var(--xxlarge);
        padding-top: var(--xxlarge);
    }
    .padding-small {
        padding-bottom: var(--xlarge);
        padding-top: var(--xlarge);
    }
    .padding-xsmall {
        padding-bottom: var(--large);
        padding-top: var(--large);
    }
    .padding-xxsmall {
        padding-bottom: var(--medium);
        padding-top: var(--medium);
    }
    .padding-xxxsmall {
        padding-bottom: var(--small);
        padding-top: var(--small);
    }
    /* padding side large desktop */ 
    .padding-side-xlarge {
        padding-bottom: var(--xxxxlarge);
        padding-top: var(--xxxxlarge);
    }
    .padding-side-large {
        padding-left: var(--xxxlarge);
        padding-right: var(--xxxlarge);
    }
    .padding-side-medium {
        padding-left: var(--xxlarge);
        padding-right: var(--xxlarge);
    }
    .padding-side-small {
        padding-left: var(--xlarge);
        padding-right: var(--xlarge);
    }
    .padding-side-xsmall {
        padding-left: var(--large);
        padding-right: var(--large);
    }
    .padding-side-xxsmall {
        padding-left: var(--medium);
        padding-right: var(--medium);
    }
    .padding-side-xxsmall {
        padding-left: var(--small);
        padding-right: var(--small);
    }
    /* padding bottom large desktop */ 
    .padding-bottom-xlarge {
        padding-bottom: var(--xxxxlarge);
    }
    .padding-bottom-large {
        padding-bottom: var(--xxxlarge);
    }
    .padding-bottom-medium {
        padding-bottom: var(--xxlarge);
    }
    .padding-bottom-small {
        padding-bottom: var(--xlarge);
    }
    .paddingvxsmall {
        padding-bottom: var(--large);
    }
    .padding-bottom-xxsmall {
        padding-bottom: var(--medium);
    }
    .padding-bottom-xxxsmall {
        padding-bottom: var(--small);
    }
    
}