@utility container {
  & {
    width: auto;
    max-width: var(--container-max-width, none);
    margin: 0 var(--container-margin);

    @variant sm {
      & {
        max-width: var(--container-max-width-sm, var(--container-max-width));
        margin: 0 var(--container-margin-sm, var(--container-margin));
      }
    }

    @variant md {
      & {
        max-width: var(--container-max-width-md, var(--container-max-width));
        margin: 0 var(--container-margin-md, var(--container-margin));
      }
    }

    @variant lg {
      & {
        max-width: var(--container-max-width-lg, var(--container-max-width-md));
        margin: 0 var(--container-margin-lg, var(--container-margin-md));
      }
    }

    @variant xl {
      & {
        max-width: var(--container-max-width-xl, var(--container-max-width-lg));
        margin: 0 var(--container-margin-xl, var(--container-margin-lg));
      }
    }

    @variant 2xl {
      & {
        max-width: var(
          --container-max-width-2xl,
          var(--container-max-width-xl)
        );
        margin: 0 var(--container-margin-2xl, var(--container-margin-xl));
      }
    }
  }
}

@utility container-margin-* {
  & {
    margin: 0 calc(--value(integer) * 1px);
    margin: 0 --value(--container-margin- *, [ *]);
  }
}

@utility container-max-width-* {
  & {
    max-width: 0 calc(--value(integer) * 1px);
    max-width: 0 --value(--container-max-width- *, [ *]);
  }
}