/* Container setup */
.x-container {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;

}

/* ----------------------------
   Responsive Grid Columns
-----------------------------*/

/* Base column widths (default xs: full width stacking) */
.xcol-1  { flex: 0 0 8.33%;  max-width: 8.33%; }
.xcol-2  { flex: 0 0 16.66%; max-width: 16.66%; }
.xcol-3  { flex: 0 0 25%;    max-width: 25%; }
.xcol-4  { flex: 0 0 33.33%; max-width: 33.33%; }
.xcol-5  { flex: 0 0 41.66%; max-width: 41.66%; }
.xcol-6  { flex: 0 0 50%;    max-width: 50%; }
.xcol-7  { flex: 0 0 58.33%; max-width: 58.33%; }
.xcol-8  { flex: 0 0 66.66%; max-width: 66.66%; }
.xcol-9  { flex: 0 0 75%;    max-width: 75%; }
.xcol-10 { flex: 0 0 83.33%; max-width: 83.33%; }
.xcol-11 { flex: 0 0 91.66%; max-width: 91.66%; }
.xcol-12 { flex: 0 0 100%;   max-width: 100%; }

/* ----------------------------
   Display Utilities Base
-----------------------------*/
.xd-none { display: none !important; }
.xd-block { display: block !important; }

/* ----------------------------
   Order Utilities Base
-----------------------------*/
.xorder-0  { order: 0 !important; }
.xorder-1  { order: 1 !important; }
.xorder-2  { order: 2 !important; }
.xorder-3  { order: 3 !important; }
.xorder-4  { order: 4 !important; }
.xorder-5  { order: 5 !important; }
.xorder-6  { order: 6 !important; }
.xorder-7  { order: 7 !important; }
.xorder-8  { order: 8 !important; }
.xorder-9  { order: 9 !important; }
.xorder-10 { order: 10 !important; }
.xorder-11 { order: 11 !important; }
.xorder-12 { order: 12 !important; }
.xorder-first { order: -1 !important; }
.xorder-last  { order: 13 !important; }

/* ----------------------------
   Container Queries by Breakpoint
   (Bootstrap-like breakpoints)
-----------------------------*/

