/* ========================================
MIXINS
* General Use Mixins to ease up reoccuring styles
* No Components!
======================================== */



.shadow(@size: .5em, @color: @color-dark-shadow) {
    box-shadow: 0 0 @size @color;
}



.responsiveWidth(@width) {
    @media screen and (min-width: @breakpoint-sm) {
        width: calc(@breakpoint-sm * (min(1, min(@width + .2, 1))) ~'- 1rem');
    }
    @media screen and (min-width: @breakpoint-md) {
        width: calc(@breakpoint-md * (min(1, min(@width + .05, 1))) ~'- 1rem');
    }
    @media screen and (min-width: @breakpoint-lg) {
        width: calc(@breakpoint-lg * @width ~'- 1rem');
    }
}

.responsiveHeight(@height) {
    min-height: @height * .5;
    @media screen and (min-width: @breakpoint-sm) {
        min-height: @height * .7;
    }
    @media screen and (min-width: @breakpoint-md) {
        min-height: @height * .85;
    }
    @media screen and (min-width: @breakpoint-lg) {
        min-height: @height;
    }
}

/* ========================================
MIXINS
* General Use Mixins to ease up reoccuring styles
* No Components!
======================================== */



.shadow(@size: .5em, @color: @color-dark-shadow) {
    box-shadow: 0 0 @size @color;
}



.responsiveWidth(@width) {
    width: calc(~"95%");
    @media screen and (min-width: @breakpoint-sm) {
        width: calc(@breakpoint-sm * (min(1, min(@width + .2, 1))) ~'- 1rem');
    }
    @media screen and (min-width: @breakpoint-md) {
        width: calc(@breakpoint-md * (min(1, min(@width + .05, 1))) ~'- 1rem');
    }
    @media screen and (min-width: @breakpoint-lg) {
        width: calc(@breakpoint-lg * @width ~'- 1rem');
    }
}

.responsiveHeight(@height) {
    min-height: @height * .5;
    @media screen and (min-width: @breakpoint-sm) {
        min-height: @height * .7;
    }
    @media screen and (min-width: @breakpoint-md) {
        min-height: @height * .85;
    }
    @media screen and (min-width: @breakpoint-lg) {
        min-height: @height;
    }
}

Use 95% width for container on mobile
Use 95% width for container on mobile
