.container,
.container-x,
.section-container,
.container-vars {
  --max-width: 100%;
  --radius: theme(borderRadius.lg);
  --padding-x: theme(spacing.6);
  --container-width: calc(var(--max-width) - (var(--padding-x) * 2));

  @variant lg {
    --radius: theme(borderRadius.xl);
    --padding-x: theme(spacing.12);
  }

  @variant xl {
    --padding-x: theme(spacing.16);
  }

  @variant 2xl {
    --max-width: 96rem;
  }

  @media screen and (width >=1346px) {
    --container-width: calc(100% - (var(--padding-x) * 2));
  }

  @media screen and (width >=1454px) {
    --container-width: min(100%, var(--max-width));
  }
}

.container-vars,
.section-container,
.section-y,
.section-b {
  --padding-y: theme(spacing.9);

  @variant lg {
    --padding-y: theme(spacing.12);
  }
}

.container,
.section-container {
  width: 100%;
  padding-right: var(--padding-x);
  padding-left: var(--padding-x);

  @variant sm {
    max-width: calc(var(--max-width) + (var(--padding-x) * 2));
  }
}

.container-x {
  width: 100%;
  padding-right: var(--padding-x);
  padding-left: var(--padding-x);
}

.section-container,
.section-y {
  padding-top: var(--padding-y);
  padding-bottom: var(--padding-y);
}

.section-m-y {
  margin-top: var(--padding-y);
  margin-bottom: var(--padding-y);
}

.section-b {
  padding-bottom: var(--padding-y);
}