@define refs {
  name: container;
}

@define props {
  size: medium;
  srWidth: 576px;
  smWidth: 720px;
  mdWidth: 996px;
  lgWidth: 1200px;
  lrWidth: 1366px;
  lsWidth: 1440px;
  wdWidth: 1440px;
  wrWidth: 1440px;
}

@alga {refs.name} {
  .{refs.name} {
    ref: width-100pct maxWidth-100vw paddingLeft-0.375rem paddingRight-0.375rem;
    screen-sr: width-100pct maxWidth-{props.srWidth} marginLeft-auto marginRight-auto;
    screen-sm: width-100pct maxWidth-{props.smWidth} marginLeft-auto marginRight-auto;
    screen-md: width-100pct maxWidth-{props.mdWidth} marginLeft-auto marginRight-auto;
    screen-lg: width-100pct maxWidth-{props.lgWidth} marginLeft-auto marginRight-auto;
    screen-lr: width-100pct maxWidth-{props.lrWidth} marginLeft-auto marginRight-auto;
    screen-ls: width-100pct maxWidth-{props.lsWidth} marginLeft-auto marginRight-auto;
    screen-wd: width-100pct maxWidth-{props.wdWidth} marginLeft-auto marginRight-auto;
    screen-wr: width-100pct maxWidth-{props.wrWidth} marginLeft-auto marginRight-auto;
    print: width-100pct maxWidth-100pct padding-0px margin-0px;
  }
  
  .{refs.name}Fluid {
    ref: width-100pct maxWidth-100vw paddingLeft-0.375rem paddingRight-0.375rem;
    print: width-100pct maxWidth-100pct padding-0px margin-0px;
  }
  
  @if size is smaller {
    .{refs.name}Smaller {
      ref: width-100pct maxWidth-100vw paddingLeft-0.375rem paddingRight-0.375rem;
      screen-sr: width-100pct maxWidth-{props.srWidth} marginLeft-auto marginRight-auto;
      print: width-100pct maxWidth-100pct padding-0px margin-0px;
    }
  }
  
  @if size is small {
    .{refs.name}Small {
      ref: width-100pct maxWidth-100vw paddingLeft-0.375rem paddingRight-0.375rem;
      screen-sr: width-100pct maxWidth-{props.srWidth} marginLeft-auto marginRight-auto;
      screen-sm: width-100pct maxWidth-{props.smWidth} marginLeft-auto marginRight-auto;
      print: width-100pct maxWidth-100pct padding-0px margin-0px;
    }
  }
  
  @if size is medium {
    .{refs.name}Medium {
      ref: width-100pct maxWidth-100vw paddingLeft-0.375rem paddingRight-0.375rem;
      screen-sr: width-100pct maxWidth-{props.srWidth} marginLeft-auto marginRight-auto;
      screen-sm: width-100pct maxWidth-{props.smWidth} marginLeft-auto marginRight-auto;
      screen-md: width-100pct maxWidth-{props.mdWidth} marginLeft-auto marginRight-auto;
      print: width-100pct maxWidth-100pct padding-0px margin-0px;
    }
  }
  
  @if size is large {
    .{refs.name}Large {
      ref: width-100pct maxWidth-100vw paddingLeft-0.375rem paddingRight-0.375rem;
      screen-sr: width-100pct maxWidth-{props.srWidth} marginLeft-auto marginRight-auto;
      screen-sm: width-100pct maxWidth-{props.smWidth} marginLeft-auto marginRight-auto;
      screen-md: width-100pct maxWidth-{props.mdWidth} marginLeft-auto marginRight-auto;
      screen-lg: width-100pct maxWidth-{props.lgWidth} marginLeft-auto marginRight-auto;
      print: width-100pct maxWidth-100pct padding-0px margin-0px;
    }
  }
  
  @if size is larger {
    .{refs.name}Larger {
      ref: width-100pct maxWidth-100vw paddingLeft-0.375rem paddingRight-0.375rem;
      screen-sr: width-100pct maxWidth-{props.srWidth} marginLeft-auto marginRight-auto;
      screen-sm: width-100pct maxWidth-{props.smWidth} marginLeft-auto marginRight-auto;
      screen-md: width-100pct maxWidth-{props.mdWidth} marginLeft-auto marginRight-auto;
      screen-lg: width-100pct maxWidth-{props.lgWidth} marginLeft-auto marginRight-auto;
      screen-lr: width-100pct maxWidth-{props.lrWidth} marginLeft-auto marginRight-auto;
      print: width-100pct maxWidth-100pct padding-0px margin-0px;
    }
  }
  
  @if size is largest {
    .{refs.name}Largest {
      ref: width-100pct maxWidth-100vw paddingLeft-0.375rem paddingRight-0.375rem;
      screen-sr: width-100pct maxWidth-{props.srWidth} marginLeft-auto marginRight-auto;
      screen-sm: width-100pct maxWidth-{props.smWidth} marginLeft-auto marginRight-auto;
      screen-md: width-100pct maxWidth-{props.mdWidth} marginLeft-auto marginRight-auto;
      screen-lg: width-100pct maxWidth-{props.lgWidth} marginLeft-auto marginRight-auto;
      screen-lr: width-100pct maxWidth-{props.lrWidth} marginLeft-auto marginRight-auto;
      screen-ls: width-100pct maxWidth-{props.lsWidth} marginLeft-auto marginRight-auto;
      print: width-100pct maxWidth-100pct padding-0px margin-0px;
    }
  }
  
  @if size is wide {
    .{refs.name}Wide {
      ref: width-100pct maxWidth-100vw paddingLeft-0.375rem paddingRight-0.375rem;
      screen-sr: width-100pct maxWidth-{props.srWidth} marginLeft-auto marginRight-auto;
      screen-sm: width-100pct maxWidth-{props.smWidth} marginLeft-auto marginRight-auto;
      screen-md: width-100pct maxWidth-{props.mdWidth} marginLeft-auto marginRight-auto;
      screen-lg: width-100pct maxWidth-{props.lgWidth} marginLeft-auto marginRight-auto;
      screen-lr: width-100pct maxWidth-{props.lrWidth} marginLeft-auto marginRight-auto;
      screen-ls: width-100pct maxWidth-{props.lsWidth} marginLeft-auto marginRight-auto;
      screen-wd: width-100pct maxWidth-{props.wdWidth} marginLeft-auto marginRight-auto;
      print: width-100pct maxWidth-100pct padding-0px margin-0px;
    }
  }
  
  @if size is wider {
    .{refs.name}Wider {
      ref: width-100pct maxWidth-100vw paddingLeft-0.375rem paddingRight-0.375rem;
      screen-sr: width-100pct maxWidth-{props.srWidth} marginLeft-auto marginRight-auto;
      screen-sm: width-100pct maxWidth-{props.smWidth} marginLeft-auto marginRight-auto;
      screen-md: width-100pct maxWidth-{props.mdWidth} marginLeft-auto marginRight-auto;
      screen-lg: width-100pct maxWidth-{props.lgWidth} marginLeft-auto marginRight-auto;
      screen-lr: width-100pct maxWidth-{props.lrWidth} marginLeft-auto marginRight-auto;
      screen-ls: width-100pct maxWidth-{props.lsWidth} marginLeft-auto marginRight-auto;
      screen-wd: width-100pct maxWidth-{props.wdWidth} marginLeft-auto marginRight-auto;
      screen-wr: width-100pct maxWidth-{props.wrWidth} marginLeft-auto marginRight-auto;
      print: width-100pct maxWidth-100pct padding-0px margin-0px;
    }
  }
}