//  Hydrogen / Properties / Container

@mixin h2-prop-container(
  $mediaQueryMap, 
  $containerSizeMap, 
  $alignmentValueMap,
  $mq-medium
) {

  [data-h2-container] {
    margin: 0 auto;
    width: 90%;
  }

  @each $mediaKey, $mediaValue in $mediaQueryMap {
    @media #{$mediaValue} {
      @each $sizeKey, $sizeValue in $containerSizeMap {
        @each $alignmentKey, $alignmentValue in $alignmentValueMap {

          [data-h2-container*="#{$mediaKey}(#{$alignmentKey}, #{$sizeKey})"] {
            margin: $alignmentValue;
            max-width: $sizeValue;
          }

        }
      }
    }
  }

}