/* 12-column grid — aligned with app-docs/guides/06-vanilla-responsive-grid-spec.md */
:root {
  --container-max-width: 1200px;
  --container-padding: 16px;
  --gutter-x: 16px;
  --gutter-y: 16px;
}

.container,
.container-fluid {
  width: min(100%, var(--container-max-width));
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.container-fluid {
  width: 100%;
  max-width: none;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(var(--gutter-x) * -0.5);
  margin-block: calc(var(--gutter-y) * -0.5);
}

[class*="col-xs-"],
[class*="col-s-"],
[class*="col-m-"],
[class*="col-l-"],
[class*="col-xl-"],
[class*="col-hd-"] {
  width: 100%;
  max-width: 100%;
  padding-inline: calc(var(--gutter-x) * 0.5);
  padding-block: calc(var(--gutter-y) * 0.5);
}

.col-xs-1 { width: 8.3333%; max-width: 8.3333%; }
.col-xs-2 { width: 16.6667%; max-width: 16.6667%; }
.col-xs-3 { width: 25%; max-width: 25%; }
.col-xs-4 { width: 33.3333%; max-width: 33.3333%; }
.col-xs-5 { width: 41.6667%; max-width: 41.6667%; }
.col-xs-6 { width: 50%; max-width: 50%; }
.col-xs-7 { width: 58.3333%; max-width: 58.3333%; }
.col-xs-8 { width: 66.6667%; max-width: 66.6667%; }
.col-xs-9 { width: 75%; max-width: 75%; }
.col-xs-10 { width: 83.3333%; max-width: 83.3333%; }
.col-xs-11 { width: 91.6667%; max-width: 91.6667%; }
.col-xs-12 { width: 100%; max-width: 100%; }

@media (min-width: 576px) {
  .col-s-1 { width: 8.3333%; max-width: 8.3333%; }
  .col-s-2 { width: 16.6667%; max-width: 16.6667%; }
  .col-s-3 { width: 25%; max-width: 25%; }
  .col-s-4 { width: 33.3333%; max-width: 33.3333%; }
  .col-s-5 { width: 41.6667%; max-width: 41.6667%; }
  .col-s-6 { width: 50%; max-width: 50%; }
  .col-s-7 { width: 58.3333%; max-width: 58.3333%; }
  .col-s-8 { width: 66.6667%; max-width: 66.6667%; }
  .col-s-9 { width: 75%; max-width: 75%; }
  .col-s-10 { width: 83.3333%; max-width: 83.3333%; }
  .col-s-11 { width: 91.6667%; max-width: 91.6667%; }
  .col-s-12 { width: 100%; max-width: 100%; }
}

@media (min-width: 768px) {
  .col-m-1 { width: 8.3333%; max-width: 8.3333%; }
  .col-m-2 { width: 16.6667%; max-width: 16.6667%; }
  .col-m-3 { width: 25%; max-width: 25%; }
  .col-m-4 { width: 33.3333%; max-width: 33.3333%; }
  .col-m-5 { width: 41.6667%; max-width: 41.6667%; }
  .col-m-6 { width: 50%; max-width: 50%; }
  .col-m-7 { width: 58.3333%; max-width: 58.3333%; }
  .col-m-8 { width: 66.6667%; max-width: 66.6667%; }
  .col-m-9 { width: 75%; max-width: 75%; }
  .col-m-10 { width: 83.3333%; max-width: 83.3333%; }
  .col-m-11 { width: 91.6667%; max-width: 91.6667%; }
  .col-m-12 { width: 100%; max-width: 100%; }
}

@media (min-width: 992px) {
  .col-l-4 { width: 33.3333%; max-width: 33.3333%; }
  .col-l-6 { width: 50%; max-width: 50%; }
  .col-l-12 { width: 100%; max-width: 100%; }
}

.align-center {
  align-items: center;
}

.text-center {
  text-align: center;
}