@mixin mix_bgp {
    &-lt, &-lc, &-lb {
		background-position-x: left;
	}

	&-ct, &-cc, &-cb {
		background-position-x: center;
	}

	&-rt, &-rc, &-rb {
		background-position-x: right;
	}

	&-lt, &-ct, &-rt {
		background-position-y: top;
	}

	&-lc, &-cc, &-rc {
		background-position-y: center;
	}

	&-lb, &-cb, &-rb {
		background-position-y: bottom;
	}
}

@mixin mix_bgs {
    &-cover {
		background-size: cover;
	}

	&-contain {
		background-size: contain;
	}
}

@mixin mix_bgr {
    &-no-repeat {
		background-repeat: no-repeat;
	}

	&-repeat-x {
		background-repeat: repeat-x;
    }

    &-repeat-y {
		background-repeat: repeat-y;
    }
}

@mixin mix_bg($breakpoint:null) {
    $breakpoint: if($breakpoint,-#{$breakpoint},'');

    .bgp#{$breakpoint} {
        @include mix_bgp;
    }
    .bgs#{$breakpoint} {
        @include mix_bgs;
    }

    .bgr#{$breakpoint} {
    	@include mix_bgs;
    }
}

@each $ratio in $ratios {
    $index : str-index($ratio, ':');

    $width : to-number(str-slice($ratio, 1, $index - 1));
    $height : to-number(str-slice($ratio, $index + 1));

    .ratio-#{$width}\/#{$height} {
        padding-bottom: $height/$width*100%;
    }
 }

@include mix_bg;

// Enable this if you require bg breakpoints

// @media (min-width:767px) {
//     @include mix_bg('md');
// }

// @media (min-width:992px) {
//     @include mix_bg('lg');
// }

// @media (min-width:1200px) {
//     @include mix_bg('xl');
// }

@each $w in $max-widths {
    .maxw-#{$w} {
        max-width: #{$w}px!important;
    }
}