/* XS: max-width 575.98px */
@container (max-width: 475.98px) {
  /* Columns stack full width */
  .x-container [class*="xcol-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  /* Display */
  .x-container .xd-none-xs { display: none !important; }
  .x-container .xd-block-xs { display: block !important; }
  /* Order */
  .x-container .xorder-xs-0  { order: 0 !important; }
  .x-container .xorder-xs-1  { order: 1 !important; }
  .x-container .xorder-xs-2  { order: 2 !important; }
  .x-container .xorder-xs-3  { order: 3 !important; }
  .x-container .xorder-xs-4  { order: 4 !important; }
  .x-container .xorder-xs-5  { order: 5 !important; }
  .x-container .xorder-xs-6  { order: 6 !important; }
  .x-container .xorder-xs-7  { order: 7 !important; }
  .x-container .xorder-xs-8  { order: 8 !important; }
  .x-container .xorder-xs-9  { order: 9 !important; }
  .x-container .xorder-xs-10 { order: 10 !important; }
  .x-container .xorder-xs-11 { order: 11 !important; }
  .x-container .xorder-xs-12 { order: 12 !important; }
  .x-container .xorder-xs-first { order: -1 !important; }
  .x-container .xorder-xs-last  { order: 13 !important; }
}

/* SM: 476px and up */
@container (min-width: 476px) {
  /* Columns */
  .x-container .xcol-sm-1  { flex: 0 0 8.33%;  max-width: 8.33%; }
  .x-container .xcol-sm-2  { flex: 0 0 16.66%; max-width: 16.66%; }
  .x-container .xcol-sm-3  { flex: 0 0 25%;    max-width: 25%; }
  .x-container .xcol-sm-4  { flex: 0 0 33.33%; max-width: 33.33%; }
  .x-container .xcol-sm-5  { flex: 0 0 41.66%; max-width: 41.66%; }
  .x-container .xcol-sm-6  { flex: 0 0 50%;    max-width: 50%; }
  .x-container .xcol-sm-7  { flex: 0 0 58.33%; max-width: 58.33%; }
  .x-container .xcol-sm-8  { flex: 0 0 66.66%; max-width: 66.66%; }
  .x-container .xcol-sm-9  { flex: 0 0 75%;    max-width: 75%; }
  .x-container .xcol-sm-10 { flex: 0 0 83.33%; max-width: 83.33%; }
  .x-container .xcol-sm-11 { flex: 0 0 91.66%; max-width: 91.66%; }
  .x-container .xcol-sm-12 { flex: 0 0 100%;   max-width: 100%; }

  /* Display */
  .x-container .xd-none-sm { display: none !important; }
  .x-container .xd-block-sm { display: block !important; }

  /* Order */
  .x-container .xorder-sm-0  { order: 0 !important; }
  .x-container .xorder-sm-1  { order: 1 !important; }
  .x-container .xorder-sm-2  { order: 2 !important; }
  .x-container .xorder-sm-3  { order: 3 !important; }
  .x-container .xorder-sm-4  { order: 4 !important; }
  .x-container .xorder-sm-5  { order: 5 !important; }
  .x-container .xorder-sm-6  { order: 6 !important; }
  .x-container .xorder-sm-7  { order: 7 !important; }
  .x-container .xorder-sm-8  { order: 8 !important; }
  .x-container .xorder-sm-9  { order: 9 !important; }
  .x-container .xorder-sm-10 { order: 10 !important; }
  .x-container .xorder-sm-11 { order: 11 !important; }
  .x-container .xorder-sm-12 { order: 12 !important; }
  .x-container .xorder-sm-first { order: -1 !important; }
  .x-container .xorder-sm-last  { order: 13 !important; }
}

/* MD: 668px and up */
@container (min-width: 668px) {
  /* Columns */
  .x-container .xcol-md-1  { flex: 0 0 8.33%;  max-width: 8.33%; }
  .x-container .xcol-md-2  { flex: 0 0 16.66%; max-width: 16.66%; }
  .x-container .xcol-md-3  { flex: 0 0 25%;    max-width: 25%; }
  .x-container .xcol-md-4  { flex: 0 0 33.33%; max-width: 33.33%; }
  .x-container .xcol-md-5  { flex: 0 0 41.66%; max-width: 41.66%; }
  .x-container .xcol-md-6  { flex: 0 0 50%;    max-width: 50%; }
  .x-container .xcol-md-7  { flex: 0 0 58.33%; max-width: 58.33%; }
  .x-container .xcol-md-8  { flex: 0 0 66.66%; max-width: 66.66%; }
  .x-container .xcol-md-9  { flex: 0 0 75%;    max-width: 75%; }
  .x-container .xcol-md-10 { flex: 0 0 83.33%; max-width: 83.33%; }
  .x-container .xcol-md-11 { flex: 0 0 91.66%; max-width: 91.66%; }
  .x-container .xcol-md-12 { flex: 0 0 100%;   max-width: 100%; }

  /* Display */
  .x-container .xd-none-md { display: none !important; }
  .x-container .xd-block-md { display: block !important; }

  /* Order */
  .x-container .xorder-md-0  { order: 0 !important; }
  .x-container .xorder-md-1  { order: 1 !important; }
  .x-container .xorder-md-2  { order: 2 !important; }
  .x-container .xorder-md-3  { order: 3 !important; }
  .x-container .xorder-md-4  { order: 4 !important; }
  .x-container .xorder-md-5  { order: 5 !important; }
  .x-container .xorder-md-6  { order: 6 !important; }
  .x-container .xorder-md-7  { order: 7 !important; }
  .x-container .xorder-md-8  { order: 8 !important; }
  .x-container .xorder-md-9  { order: 9 !important; }
  .x-container .xorder-md-10 { order: 10 !important; }
  .x-container .xorder-md-11 { order: 11 !important; }
  .x-container .xorder-md-12 { order: 12 !important; }
  .x-container .xorder-md-first { order: -1 !important; }
  .x-container .xorder-md-last  { order: 13 !important; }
}

/* LG: 792px and up */
@container (min-width: 792px) {
  /* Columns */
  .x-container .xcol-lg-1  { flex: 0 0 8.33%;  max-width: 8.33%; }
  .x-container .xcol-lg-2  { flex: 0 0 16.66%; max-width: 16.66%; }
  .x-container .xcol-lg-3  { flex: 0 0 25%;    max-width: 25%; }
  .x-container .xcol-lg-4  { flex: 0 0 33.33%; max-width: 33.33%; }
  .x-container .xcol-lg-5  { flex: 0 0 41.66%; max-width: 41.66%; }
  .x-container .xcol-lg-6  { flex: 0 0 50%;    max-width: 50%; }
  .x-container .xcol-lg-7  { flex: 0 0 58.33%; max-width: 58.33%; }
  .x-container .xcol-lg-8  { flex: 0 0 66.66%; max-width: 66.66%; }
  .x-container .xcol-lg-9  { flex: 0 0 75%;    max-width: 75%; }
  .x-container .xcol-lg-10 { flex: 0 0 83.33%; max-width: 83.33%; }
  .x-container .xcol-lg-11 { flex: 0 0 91.66%; max-width: 91.66%; }
  .x-container .xcol-lg-12 { flex: 0 0 100%;   max-width: 100%; }

  /* Display */
  .x-container .xd-none-lg { display: none !important; }
  .x-container .xd-block-lg { display: block !important; }

  /* Order */
  .x-container .xorder-lg-0  { order: 0 !important; }
  .x-container .xorder-lg-1  { order: 1 !important; }
  .x-container .xorder-lg-2  { order: 2 !important; }
  .x-container .xorder-lg-3  { order: 3 !important; }
  .x-container .xorder-lg-4  { order: 4 !important; }
  .x-container .xorder-lg-5  { order: 5 !important; }
  .x-container .xorder-lg-6  { order: 6 !important; }
  .x-container .xorder-lg-7  { order: 7 !important; }
  .x-container .xorder-lg-8  { order: 8 !important; }
  .x-container .xorder-lg-9  { order: 9 !important; }
  .x-container .xorder-lg-10 { order: 10 !important; }
  .x-container .xorder-lg-11 { order: 11 !important; }
  .x-container .xorder-lg-12 { order: 12 !important; }
  .x-container .xorder-lg-first { order: -1 !important; }
  .x-container .xorder-lg-last  { order: 13 !important; }
}

/* XL: 1000px and up */
@container (min-width: 1000px) {
  /* Columns */
  .x-container .xcol-xl-1  { flex: 0 0 8.33%;  max-width: 8.33%; }
  .x-container .xcol-xl-2  { flex: 0 0 16.66%; max-width: 16.66%; }
  .x-container .xcol-xl-3  { flex: 0 0 25%;    max-width: 25%; }
  .x-container .xcol-xl-4  { flex: 0 0 33.33%; max-width: 33.33%; }
  .x-container .xcol-xl-5  { flex: 0 0 41.66%; max-width: 41.66%; }
  .x-container .xcol-xl-6  { flex: 0 0 50%;    max-width: 50%; }
  .x-container .xcol-xl-7  { flex: 0 0 58.33%; max-width: 58.33%; }
  .x-container .xcol-xl-8  { flex: 0 0 66.66%; max-width: 66.66%; }
  .x-container .xcol-xl-9  { flex: 0 0 75%;    max-width: 75%; }
  .x-container .xcol-xl-10 { flex: 0 0 83.33%; max-width: 83.33%; }
  .x-container .xcol-xl-11 { flex: 0 0 91.66%; max-width: 91.66%; }
  .x-container .xcol-xl-12 { flex: 0 0 100%;   max-width: 100%; }

  /* Display */
  .x-container .xd-none-xl { display: none !important; }
  .x-container .xd-block-xl { display: block !important; }

  /* Order */
  .x-container .xorder-xl-0  { order: 0 !important; }
  .x-container .xorder-xl-1  { order: 1 !important; }
  .x-container .xorder-xl-2  { order: 2 !important; }
  .x-container .xorder-xl-3  { order: 3 !important; }
  .x-container .xorder-xl-4  { order: 4 !important; }
  .x-container .xorder-xl-5  { order: 5 !important; }
  .x-container .xorder-xl-6  { order: 6 !important; }
  .x-container .xorder-xl-7  { order: 7 !important; }
  .x-container .xorder-xl-8  { order: 8 !important; }
  .x-container .xorder-xl-9  { order: 9 !important; }
  .x-container .xorder-xl-10 { order: 10 !important; }
  .x-container .xorder-xl-11 { order: 11 !important; }
  .x-container .xorder-xl-12 { order: 12 !important; }
  .x-container .xorder-xl-first { order: -1 !important; }
  .x-container .xorder-xl-last  { order: 13 !important; }
}

/* XXL: 1252px and up */
@container (min-width: 1252px) {
  /* Columns */
  .x-container .xcol-xxl-1  { flex: 0 0 8.33%;  max-width: 8.33%; }
  .x-container .xcol-xxl-2  { flex: 0 0 16.66%; max-width: 16.66%; }
  .x-container .xcol-xxl-3  { flex: 0 0 25%;    max-width: 25%; }
  .x-container .xcol-xxl-4  { flex: 0 0 33.33%; max-width: 33.33%; }
  .x-container .xcol-xxl-5  { flex: 0 0 41.66%; max-width: 41.66%; }
  .x-container .xcol-xxl-6  { flex: 0 0 50%;    max-width: 50%; }
  .x-container .xcol-xxl-7  { flex: 0 0 58.33%; max-width: 58.33%; }
  .x-container .xcol-xxl-8  { flex: 0 0 66.66%; max-width: 66.66%; }
  .x-container .xcol-xxl-9  { flex: 0 0 75%;    max-width: 75%; }
  .x-container .xcol-xxl-10 { flex: 0 0 83.33%; max-width: 83.33%; }
  .x-container .xcol-xxl-11 { flex: 0 0 91.66%; max-width: 91.66%; }
  .x-container .xcol-xxl-12 { flex: 0 0 100%;   max-width: 100%; }

  /* Display */
  .x-container .xd-none-xxl { display: none !important; }
  .x-container .xd-block-xxl { display: block !important; }

  /* Order */
  .x-container .xorder-xxl-0  { order: 0 !important; }
  .x-container .xorder-xxl-1  { order: 1 !important; }
  .x-container .xorder-xxl-2  { order: 2 !important; }
  .x-container .xorder-xxl-3  { order: 3 !important; }
  .x-container .xorder-xxl-4  { order: 4 !important; }
  .x-container .xorder-xxl-5  { order: 5 !important; }
  .x-container .xorder-xxl-6  { order: 6 !important; }
  .x-container .xorder-xxl-7  { order: 7 !important; }
  .x-container .xorder-xxl-8  { order: 8 !important; }
  .x-container .xorder-xxl-9  { order: 9 !important; }
  .x-container .xorder-xxl-10 { order: 10 !important; }
  .x-container .xorder-xxl-11 { order: 11 !important; }
  .x-container .xorder-xxl-12 { order: 12 !important; }
  .x-container .xorder-xxl-first { order: -1 !important; }
  .x-container .xorder-xxl-last  { order: 13 !important; }
}