<?php
/**
 *
 * The classes are named using the format .max-width-{breakpoint} for all breakpoints.
 *
 * Where breakpoint is one of:
 *
 *    sm
 *    md
 *    lg
 *
 * Common component variables
 * @param array $breakpoint
 */
?>

<?php foreach ($breakpoint as $i => $break) { ?>
	<div class="a-max-width-<?php echo $break; ?> mx-auto bg-<?php switch($i) { case 0: echo 'green'; break; case 1: echo 'orange'; break; default: echo 'red'; break; } ?>">max-width-<?php echo $break; ?></div>

	<?php if ($i + 2 <= count($breakpoint)) { ?><hr><?php } ?>
<?php } ?>

@if variable-exists(container-max-widths) and variable-exists(grid-gutter-width) {

    .a-max-width {

        padding-right: ($grid-gutter-width / 2);
        padding-left: ($grid-gutter-width / 2);

        @each $breakpoint, $container-max-width in $container-max-widths {

            &-#{$breakpoint} {

                max-width: $container-max-width;

            }

        }

    }

}