@import "variables";
@import "mixins";
@import "utils";

.ribs-container, .ribs-container-fluid {
	width: 98.6%;
	padding: 0 1rem;
}

.ribs-container, .ribs-container-fluid, .ribs-grid {
	* {
		box-sizing: border-box;
	}
	
	.row {
		box-sizing: border-box;
		display: flex;
		flex: 0 1 auto;
		flex-direction: row;
		flex-wrap: wrap;

		img {
			max-width: 100%;
		}

		@include grid-column("cxs");
		@include alignment("xs");

		@media all and #{$media-mobile} {
			@include grid-column("csm");
			@include alignment("sm");
		}
		
		@media all and #{$media-tablet} {
			@include grid-column("cmd");
			@include alignment("md");
		}

		@media all and #{$media-desktop} {
			@include grid-column("clg");
			@include alignment("lg");
		}
	}
}

.ribs-container {
	margin: auto;
	
	@media all and #{$media-mobile} {
		width: 100%;
	}
	
	@media all and #{$media-tablet} {
		width: 100%;
	}
	
	@media all and (min-width: 1215px) {
		width: 100rem;
	}
}