/*! @blueprintui/layout | MIT license | https://blueprintui.dev/docs/layout */
:root, :host {
  --βgfr: calc(100vw / 12);
  --β1: var(--bp-space-xs, 8px);
  --β2: var(--bp-space-sm, 16px);
  --β3: var(--bp-space-md, 24px);
  --β4: var(--bp-space-lg, 48px);
  --β5: var(--bp-space-xl, 64px);
  --βs1: span 1 / span 1;
  --βs2: span 2 / span 2;
  --βs3: span 3 / span 3;
  --βs4: span 4 / span 4;
  --βs5: span 5 / span 5;
  --βs6: span 6 / span 6;
  --βs7: span 7 / span 7;
  --βs8: span 8 / span 8;
  --βs9: span 9 / span 9;
  --βs10: span 10 / span 10;
  --βs11: span 11 / span 11;
  --βs12: span 12 / span 12;
}

@layer blueprintui {
  @layer layout {
    [bp-layout~="fill"] > * {
      flex-grow: 1 !important;
      flex-basis: 0 !important;
    }

    [bp-layout~="wrap:none"] {
      flex-wrap: nowrap !important;
    }

    [bp-layout~="fill"] {
      flex-grow: 1 !important;
    }

    [bp-layout~="shrink"] {
      flex-grow: 0 !important;
      flex-shrink: 1 !important;
    }

    @container (width >= 320px) {
      [bp-layout~="fill@xs"] > * {
        flex-grow: 1 !important;
        flex-basis: 0 !important;
      }

      [bp-layout~="wrap:none@xs"] {
        flex-wrap: nowrap !important;
      }

      [bp-layout~="fill@xs"] {
        flex-grow: 1 !important;
      }

      [bp-layout~="shrink@xs"] {
        flex-grow: 0 !important;
        flex-shrink: 1 !important;
      }
    }

    @container (width >= 480px) {
      [bp-layout~="fill@sm"] > * {
        flex-grow: 1 !important;
        flex-basis: 0 !important;
      }

      [bp-layout~="wrap:none@sm"] {
        flex-wrap: nowrap !important;
      }

      [bp-layout~="fill@sm"] {
        flex-grow: 1 !important;
      }

      [bp-layout~="shrink@sm"] {
        flex-grow: 0 !important;
        flex-shrink: 1 !important;
      }
    }

    @container (width >= 720px) {
      [bp-layout~="fill@md"] > * {
        flex-grow: 1 !important;
        flex-basis: 0 !important;
      }

      [bp-layout~="wrap:none@md"] {
        flex-wrap: nowrap !important;
      }

      [bp-layout~="fill@md"] {
        flex-grow: 1 !important;
      }

      [bp-layout~="shrink@md"] {
        flex-grow: 0 !important;
        flex-shrink: 1 !important;
      }
    }

    @container (width >= 1024px) {
      [bp-layout~="fill@lg"] > * {
        flex-grow: 1 !important;
        flex-basis: 0 !important;
      }

      [bp-layout~="wrap:none@lg"] {
        flex-wrap: nowrap !important;
      }

      [bp-layout~="fill@lg"] {
        flex-grow: 1 !important;
      }

      [bp-layout~="shrink@lg"] {
        flex-grow: 0 !important;
        flex-shrink: 1 !important;
      }
    }

    @container (width >= 1168px) {
      [bp-layout~="fill@xl"] > * {
        flex-grow: 1 !important;
        flex-basis: 0 !important;
      }

      [bp-layout~="wrap:none@xl"] {
        flex-wrap: nowrap !important;
      }

      [bp-layout~="fill@xl"] {
        flex-grow: 1 !important;
      }

      [bp-layout~="shrink@xl"] {
        flex-grow: 0 !important;
        flex-shrink: 1 !important;
      }
    }

    [bp-layout~="block"] {
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      width: 100%;
      display: flex;
      container-type: inline-size;
    }

    [bp-layout~="block"] {
      &[bp-layout~="block:start"] {
        justify-content: start;
      }

      &[bp-layout~="block:end"] {
        justify-content: end;
      }

      &[bp-layout~="block:center"] {
        justify-content: center;
      }

      &[bp-layout~="inline:start"] {
        align-items: start;
      }

      &[bp-layout~="inline:end"] {
        align-items: end;
      }

      &[bp-layout~="inline:center"] {
        align-items: center;
      }

      &[bp-layout~="center"] {
        justify-content: center;
        align-items: center;
      }

      & > [bp-layout~="center"] {
        align-self: center;
        margin-block: auto;
      }

      & > [bp-layout~="block:start"] {
        margin-block-end: auto;
      }

      & > [bp-layout~="block:end"] {
        margin-block-start: auto !important;
      }

      & > [bp-layout~="block:center"] {
        margin-block: auto;
      }

      & > [bp-layout~="inline:start"] {
        margin-inline-end: auto;
      }

      & > [bp-layout~="inline:end"] {
        margin-inline-start: auto;
      }

      & > [bp-layout~="inline:center"] {
        align-self: center;
      }

      &[bp-layout~="align:block-stretch"] {
        justify-content: stretch;

        & > * {
          flex-grow: 1;
        }
      }

      &[bp-layout~="align:inline-stretch"] {
        align-items: stretch;
      }

      &[bp-layout~="align:stretch"] {
        justify-content: stretch;
        align-items: stretch;

        & > * {
          flex-grow: 1;
        }
      }
    }

    @container (width >= 320px) {
      [bp-layout~="block"] {
        &[bp-layout~="block:start@xs"] {
          justify-content: start;
        }

        &[bp-layout~="block:end@xs"] {
          justify-content: end;
        }

        &[bp-layout~="block:center@xs"] {
          justify-content: center;
        }

        &[bp-layout~="inline:start@xs"] {
          align-items: start;
        }

        &[bp-layout~="inline:end@xs"] {
          align-items: end;
        }

        &[bp-layout~="inline:center@xs"] {
          align-items: center;
        }

        &[bp-layout~="center@xs"] {
          justify-content: center;
          align-items: center;
        }

        & > [bp-layout~="center@xs"] {
          align-self: center;
          margin-block: auto;
        }

        & > [bp-layout~="block:start@xs"] {
          margin-block-end: auto;
        }

        & > [bp-layout~="block:end@xs"] {
          margin-block-start: auto !important;
        }

        & > [bp-layout~="block:center@xs"] {
          margin-block: auto;
        }

        & > [bp-layout~="inline:start@xs"] {
          margin-inline-end: auto;
        }

        & > [bp-layout~="inline:end@xs"] {
          margin-inline-start: auto;
        }

        & > [bp-layout~="inline:center@xs"] {
          align-self: center;
        }

        &[bp-layout~="align:block-stretch@xs"] {
          justify-content: stretch;

          & > * {
            flex-grow: 1;
          }
        }

        &[bp-layout~="align:inline-stretch@xs"] {
          align-items: stretch;
        }

        &[bp-layout~="align:stretch@xs"] {
          justify-content: stretch;
          align-items: stretch;

          & > * {
            flex-grow: 1;
          }
        }
      }
    }

    @container (width >= 480px) {
      [bp-layout~="block"] {
        &[bp-layout~="block:start@sm"] {
          justify-content: start;
        }

        &[bp-layout~="block:end@sm"] {
          justify-content: end;
        }

        &[bp-layout~="block:center@sm"] {
          justify-content: center;
        }

        &[bp-layout~="inline:start@sm"] {
          align-items: start;
        }

        &[bp-layout~="inline:end@sm"] {
          align-items: end;
        }

        &[bp-layout~="inline:center@sm"] {
          align-items: center;
        }

        &[bp-layout~="center@sm"] {
          justify-content: center;
          align-items: center;
        }

        & > [bp-layout~="center@sm"] {
          align-self: center;
          margin-block: auto;
        }

        & > [bp-layout~="block:start@sm"] {
          margin-block-end: auto;
        }

        & > [bp-layout~="block:end@sm"] {
          margin-block-start: auto !important;
        }

        & > [bp-layout~="block:center@sm"] {
          margin-block: auto;
        }

        & > [bp-layout~="inline:start@sm"] {
          margin-inline-end: auto;
        }

        & > [bp-layout~="inline:end@sm"] {
          margin-inline-start: auto;
        }

        & > [bp-layout~="inline:center@sm"] {
          align-self: center;
        }

        &[bp-layout~="align:block-stretch@sm"] {
          justify-content: stretch;

          & > * {
            flex-grow: 1;
          }
        }

        &[bp-layout~="align:inline-stretch@sm"] {
          align-items: stretch;
        }

        &[bp-layout~="align:stretch@sm"] {
          justify-content: stretch;
          align-items: stretch;

          & > * {
            flex-grow: 1;
          }
        }
      }
    }

    @container (width >= 720px) {
      [bp-layout~="block"] {
        &[bp-layout~="block:start@md"] {
          justify-content: start;
        }

        &[bp-layout~="block:end@md"] {
          justify-content: end;
        }

        &[bp-layout~="block:center@md"] {
          justify-content: center;
        }

        &[bp-layout~="inline:start@md"] {
          align-items: start;
        }

        &[bp-layout~="inline:end@md"] {
          align-items: end;
        }

        &[bp-layout~="inline:center@md"] {
          align-items: center;
        }

        &[bp-layout~="center@md"] {
          justify-content: center;
          align-items: center;
        }

        & > [bp-layout~="center@md"] {
          align-self: center;
          margin-block: auto;
        }

        & > [bp-layout~="block:start@md"] {
          margin-block-end: auto;
        }

        & > [bp-layout~="block:end@md"] {
          margin-block-start: auto !important;
        }

        & > [bp-layout~="block:center@md"] {
          margin-block: auto;
        }

        & > [bp-layout~="inline:start@md"] {
          margin-inline-end: auto;
        }

        & > [bp-layout~="inline:end@md"] {
          margin-inline-start: auto;
        }

        & > [bp-layout~="inline:center@md"] {
          align-self: center;
        }

        &[bp-layout~="align:block-stretch@md"] {
          justify-content: stretch;

          & > * {
            flex-grow: 1;
          }
        }

        &[bp-layout~="align:inline-stretch@md"] {
          align-items: stretch;
        }

        &[bp-layout~="align:stretch@md"] {
          justify-content: stretch;
          align-items: stretch;

          & > * {
            flex-grow: 1;
          }
        }
      }
    }

    @container (width >= 1024px) {
      [bp-layout~="block"] {
        &[bp-layout~="block:start@lg"] {
          justify-content: start;
        }

        &[bp-layout~="block:end@lg"] {
          justify-content: end;
        }

        &[bp-layout~="block:center@lg"] {
          justify-content: center;
        }

        &[bp-layout~="inline:start@lg"] {
          align-items: start;
        }

        &[bp-layout~="inline:end@lg"] {
          align-items: end;
        }

        &[bp-layout~="inline:center@lg"] {
          align-items: center;
        }

        &[bp-layout~="center@lg"] {
          justify-content: center;
          align-items: center;
        }

        & > [bp-layout~="center@lg"] {
          align-self: center;
          margin-block: auto;
        }

        & > [bp-layout~="block:start@lg"] {
          margin-block-end: auto;
        }

        & > [bp-layout~="block:end@lg"] {
          margin-block-start: auto !important;
        }

        & > [bp-layout~="block:center@lg"] {
          margin-block: auto;
        }

        & > [bp-layout~="inline:start@lg"] {
          margin-inline-end: auto;
        }

        & > [bp-layout~="inline:end@lg"] {
          margin-inline-start: auto;
        }

        & > [bp-layout~="inline:center@lg"] {
          align-self: center;
        }

        &[bp-layout~="align:block-stretch@lg"] {
          justify-content: stretch;

          & > * {
            flex-grow: 1;
          }
        }

        &[bp-layout~="align:inline-stretch@lg"] {
          align-items: stretch;
        }

        &[bp-layout~="align:stretch@lg"] {
          justify-content: stretch;
          align-items: stretch;

          & > * {
            flex-grow: 1;
          }
        }
      }
    }

    @container (width >= 1168px) {
      [bp-layout~="block"] {
        &[bp-layout~="block:start@xl"] {
          justify-content: start;
        }

        &[bp-layout~="block:end@xl"] {
          justify-content: end;
        }

        &[bp-layout~="block:center@xl"] {
          justify-content: center;
        }

        &[bp-layout~="inline:start@xl"] {
          align-items: start;
        }

        &[bp-layout~="inline:end@xl"] {
          align-items: end;
        }

        &[bp-layout~="inline:center@xl"] {
          align-items: center;
        }

        &[bp-layout~="center@xl"] {
          justify-content: center;
          align-items: center;
        }

        & > [bp-layout~="center@xl"] {
          align-self: center;
          margin-block: auto;
        }

        & > [bp-layout~="block:start@xl"] {
          margin-block-end: auto;
        }

        & > [bp-layout~="block:end@xl"] {
          margin-block-start: auto !important;
        }

        & > [bp-layout~="block:center@xl"] {
          margin-block: auto;
        }

        & > [bp-layout~="inline:start@xl"] {
          margin-inline-end: auto;
        }

        & > [bp-layout~="inline:end@xl"] {
          margin-inline-start: auto;
        }

        & > [bp-layout~="inline:center@xl"] {
          align-self: center;
        }

        &[bp-layout~="align:block-stretch@xl"] {
          justify-content: stretch;

          & > * {
            flex-grow: 1;
          }
        }

        &[bp-layout~="align:inline-stretch@xl"] {
          align-items: stretch;
        }

        &[bp-layout~="align:stretch@xl"] {
          justify-content: stretch;
          align-items: stretch;

          & > * {
            flex-grow: 1;
          }
        }
      }
    }

    [bp-layout~="inline"] {
      width: 100%;
      margin-inline: initial;
      margin-block: initial;
      flex-flow: wrap;
      align-content: flex-start;
      place-items: flex-start start;
      min-height: 0;
      display: flex;
      container-type: inline-size;

      & > [bp-layout~="inline"], & > [bp-layout~="block"], & > [bp-text] {
        width: initial !important;
        container-type: initial !important;
      }
    }

    [bp-layout~="inline"]:has( > [bp-layout*="block:"]) {
      flex-wrap: initial;
    }

    [bp-layout~="inline"] {
      &[bp-layout~="block:start"] {
        align-content: start;
        align-items: start;
      }

      &[bp-layout~="block:end"] {
        align-content: end;
        align-items: end;
      }

      &[bp-layout~="block:center"] {
        align-content: center;
        align-items: center;
      }

      &[bp-layout~="inline:start"] {
        justify-content: start;
      }

      &[bp-layout~="inline:end"] {
        justify-content: end;
      }

      &[bp-layout~="inline:center"] {
        justify-content: center;
      }

      &[bp-layout~="center"] {
        place-content: center;
      }

      & > [bp-layout~="inline:start"] {
        margin-inline-end: auto;
      }

      & > [bp-layout~="inline:end"] {
        margin-inline-start: auto;
      }

      & > [bp-layout~="inline:center"] {
        margin-inline: auto;
      }

      & > [bp-layout~="center"] {
        align-self: center;
        margin-inline: auto;
      }

      & > [bp-layout~="block:center"] {
        align-self: center;
      }

      & > [bp-layout~="block:start"] {
        align-self: start;
      }

      & > [bp-layout~="block:end"] {
        align-self: end;
      }

      &[bp-layout~="block:stretch"] {
        flex-grow: 1;
        align-content: stretch;
        align-items: stretch;

        & > * {
          flex-grow: initial;
        }
      }

      &[bp-layout~="inline:stretch"] {
        flex-grow: 1;
        justify-content: stretch;
        align-items: start;

        & > * {
          flex-grow: 1;
        }
      }

      &[bp-layout~="stretch"] {
        flex-grow: 1;
        align-content: stretch;
        align-items: stretch;

        & > * {
          flex-grow: 1;
        }
      }
    }

    @container (width >= 320px) {
      [bp-layout~="inline"] {
        &[bp-layout~="block:start@xs"] {
          align-content: start;
          align-items: start;
        }

        &[bp-layout~="block:end@xs"] {
          align-content: end;
          align-items: end;
        }

        &[bp-layout~="block:center@xs"] {
          align-content: center;
          align-items: center;
        }

        &[bp-layout~="inline:start@xs"] {
          justify-content: start;
        }

        &[bp-layout~="inline:end@xs"] {
          justify-content: end;
        }

        &[bp-layout~="inline:center@xs"] {
          justify-content: center;
        }

        &[bp-layout~="center@xs"] {
          place-content: center;
        }

        & > [bp-layout~="inline:start@xs"] {
          margin-inline-end: auto;
        }

        & > [bp-layout~="inline:end@xs"] {
          margin-inline-start: auto;
        }

        & > [bp-layout~="inline:center@xs"] {
          margin-inline: auto;
        }

        & > [bp-layout~="center@xs"] {
          align-self: center;
          margin-inline: auto;
        }

        & > [bp-layout~="block:center@xs"] {
          align-self: center;
        }

        & > [bp-layout~="block:start@xs"] {
          align-self: start;
        }

        & > [bp-layout~="block:end@xs"] {
          align-self: end;
        }

        &[bp-layout~="block:stretch@xs"] {
          flex-grow: 1;
          align-content: stretch;
          align-items: stretch;

          & > * {
            flex-grow: initial;
          }
        }

        &[bp-layout~="inline:stretch@xs"] {
          flex-grow: 1;
          justify-content: stretch;
          align-items: start;

          & > * {
            flex-grow: 1;
          }
        }

        &[bp-layout~="stretch@xs"] {
          flex-grow: 1;
          align-content: stretch;
          align-items: stretch;

          & > * {
            flex-grow: 1;
          }
        }
      }
    }

    @container (width >= 480px) {
      [bp-layout~="inline"] {
        &[bp-layout~="block:start@sm"] {
          align-content: start;
          align-items: start;
        }

        &[bp-layout~="block:end@sm"] {
          align-content: end;
          align-items: end;
        }

        &[bp-layout~="block:center@sm"] {
          align-content: center;
          align-items: center;
        }

        &[bp-layout~="inline:start@sm"] {
          justify-content: start;
        }

        &[bp-layout~="inline:end@sm"] {
          justify-content: end;
        }

        &[bp-layout~="inline:center@sm"] {
          justify-content: center;
        }

        &[bp-layout~="center@sm"] {
          place-content: center;
        }

        & > [bp-layout~="inline:start@sm"] {
          margin-inline-end: auto;
        }

        & > [bp-layout~="inline:end@sm"] {
          margin-inline-start: auto;
        }

        & > [bp-layout~="inline:center@sm"] {
          margin-inline: auto;
        }

        & > [bp-layout~="center@sm"] {
          align-self: center;
          margin-inline: auto;
        }

        & > [bp-layout~="block:center@sm"] {
          align-self: center;
        }

        & > [bp-layout~="block:start@sm"] {
          align-self: start;
        }

        & > [bp-layout~="block:end@sm"] {
          align-self: end;
        }

        &[bp-layout~="block:stretch@sm"] {
          flex-grow: 1;
          align-content: stretch;
          align-items: stretch;

          & > * {
            flex-grow: initial;
          }
        }

        &[bp-layout~="inline:stretch@sm"] {
          flex-grow: 1;
          justify-content: stretch;
          align-items: start;

          & > * {
            flex-grow: 1;
          }
        }

        &[bp-layout~="stretch@sm"] {
          flex-grow: 1;
          align-content: stretch;
          align-items: stretch;

          & > * {
            flex-grow: 1;
          }
        }
      }
    }

    @container (width >= 720px) {
      [bp-layout~="inline"] {
        &[bp-layout~="block:start@md"] {
          align-content: start;
          align-items: start;
        }

        &[bp-layout~="block:end@md"] {
          align-content: end;
          align-items: end;
        }

        &[bp-layout~="block:center@md"] {
          align-content: center;
          align-items: center;
        }

        &[bp-layout~="inline:start@md"] {
          justify-content: start;
        }

        &[bp-layout~="inline:end@md"] {
          justify-content: end;
        }

        &[bp-layout~="inline:center@md"] {
          justify-content: center;
        }

        &[bp-layout~="center@md"] {
          place-content: center;
        }

        & > [bp-layout~="inline:start@md"] {
          margin-inline-end: auto;
        }

        & > [bp-layout~="inline:end@md"] {
          margin-inline-start: auto;
        }

        & > [bp-layout~="inline:center@md"] {
          margin-inline: auto;
        }

        & > [bp-layout~="center@md"] {
          align-self: center;
          margin-inline: auto;
        }

        & > [bp-layout~="block:center@md"] {
          align-self: center;
        }

        & > [bp-layout~="block:start@md"] {
          align-self: start;
        }

        & > [bp-layout~="block:end@md"] {
          align-self: end;
        }

        &[bp-layout~="block:stretch@md"] {
          flex-grow: 1;
          align-content: stretch;
          align-items: stretch;

          & > * {
            flex-grow: initial;
          }
        }

        &[bp-layout~="inline:stretch@md"] {
          flex-grow: 1;
          justify-content: stretch;
          align-items: start;

          & > * {
            flex-grow: 1;
          }
        }

        &[bp-layout~="stretch@md"] {
          flex-grow: 1;
          align-content: stretch;
          align-items: stretch;

          & > * {
            flex-grow: 1;
          }
        }
      }
    }

    @container (width >= 1024px) {
      [bp-layout~="inline"] {
        &[bp-layout~="block:start@lg"] {
          align-content: start;
          align-items: start;
        }

        &[bp-layout~="block:end@lg"] {
          align-content: end;
          align-items: end;
        }

        &[bp-layout~="block:center@lg"] {
          align-content: center;
          align-items: center;
        }

        &[bp-layout~="inline:start@lg"] {
          justify-content: start;
        }

        &[bp-layout~="inline:end@lg"] {
          justify-content: end;
        }

        &[bp-layout~="inline:center@lg"] {
          justify-content: center;
        }

        &[bp-layout~="center@lg"] {
          place-content: center;
        }

        & > [bp-layout~="inline:start@lg"] {
          margin-inline-end: auto;
        }

        & > [bp-layout~="inline:end@lg"] {
          margin-inline-start: auto;
        }

        & > [bp-layout~="inline:center@lg"] {
          margin-inline: auto;
        }

        & > [bp-layout~="center@lg"] {
          align-self: center;
          margin-inline: auto;
        }

        & > [bp-layout~="block:center@lg"] {
          align-self: center;
        }

        & > [bp-layout~="block:start@lg"] {
          align-self: start;
        }

        & > [bp-layout~="block:end@lg"] {
          align-self: end;
        }

        &[bp-layout~="block:stretch@lg"] {
          flex-grow: 1;
          align-content: stretch;
          align-items: stretch;

          & > * {
            flex-grow: initial;
          }
        }

        &[bp-layout~="inline:stretch@lg"] {
          flex-grow: 1;
          justify-content: stretch;
          align-items: start;

          & > * {
            flex-grow: 1;
          }
        }

        &[bp-layout~="stretch@lg"] {
          flex-grow: 1;
          align-content: stretch;
          align-items: stretch;

          & > * {
            flex-grow: 1;
          }
        }
      }
    }

    @container (width >= 1168px) {
      [bp-layout~="inline"] {
        &[bp-layout~="block:start@xl"] {
          align-content: start;
          align-items: start;
        }

        &[bp-layout~="block:end@xl"] {
          align-content: end;
          align-items: end;
        }

        &[bp-layout~="block:center@xl"] {
          align-content: center;
          align-items: center;
        }

        &[bp-layout~="inline:start@xl"] {
          justify-content: start;
        }

        &[bp-layout~="inline:end@xl"] {
          justify-content: end;
        }

        &[bp-layout~="inline:center@xl"] {
          justify-content: center;
        }

        &[bp-layout~="center@xl"] {
          place-content: center;
        }

        & > [bp-layout~="inline:start@xl"] {
          margin-inline-end: auto;
        }

        & > [bp-layout~="inline:end@xl"] {
          margin-inline-start: auto;
        }

        & > [bp-layout~="inline:center@xl"] {
          margin-inline: auto;
        }

        & > [bp-layout~="center@xl"] {
          align-self: center;
          margin-inline: auto;
        }

        & > [bp-layout~="block:center@xl"] {
          align-self: center;
        }

        & > [bp-layout~="block:start@xl"] {
          align-self: start;
        }

        & > [bp-layout~="block:end@xl"] {
          align-self: end;
        }

        &[bp-layout~="block:stretch@xl"] {
          flex-grow: 1;
          align-content: stretch;
          align-items: stretch;

          & > * {
            flex-grow: initial;
          }
        }

        &[bp-layout~="inline:stretch@xl"] {
          flex-grow: 1;
          justify-content: stretch;
          align-items: start;

          & > * {
            flex-grow: 1;
          }
        }

        &[bp-layout~="stretch@xl"] {
          flex-grow: 1;
          align-content: stretch;
          align-items: stretch;

          & > * {
            flex-grow: 1;
          }
        }
      }
    }

    [bp-layout~="grid"] {
      align-content: start;
      align-items: start;
      justify-content: initial;
      grid-template-columns: repeat(var(--bp-grid-cols, 12), 1fr);
      width: 100%;
      display: grid;
      container-type: inline-size;

      &[bp-layout*="rows"] {
        grid-template-rows: repeat(12, auto);
      }

      & > [bp-layout*="row"] {
        align-self: stretch;
      }

      &[bp-layout~="cols:auto"] {
        grid-auto-flow: column;
        grid-template-columns: initial;
      }
    }

    [bp-layout*="col"] {
      grid-column: span 12;
    }

    [bp-layout~="cols:1"] > * {
      grid-column: var(--βs1);
    }

    [bp-layout~="cols:2"] > * {
      grid-column: var(--βs2);
    }

    [bp-layout~="cols:3"] > * {
      grid-column: var(--βs3);
    }

    [bp-layout~="cols:4"] > * {
      grid-column: var(--βs4);
    }

    [bp-layout~="cols:5"] > * {
      grid-column: var(--βs5);
    }

    [bp-layout~="cols:6"] > * {
      grid-column: var(--βs6);
    }

    [bp-layout~="cols:7"] > * {
      grid-column: var(--βs7);
    }

    [bp-layout~="cols:8"] > * {
      grid-column: var(--βs8);
    }

    [bp-layout~="cols:9"] > * {
      grid-column: var(--βs9);
    }

    [bp-layout~="cols:10"] > * {
      grid-column: var(--βs10);
    }

    [bp-layout~="cols:11"] > * {
      grid-column: var(--βs11);
    }

    [bp-layout~="cols:12"] > * {
      grid-column: var(--βs12);
    }

    [bp-layout~="col:1"] {
      grid-column: var(--βs1);
    }

    [bp-layout~="col:2"] {
      grid-column: var(--βs2);
    }

    [bp-layout~="col:3"] {
      grid-column: var(--βs3);
    }

    [bp-layout~="col:4"] {
      grid-column: var(--βs4);
    }

    [bp-layout~="col:5"] {
      grid-column: var(--βs5);
    }

    [bp-layout~="col:6"] {
      grid-column: var(--βs6);
    }

    [bp-layout~="col:7"] {
      grid-column: var(--βs7);
    }

    [bp-layout~="col:8"] {
      grid-column: var(--βs8);
    }

    [bp-layout~="col:9"] {
      grid-column: var(--βs9);
    }

    [bp-layout~="col:10"] {
      grid-column: var(--βs10);
    }

    [bp-layout~="col:11"] {
      grid-column: var(--βs11);
    }

    [bp-layout~="col:12"] {
      grid-column: var(--βs12);
    }

    [bp-layout~="col:start-1"] {
      grid-column-start: 1;
    }

    [bp-layout~="col:end-1"] {
      grid-column-end: 1;
    }

    [bp-layout~="col:start-2"] {
      grid-column-start: 2;
    }

    [bp-layout~="col:end-2"] {
      grid-column-end: 2;
    }

    [bp-layout~="col:start-3"] {
      grid-column-start: 3;
    }

    [bp-layout~="col:end-3"] {
      grid-column-end: 3;
    }

    [bp-layout~="col:start-4"] {
      grid-column-start: 4;
    }

    [bp-layout~="col:end-4"] {
      grid-column-end: 4;
    }

    [bp-layout~="col:start-5"] {
      grid-column-start: 5;
    }

    [bp-layout~="col:end-5"] {
      grid-column-end: 5;
    }

    [bp-layout~="col:start-6"] {
      grid-column-start: 6;
    }

    [bp-layout~="col:end-6"] {
      grid-column-end: 6;
    }

    [bp-layout~="col:start-7"] {
      grid-column-start: 7;
    }

    [bp-layout~="col:end-7"] {
      grid-column-end: 7;
    }

    [bp-layout~="col:start-8"] {
      grid-column-start: 8;
    }

    [bp-layout~="col:end-8"] {
      grid-column-end: 8;
    }

    [bp-layout~="col:start-9"] {
      grid-column-start: 9;
    }

    [bp-layout~="col:end-9"] {
      grid-column-end: 9;
    }

    [bp-layout~="col:start-10"] {
      grid-column-start: 10;
    }

    [bp-layout~="col:end-10"] {
      grid-column-end: 10;
    }

    [bp-layout~="col:start-11"] {
      grid-column-start: 11;
    }

    [bp-layout~="col:end-11"] {
      grid-column-end: 11;
    }

    [bp-layout~="col:start-12"] {
      grid-column-start: 12;
    }

    [bp-layout~="col:end-12"] {
      grid-column-end: 12;
    }

    [bp-layout~="col:start-13"] {
      grid-column-start: 13;
    }

    [bp-layout~="col:end-13"] {
      grid-column-end: 13;
    }

    [bp-layout~="rows:1"] > * {
      grid-row: var(--βs1);
    }

    [bp-layout~="rows:2"] > * {
      grid-row: var(--βs2);
    }

    [bp-layout~="rows:3"] > * {
      grid-row: var(--βs3);
    }

    [bp-layout~="rows:4"] > * {
      grid-row: var(--βs4);
    }

    [bp-layout~="rows:5"] > * {
      grid-row: var(--βs5);
    }

    [bp-layout~="rows:6"] > * {
      grid-row: var(--βs6);
    }

    [bp-layout~="rows:7"] > * {
      grid-row: var(--βs7);
    }

    [bp-layout~="rows:8"] > * {
      grid-row: var(--βs8);
    }

    [bp-layout~="rows:9"] > * {
      grid-row: var(--βs9);
    }

    [bp-layout~="rows:10"] > * {
      grid-row: var(--βs10);
    }

    [bp-layout~="rows:11"] > * {
      grid-row: var(--βs11);
    }

    [bp-layout~="rows:12"] > * {
      grid-row: var(--βs12);
    }

    [bp-layout~="row:1"] {
      grid-row: var(--βs1);
    }

    [bp-layout~="row:2"] {
      grid-row: var(--βs2);
    }

    [bp-layout~="row:3"] {
      grid-row: var(--βs3);
    }

    [bp-layout~="row:4"] {
      grid-row: var(--βs4);
    }

    [bp-layout~="row:5"] {
      grid-row: var(--βs5);
    }

    [bp-layout~="row:6"] {
      grid-row: var(--βs6);
    }

    [bp-layout~="row:7"] {
      grid-row: var(--βs7);
    }

    [bp-layout~="row:8"] {
      grid-row: var(--βs8);
    }

    [bp-layout~="row:9"] {
      grid-row: var(--βs9);
    }

    [bp-layout~="row:10"] {
      grid-row: var(--βs10);
    }

    [bp-layout~="row:11"] {
      grid-row: var(--βs11);
    }

    [bp-layout~="row:12"] {
      grid-row: var(--βs12);
    }

    [bp-layout~="row:start-1"] {
      grid-row-start: 1;
    }

    [bp-layout~="row:end-1"] {
      grid-row-end: 1;
    }

    [bp-layout~="row:start-2"] {
      grid-row-start: 2;
    }

    [bp-layout~="row:end-2"] {
      grid-row-end: 2;
    }

    [bp-layout~="row:start-3"] {
      grid-row-start: 3;
    }

    [bp-layout~="row:end-3"] {
      grid-row-end: 3;
    }

    [bp-layout~="row:start-4"] {
      grid-row-start: 4;
    }

    [bp-layout~="row:end-4"] {
      grid-row-end: 4;
    }

    [bp-layout~="row:start-5"] {
      grid-row-start: 5;
    }

    [bp-layout~="row:end-5"] {
      grid-row-end: 5;
    }

    [bp-layout~="row:start-6"] {
      grid-row-start: 6;
    }

    [bp-layout~="row:end-6"] {
      grid-row-end: 6;
    }

    [bp-layout~="row:start-7"] {
      grid-row-start: 7;
    }

    [bp-layout~="row:end-7"] {
      grid-row-end: 7;
    }

    [bp-layout~="row:start-8"] {
      grid-row-start: 8;
    }

    [bp-layout~="row:end-8"] {
      grid-row-end: 8;
    }

    [bp-layout~="row:start-9"] {
      grid-row-start: 9;
    }

    [bp-layout~="row:end-9"] {
      grid-row-end: 9;
    }

    [bp-layout~="row:start-10"] {
      grid-row-start: 10;
    }

    [bp-layout~="row:end-10"] {
      grid-row-end: 10;
    }

    [bp-layout~="row:start-11"] {
      grid-row-start: 11;
    }

    [bp-layout~="row:end-11"] {
      grid-row-end: 11;
    }

    [bp-layout~="row:start-12"] {
      grid-row-start: 12;
    }

    [bp-layout~="row:end-12"] {
      grid-row-end: 12;
    }

    [bp-layout~="row:start-13"] {
      grid-row-start: 13;
    }

    [bp-layout~="row:end-13"] {
      grid-row-end: 13;
    }

    [bp-layout~="grid"] {
      &[bp-layout~="block:start"] {
        align-content: start;
      }

      &[bp-layout~="inline:end"] {
        justify-content: end;
      }

      &[bp-layout~="block:end"] {
        align-content: end;
      }

      &[bp-layout~="inline:start"] {
        justify-content: start;
      }

      &[bp-layout~="block:center"] {
        align-content: center;
        align-items: center;
      }

      &[bp-layout~="inline:center"] {
        justify-content: center;
        justify-items: center;
      }

      &[bp-layout~="center"] {
        place-content: center;
        place-items: center;
      }

      &[bp-layout~="block:stretch"] {
        align-content: stretch;
        align-items: stretch;
      }

      &[bp-layout~="inline:stretch"] {
        justify-content: stretch;
        justify-items: stretch;
      }

      &[bp-layout~="stretch"] {
        place-content: stretch;
        place-items: stretch stretch;
      }
    }

    @container (width >= 320px) {
      [bp-layout~="cols:1@xs"] > * {
        grid-column: var(--βs1);
      }

      [bp-layout~="cols:2@xs"] > * {
        grid-column: var(--βs2);
      }

      [bp-layout~="cols:3@xs"] > * {
        grid-column: var(--βs3);
      }

      [bp-layout~="cols:4@xs"] > * {
        grid-column: var(--βs4);
      }

      [bp-layout~="cols:5@xs"] > * {
        grid-column: var(--βs5);
      }

      [bp-layout~="cols:6@xs"] > * {
        grid-column: var(--βs6);
      }

      [bp-layout~="cols:7@xs"] > * {
        grid-column: var(--βs7);
      }

      [bp-layout~="cols:8@xs"] > * {
        grid-column: var(--βs8);
      }

      [bp-layout~="cols:9@xs"] > * {
        grid-column: var(--βs9);
      }

      [bp-layout~="cols:10@xs"] > * {
        grid-column: var(--βs10);
      }

      [bp-layout~="cols:11@xs"] > * {
        grid-column: var(--βs11);
      }

      [bp-layout~="cols:12@xs"] > * {
        grid-column: var(--βs12);
      }
    }

    @container (width >= 480px) {
      [bp-layout~="cols:1@sm"] > * {
        grid-column: var(--βs1);
      }

      [bp-layout~="cols:2@sm"] > * {
        grid-column: var(--βs2);
      }

      [bp-layout~="cols:3@sm"] > * {
        grid-column: var(--βs3);
      }

      [bp-layout~="cols:4@sm"] > * {
        grid-column: var(--βs4);
      }

      [bp-layout~="cols:5@sm"] > * {
        grid-column: var(--βs5);
      }

      [bp-layout~="cols:6@sm"] > * {
        grid-column: var(--βs6);
      }

      [bp-layout~="cols:7@sm"] > * {
        grid-column: var(--βs7);
      }

      [bp-layout~="cols:8@sm"] > * {
        grid-column: var(--βs8);
      }

      [bp-layout~="cols:9@sm"] > * {
        grid-column: var(--βs9);
      }

      [bp-layout~="cols:10@sm"] > * {
        grid-column: var(--βs10);
      }

      [bp-layout~="cols:11@sm"] > * {
        grid-column: var(--βs11);
      }

      [bp-layout~="cols:12@sm"] > * {
        grid-column: var(--βs12);
      }
    }

    @container (width >= 720px) {
      [bp-layout~="cols:1@md"] > * {
        grid-column: var(--βs1);
      }

      [bp-layout~="cols:2@md"] > * {
        grid-column: var(--βs2);
      }

      [bp-layout~="cols:3@md"] > * {
        grid-column: var(--βs3);
      }

      [bp-layout~="cols:4@md"] > * {
        grid-column: var(--βs4);
      }

      [bp-layout~="cols:5@md"] > * {
        grid-column: var(--βs5);
      }

      [bp-layout~="cols:6@md"] > * {
        grid-column: var(--βs6);
      }

      [bp-layout~="cols:7@md"] > * {
        grid-column: var(--βs7);
      }

      [bp-layout~="cols:8@md"] > * {
        grid-column: var(--βs8);
      }

      [bp-layout~="cols:9@md"] > * {
        grid-column: var(--βs9);
      }

      [bp-layout~="cols:10@md"] > * {
        grid-column: var(--βs10);
      }

      [bp-layout~="cols:11@md"] > * {
        grid-column: var(--βs11);
      }

      [bp-layout~="cols:12@md"] > * {
        grid-column: var(--βs12);
      }
    }

    @container (width >= 1024px) {
      [bp-layout~="cols:1@lg"] > * {
        grid-column: var(--βs1);
      }

      [bp-layout~="cols:2@lg"] > * {
        grid-column: var(--βs2);
      }

      [bp-layout~="cols:3@lg"] > * {
        grid-column: var(--βs3);
      }

      [bp-layout~="cols:4@lg"] > * {
        grid-column: var(--βs4);
      }

      [bp-layout~="cols:5@lg"] > * {
        grid-column: var(--βs5);
      }

      [bp-layout~="cols:6@lg"] > * {
        grid-column: var(--βs6);
      }

      [bp-layout~="cols:7@lg"] > * {
        grid-column: var(--βs7);
      }

      [bp-layout~="cols:8@lg"] > * {
        grid-column: var(--βs8);
      }

      [bp-layout~="cols:9@lg"] > * {
        grid-column: var(--βs9);
      }

      [bp-layout~="cols:10@lg"] > * {
        grid-column: var(--βs10);
      }

      [bp-layout~="cols:11@lg"] > * {
        grid-column: var(--βs11);
      }

      [bp-layout~="cols:12@lg"] > * {
        grid-column: var(--βs12);
      }
    }

    @container (width >= 1168px) {
      [bp-layout~="cols:1@xl"] > * {
        grid-column: var(--βs1);
      }

      [bp-layout~="cols:2@xl"] > * {
        grid-column: var(--βs2);
      }

      [bp-layout~="cols:3@xl"] > * {
        grid-column: var(--βs3);
      }

      [bp-layout~="cols:4@xl"] > * {
        grid-column: var(--βs4);
      }

      [bp-layout~="cols:5@xl"] > * {
        grid-column: var(--βs5);
      }

      [bp-layout~="cols:6@xl"] > * {
        grid-column: var(--βs6);
      }

      [bp-layout~="cols:7@xl"] > * {
        grid-column: var(--βs7);
      }

      [bp-layout~="cols:8@xl"] > * {
        grid-column: var(--βs8);
      }

      [bp-layout~="cols:9@xl"] > * {
        grid-column: var(--βs9);
      }

      [bp-layout~="cols:10@xl"] > * {
        grid-column: var(--βs10);
      }

      [bp-layout~="cols:11@xl"] > * {
        grid-column: var(--βs11);
      }

      [bp-layout~="cols:12@xl"] > * {
        grid-column: var(--βs12);
      }
    }

    @container (width >= 320px) {
      [bp-layout~="col:1@xs"] {
        grid-column: var(--βs1);
      }

      [bp-layout~="col:2@xs"] {
        grid-column: var(--βs2);
      }

      [bp-layout~="col:3@xs"] {
        grid-column: var(--βs3);
      }

      [bp-layout~="col:4@xs"] {
        grid-column: var(--βs4);
      }

      [bp-layout~="col:5@xs"] {
        grid-column: var(--βs5);
      }

      [bp-layout~="col:6@xs"] {
        grid-column: var(--βs6);
      }

      [bp-layout~="col:7@xs"] {
        grid-column: var(--βs7);
      }

      [bp-layout~="col:8@xs"] {
        grid-column: var(--βs8);
      }

      [bp-layout~="col:9@xs"] {
        grid-column: var(--βs9);
      }

      [bp-layout~="col:10@xs"] {
        grid-column: var(--βs10);
      }

      [bp-layout~="col:11@xs"] {
        grid-column: var(--βs11);
      }

      [bp-layout~="col:12@xs"] {
        grid-column: var(--βs12);
      }
    }

    @container (width >= 480px) {
      [bp-layout~="col:1@sm"] {
        grid-column: var(--βs1);
      }

      [bp-layout~="col:2@sm"] {
        grid-column: var(--βs2);
      }

      [bp-layout~="col:3@sm"] {
        grid-column: var(--βs3);
      }

      [bp-layout~="col:4@sm"] {
        grid-column: var(--βs4);
      }

      [bp-layout~="col:5@sm"] {
        grid-column: var(--βs5);
      }

      [bp-layout~="col:6@sm"] {
        grid-column: var(--βs6);
      }

      [bp-layout~="col:7@sm"] {
        grid-column: var(--βs7);
      }

      [bp-layout~="col:8@sm"] {
        grid-column: var(--βs8);
      }

      [bp-layout~="col:9@sm"] {
        grid-column: var(--βs9);
      }

      [bp-layout~="col:10@sm"] {
        grid-column: var(--βs10);
      }

      [bp-layout~="col:11@sm"] {
        grid-column: var(--βs11);
      }

      [bp-layout~="col:12@sm"] {
        grid-column: var(--βs12);
      }
    }

    @container (width >= 720px) {
      [bp-layout~="col:1@md"] {
        grid-column: var(--βs1);
      }

      [bp-layout~="col:2@md"] {
        grid-column: var(--βs2);
      }

      [bp-layout~="col:3@md"] {
        grid-column: var(--βs3);
      }

      [bp-layout~="col:4@md"] {
        grid-column: var(--βs4);
      }

      [bp-layout~="col:5@md"] {
        grid-column: var(--βs5);
      }

      [bp-layout~="col:6@md"] {
        grid-column: var(--βs6);
      }

      [bp-layout~="col:7@md"] {
        grid-column: var(--βs7);
      }

      [bp-layout~="col:8@md"] {
        grid-column: var(--βs8);
      }

      [bp-layout~="col:9@md"] {
        grid-column: var(--βs9);
      }

      [bp-layout~="col:10@md"] {
        grid-column: var(--βs10);
      }

      [bp-layout~="col:11@md"] {
        grid-column: var(--βs11);
      }

      [bp-layout~="col:12@md"] {
        grid-column: var(--βs12);
      }
    }

    @container (width >= 1024px) {
      [bp-layout~="col:1@lg"] {
        grid-column: var(--βs1);
      }

      [bp-layout~="col:2@lg"] {
        grid-column: var(--βs2);
      }

      [bp-layout~="col:3@lg"] {
        grid-column: var(--βs3);
      }

      [bp-layout~="col:4@lg"] {
        grid-column: var(--βs4);
      }

      [bp-layout~="col:5@lg"] {
        grid-column: var(--βs5);
      }

      [bp-layout~="col:6@lg"] {
        grid-column: var(--βs6);
      }

      [bp-layout~="col:7@lg"] {
        grid-column: var(--βs7);
      }

      [bp-layout~="col:8@lg"] {
        grid-column: var(--βs8);
      }

      [bp-layout~="col:9@lg"] {
        grid-column: var(--βs9);
      }

      [bp-layout~="col:10@lg"] {
        grid-column: var(--βs10);
      }

      [bp-layout~="col:11@lg"] {
        grid-column: var(--βs11);
      }

      [bp-layout~="col:12@lg"] {
        grid-column: var(--βs12);
      }
    }

    @container (width >= 1168px) {
      [bp-layout~="col:1@xl"] {
        grid-column: var(--βs1);
      }

      [bp-layout~="col:2@xl"] {
        grid-column: var(--βs2);
      }

      [bp-layout~="col:3@xl"] {
        grid-column: var(--βs3);
      }

      [bp-layout~="col:4@xl"] {
        grid-column: var(--βs4);
      }

      [bp-layout~="col:5@xl"] {
        grid-column: var(--βs5);
      }

      [bp-layout~="col:6@xl"] {
        grid-column: var(--βs6);
      }

      [bp-layout~="col:7@xl"] {
        grid-column: var(--βs7);
      }

      [bp-layout~="col:8@xl"] {
        grid-column: var(--βs8);
      }

      [bp-layout~="col:9@xl"] {
        grid-column: var(--βs9);
      }

      [bp-layout~="col:10@xl"] {
        grid-column: var(--βs10);
      }

      [bp-layout~="col:11@xl"] {
        grid-column: var(--βs11);
      }

      [bp-layout~="col:12@xl"] {
        grid-column: var(--βs12);
      }
    }

    @container (width >= 320px) {
      [bp-layout~="col:start-1@xs"] {
        grid-column-start: 1;
      }

      [bp-layout~="col:end-1@xs"] {
        grid-column-end: 1;
      }

      [bp-layout~="col:start-2@xs"] {
        grid-column-start: 2;
      }

      [bp-layout~="col:end-2@xs"] {
        grid-column-end: 2;
      }

      [bp-layout~="col:start-3@xs"] {
        grid-column-start: 3;
      }

      [bp-layout~="col:end-3@xs"] {
        grid-column-end: 3;
      }

      [bp-layout~="col:start-4@xs"] {
        grid-column-start: 4;
      }

      [bp-layout~="col:end-4@xs"] {
        grid-column-end: 4;
      }

      [bp-layout~="col:start-5@xs"] {
        grid-column-start: 5;
      }

      [bp-layout~="col:end-5@xs"] {
        grid-column-end: 5;
      }

      [bp-layout~="col:start-6@xs"] {
        grid-column-start: 6;
      }

      [bp-layout~="col:end-6@xs"] {
        grid-column-end: 6;
      }

      [bp-layout~="col:start-7@xs"] {
        grid-column-start: 7;
      }

      [bp-layout~="col:end-7@xs"] {
        grid-column-end: 7;
      }

      [bp-layout~="col:start-8@xs"] {
        grid-column-start: 8;
      }

      [bp-layout~="col:end-8@xs"] {
        grid-column-end: 8;
      }

      [bp-layout~="col:start-9@xs"] {
        grid-column-start: 9;
      }

      [bp-layout~="col:end-9@xs"] {
        grid-column-end: 9;
      }

      [bp-layout~="col:start-10@xs"] {
        grid-column-start: 10;
      }

      [bp-layout~="col:end-10@xs"] {
        grid-column-end: 10;
      }

      [bp-layout~="col:start-11@xs"] {
        grid-column-start: 11;
      }

      [bp-layout~="col:end-11@xs"] {
        grid-column-end: 11;
      }

      [bp-layout~="col:start-12@xs"] {
        grid-column-start: 12;
      }

      [bp-layout~="col:end-12@xs"] {
        grid-column-end: 12;
      }

      [bp-layout~="col:start-13@xs"] {
        grid-column-start: 13;
      }

      [bp-layout~="col:end-13@xs"] {
        grid-column-end: 13;
      }
    }

    @container (width >= 480px) {
      [bp-layout~="col:start-1@sm"] {
        grid-column-start: 1;
      }

      [bp-layout~="col:end-1@sm"] {
        grid-column-end: 1;
      }

      [bp-layout~="col:start-2@sm"] {
        grid-column-start: 2;
      }

      [bp-layout~="col:end-2@sm"] {
        grid-column-end: 2;
      }

      [bp-layout~="col:start-3@sm"] {
        grid-column-start: 3;
      }

      [bp-layout~="col:end-3@sm"] {
        grid-column-end: 3;
      }

      [bp-layout~="col:start-4@sm"] {
        grid-column-start: 4;
      }

      [bp-layout~="col:end-4@sm"] {
        grid-column-end: 4;
      }

      [bp-layout~="col:start-5@sm"] {
        grid-column-start: 5;
      }

      [bp-layout~="col:end-5@sm"] {
        grid-column-end: 5;
      }

      [bp-layout~="col:start-6@sm"] {
        grid-column-start: 6;
      }

      [bp-layout~="col:end-6@sm"] {
        grid-column-end: 6;
      }

      [bp-layout~="col:start-7@sm"] {
        grid-column-start: 7;
      }

      [bp-layout~="col:end-7@sm"] {
        grid-column-end: 7;
      }

      [bp-layout~="col:start-8@sm"] {
        grid-column-start: 8;
      }

      [bp-layout~="col:end-8@sm"] {
        grid-column-end: 8;
      }

      [bp-layout~="col:start-9@sm"] {
        grid-column-start: 9;
      }

      [bp-layout~="col:end-9@sm"] {
        grid-column-end: 9;
      }

      [bp-layout~="col:start-10@sm"] {
        grid-column-start: 10;
      }

      [bp-layout~="col:end-10@sm"] {
        grid-column-end: 10;
      }

      [bp-layout~="col:start-11@sm"] {
        grid-column-start: 11;
      }

      [bp-layout~="col:end-11@sm"] {
        grid-column-end: 11;
      }

      [bp-layout~="col:start-12@sm"] {
        grid-column-start: 12;
      }

      [bp-layout~="col:end-12@sm"] {
        grid-column-end: 12;
      }

      [bp-layout~="col:start-13@sm"] {
        grid-column-start: 13;
      }

      [bp-layout~="col:end-13@sm"] {
        grid-column-end: 13;
      }
    }

    @container (width >= 720px) {
      [bp-layout~="col:start-1@md"] {
        grid-column-start: 1;
      }

      [bp-layout~="col:end-1@md"] {
        grid-column-end: 1;
      }

      [bp-layout~="col:start-2@md"] {
        grid-column-start: 2;
      }

      [bp-layout~="col:end-2@md"] {
        grid-column-end: 2;
      }

      [bp-layout~="col:start-3@md"] {
        grid-column-start: 3;
      }

      [bp-layout~="col:end-3@md"] {
        grid-column-end: 3;
      }

      [bp-layout~="col:start-4@md"] {
        grid-column-start: 4;
      }

      [bp-layout~="col:end-4@md"] {
        grid-column-end: 4;
      }

      [bp-layout~="col:start-5@md"] {
        grid-column-start: 5;
      }

      [bp-layout~="col:end-5@md"] {
        grid-column-end: 5;
      }

      [bp-layout~="col:start-6@md"] {
        grid-column-start: 6;
      }

      [bp-layout~="col:end-6@md"] {
        grid-column-end: 6;
      }

      [bp-layout~="col:start-7@md"] {
        grid-column-start: 7;
      }

      [bp-layout~="col:end-7@md"] {
        grid-column-end: 7;
      }

      [bp-layout~="col:start-8@md"] {
        grid-column-start: 8;
      }

      [bp-layout~="col:end-8@md"] {
        grid-column-end: 8;
      }

      [bp-layout~="col:start-9@md"] {
        grid-column-start: 9;
      }

      [bp-layout~="col:end-9@md"] {
        grid-column-end: 9;
      }

      [bp-layout~="col:start-10@md"] {
        grid-column-start: 10;
      }

      [bp-layout~="col:end-10@md"] {
        grid-column-end: 10;
      }

      [bp-layout~="col:start-11@md"] {
        grid-column-start: 11;
      }

      [bp-layout~="col:end-11@md"] {
        grid-column-end: 11;
      }

      [bp-layout~="col:start-12@md"] {
        grid-column-start: 12;
      }

      [bp-layout~="col:end-12@md"] {
        grid-column-end: 12;
      }

      [bp-layout~="col:start-13@md"] {
        grid-column-start: 13;
      }

      [bp-layout~="col:end-13@md"] {
        grid-column-end: 13;
      }
    }

    @container (width >= 1024px) {
      [bp-layout~="col:start-1@lg"] {
        grid-column-start: 1;
      }

      [bp-layout~="col:end-1@lg"] {
        grid-column-end: 1;
      }

      [bp-layout~="col:start-2@lg"] {
        grid-column-start: 2;
      }

      [bp-layout~="col:end-2@lg"] {
        grid-column-end: 2;
      }

      [bp-layout~="col:start-3@lg"] {
        grid-column-start: 3;
      }

      [bp-layout~="col:end-3@lg"] {
        grid-column-end: 3;
      }

      [bp-layout~="col:start-4@lg"] {
        grid-column-start: 4;
      }

      [bp-layout~="col:end-4@lg"] {
        grid-column-end: 4;
      }

      [bp-layout~="col:start-5@lg"] {
        grid-column-start: 5;
      }

      [bp-layout~="col:end-5@lg"] {
        grid-column-end: 5;
      }

      [bp-layout~="col:start-6@lg"] {
        grid-column-start: 6;
      }

      [bp-layout~="col:end-6@lg"] {
        grid-column-end: 6;
      }

      [bp-layout~="col:start-7@lg"] {
        grid-column-start: 7;
      }

      [bp-layout~="col:end-7@lg"] {
        grid-column-end: 7;
      }

      [bp-layout~="col:start-8@lg"] {
        grid-column-start: 8;
      }

      [bp-layout~="col:end-8@lg"] {
        grid-column-end: 8;
      }

      [bp-layout~="col:start-9@lg"] {
        grid-column-start: 9;
      }

      [bp-layout~="col:end-9@lg"] {
        grid-column-end: 9;
      }

      [bp-layout~="col:start-10@lg"] {
        grid-column-start: 10;
      }

      [bp-layout~="col:end-10@lg"] {
        grid-column-end: 10;
      }

      [bp-layout~="col:start-11@lg"] {
        grid-column-start: 11;
      }

      [bp-layout~="col:end-11@lg"] {
        grid-column-end: 11;
      }

      [bp-layout~="col:start-12@lg"] {
        grid-column-start: 12;
      }

      [bp-layout~="col:end-12@lg"] {
        grid-column-end: 12;
      }

      [bp-layout~="col:start-13@lg"] {
        grid-column-start: 13;
      }

      [bp-layout~="col:end-13@lg"] {
        grid-column-end: 13;
      }
    }

    @container (width >= 1168px) {
      [bp-layout~="col:start-1@xl"] {
        grid-column-start: 1;
      }

      [bp-layout~="col:end-1@xl"] {
        grid-column-end: 1;
      }

      [bp-layout~="col:start-2@xl"] {
        grid-column-start: 2;
      }

      [bp-layout~="col:end-2@xl"] {
        grid-column-end: 2;
      }

      [bp-layout~="col:start-3@xl"] {
        grid-column-start: 3;
      }

      [bp-layout~="col:end-3@xl"] {
        grid-column-end: 3;
      }

      [bp-layout~="col:start-4@xl"] {
        grid-column-start: 4;
      }

      [bp-layout~="col:end-4@xl"] {
        grid-column-end: 4;
      }

      [bp-layout~="col:start-5@xl"] {
        grid-column-start: 5;
      }

      [bp-layout~="col:end-5@xl"] {
        grid-column-end: 5;
      }

      [bp-layout~="col:start-6@xl"] {
        grid-column-start: 6;
      }

      [bp-layout~="col:end-6@xl"] {
        grid-column-end: 6;
      }

      [bp-layout~="col:start-7@xl"] {
        grid-column-start: 7;
      }

      [bp-layout~="col:end-7@xl"] {
        grid-column-end: 7;
      }

      [bp-layout~="col:start-8@xl"] {
        grid-column-start: 8;
      }

      [bp-layout~="col:end-8@xl"] {
        grid-column-end: 8;
      }

      [bp-layout~="col:start-9@xl"] {
        grid-column-start: 9;
      }

      [bp-layout~="col:end-9@xl"] {
        grid-column-end: 9;
      }

      [bp-layout~="col:start-10@xl"] {
        grid-column-start: 10;
      }

      [bp-layout~="col:end-10@xl"] {
        grid-column-end: 10;
      }

      [bp-layout~="col:start-11@xl"] {
        grid-column-start: 11;
      }

      [bp-layout~="col:end-11@xl"] {
        grid-column-end: 11;
      }

      [bp-layout~="col:start-12@xl"] {
        grid-column-start: 12;
      }

      [bp-layout~="col:end-12@xl"] {
        grid-column-end: 12;
      }

      [bp-layout~="col:start-13@xl"] {
        grid-column-start: 13;
      }

      [bp-layout~="col:end-13@xl"] {
        grid-column-end: 13;
      }
    }

    @container (width >= 320px) {
      [bp-layout~="rows:1@xs"] > * {
        grid-row: var(--βs1);
      }

      [bp-layout~="rows:2@xs"] > * {
        grid-row: var(--βs2);
      }

      [bp-layout~="rows:3@xs"] > * {
        grid-row: var(--βs3);
      }

      [bp-layout~="rows:4@xs"] > * {
        grid-row: var(--βs4);
      }

      [bp-layout~="rows:5@xs"] > * {
        grid-row: var(--βs5);
      }

      [bp-layout~="rows:6@xs"] > * {
        grid-row: var(--βs6);
      }

      [bp-layout~="rows:7@xs"] > * {
        grid-row: var(--βs7);
      }

      [bp-layout~="rows:8@xs"] > * {
        grid-row: var(--βs8);
      }

      [bp-layout~="rows:9@xs"] > * {
        grid-row: var(--βs9);
      }

      [bp-layout~="rows:10@xs"] > * {
        grid-row: var(--βs10);
      }

      [bp-layout~="rows:11@xs"] > * {
        grid-row: var(--βs11);
      }

      [bp-layout~="rows:12@xs"] > * {
        grid-row: var(--βs12);
      }
    }

    @container (width >= 480px) {
      [bp-layout~="rows:1@sm"] > * {
        grid-row: var(--βs1);
      }

      [bp-layout~="rows:2@sm"] > * {
        grid-row: var(--βs2);
      }

      [bp-layout~="rows:3@sm"] > * {
        grid-row: var(--βs3);
      }

      [bp-layout~="rows:4@sm"] > * {
        grid-row: var(--βs4);
      }

      [bp-layout~="rows:5@sm"] > * {
        grid-row: var(--βs5);
      }

      [bp-layout~="rows:6@sm"] > * {
        grid-row: var(--βs6);
      }

      [bp-layout~="rows:7@sm"] > * {
        grid-row: var(--βs7);
      }

      [bp-layout~="rows:8@sm"] > * {
        grid-row: var(--βs8);
      }

      [bp-layout~="rows:9@sm"] > * {
        grid-row: var(--βs9);
      }

      [bp-layout~="rows:10@sm"] > * {
        grid-row: var(--βs10);
      }

      [bp-layout~="rows:11@sm"] > * {
        grid-row: var(--βs11);
      }

      [bp-layout~="rows:12@sm"] > * {
        grid-row: var(--βs12);
      }
    }

    @container (width >= 720px) {
      [bp-layout~="rows:1@md"] > * {
        grid-row: var(--βs1);
      }

      [bp-layout~="rows:2@md"] > * {
        grid-row: var(--βs2);
      }

      [bp-layout~="rows:3@md"] > * {
        grid-row: var(--βs3);
      }

      [bp-layout~="rows:4@md"] > * {
        grid-row: var(--βs4);
      }

      [bp-layout~="rows:5@md"] > * {
        grid-row: var(--βs5);
      }

      [bp-layout~="rows:6@md"] > * {
        grid-row: var(--βs6);
      }

      [bp-layout~="rows:7@md"] > * {
        grid-row: var(--βs7);
      }

      [bp-layout~="rows:8@md"] > * {
        grid-row: var(--βs8);
      }

      [bp-layout~="rows:9@md"] > * {
        grid-row: var(--βs9);
      }

      [bp-layout~="rows:10@md"] > * {
        grid-row: var(--βs10);
      }

      [bp-layout~="rows:11@md"] > * {
        grid-row: var(--βs11);
      }

      [bp-layout~="rows:12@md"] > * {
        grid-row: var(--βs12);
      }
    }

    @container (width >= 1024px) {
      [bp-layout~="rows:1@lg"] > * {
        grid-row: var(--βs1);
      }

      [bp-layout~="rows:2@lg"] > * {
        grid-row: var(--βs2);
      }

      [bp-layout~="rows:3@lg"] > * {
        grid-row: var(--βs3);
      }

      [bp-layout~="rows:4@lg"] > * {
        grid-row: var(--βs4);
      }

      [bp-layout~="rows:5@lg"] > * {
        grid-row: var(--βs5);
      }

      [bp-layout~="rows:6@lg"] > * {
        grid-row: var(--βs6);
      }

      [bp-layout~="rows:7@lg"] > * {
        grid-row: var(--βs7);
      }

      [bp-layout~="rows:8@lg"] > * {
        grid-row: var(--βs8);
      }

      [bp-layout~="rows:9@lg"] > * {
        grid-row: var(--βs9);
      }

      [bp-layout~="rows:10@lg"] > * {
        grid-row: var(--βs10);
      }

      [bp-layout~="rows:11@lg"] > * {
        grid-row: var(--βs11);
      }

      [bp-layout~="rows:12@lg"] > * {
        grid-row: var(--βs12);
      }
    }

    @container (width >= 1168px) {
      [bp-layout~="rows:1@xl"] > * {
        grid-row: var(--βs1);
      }

      [bp-layout~="rows:2@xl"] > * {
        grid-row: var(--βs2);
      }

      [bp-layout~="rows:3@xl"] > * {
        grid-row: var(--βs3);
      }

      [bp-layout~="rows:4@xl"] > * {
        grid-row: var(--βs4);
      }

      [bp-layout~="rows:5@xl"] > * {
        grid-row: var(--βs5);
      }

      [bp-layout~="rows:6@xl"] > * {
        grid-row: var(--βs6);
      }

      [bp-layout~="rows:7@xl"] > * {
        grid-row: var(--βs7);
      }

      [bp-layout~="rows:8@xl"] > * {
        grid-row: var(--βs8);
      }

      [bp-layout~="rows:9@xl"] > * {
        grid-row: var(--βs9);
      }

      [bp-layout~="rows:10@xl"] > * {
        grid-row: var(--βs10);
      }

      [bp-layout~="rows:11@xl"] > * {
        grid-row: var(--βs11);
      }

      [bp-layout~="rows:12@xl"] > * {
        grid-row: var(--βs12);
      }
    }

    @container (width >= 320px) {
      [bp-layout~="row:1@xs"] {
        grid-row: var(--βs1);
      }

      [bp-layout~="row:2@xs"] {
        grid-row: var(--βs2);
      }

      [bp-layout~="row:3@xs"] {
        grid-row: var(--βs3);
      }

      [bp-layout~="row:4@xs"] {
        grid-row: var(--βs4);
      }

      [bp-layout~="row:5@xs"] {
        grid-row: var(--βs5);
      }

      [bp-layout~="row:6@xs"] {
        grid-row: var(--βs6);
      }

      [bp-layout~="row:7@xs"] {
        grid-row: var(--βs7);
      }

      [bp-layout~="row:8@xs"] {
        grid-row: var(--βs8);
      }

      [bp-layout~="row:9@xs"] {
        grid-row: var(--βs9);
      }

      [bp-layout~="row:10@xs"] {
        grid-row: var(--βs10);
      }

      [bp-layout~="row:11@xs"] {
        grid-row: var(--βs11);
      }

      [bp-layout~="row:12@xs"] {
        grid-row: var(--βs12);
      }
    }

    @container (width >= 480px) {
      [bp-layout~="row:1@sm"] {
        grid-row: var(--βs1);
      }

      [bp-layout~="row:2@sm"] {
        grid-row: var(--βs2);
      }

      [bp-layout~="row:3@sm"] {
        grid-row: var(--βs3);
      }

      [bp-layout~="row:4@sm"] {
        grid-row: var(--βs4);
      }

      [bp-layout~="row:5@sm"] {
        grid-row: var(--βs5);
      }

      [bp-layout~="row:6@sm"] {
        grid-row: var(--βs6);
      }

      [bp-layout~="row:7@sm"] {
        grid-row: var(--βs7);
      }

      [bp-layout~="row:8@sm"] {
        grid-row: var(--βs8);
      }

      [bp-layout~="row:9@sm"] {
        grid-row: var(--βs9);
      }

      [bp-layout~="row:10@sm"] {
        grid-row: var(--βs10);
      }

      [bp-layout~="row:11@sm"] {
        grid-row: var(--βs11);
      }

      [bp-layout~="row:12@sm"] {
        grid-row: var(--βs12);
      }
    }

    @container (width >= 720px) {
      [bp-layout~="row:1@md"] {
        grid-row: var(--βs1);
      }

      [bp-layout~="row:2@md"] {
        grid-row: var(--βs2);
      }

      [bp-layout~="row:3@md"] {
        grid-row: var(--βs3);
      }

      [bp-layout~="row:4@md"] {
        grid-row: var(--βs4);
      }

      [bp-layout~="row:5@md"] {
        grid-row: var(--βs5);
      }

      [bp-layout~="row:6@md"] {
        grid-row: var(--βs6);
      }

      [bp-layout~="row:7@md"] {
        grid-row: var(--βs7);
      }

      [bp-layout~="row:8@md"] {
        grid-row: var(--βs8);
      }

      [bp-layout~="row:9@md"] {
        grid-row: var(--βs9);
      }

      [bp-layout~="row:10@md"] {
        grid-row: var(--βs10);
      }

      [bp-layout~="row:11@md"] {
        grid-row: var(--βs11);
      }

      [bp-layout~="row:12@md"] {
        grid-row: var(--βs12);
      }
    }

    @container (width >= 1024px) {
      [bp-layout~="row:1@lg"] {
        grid-row: var(--βs1);
      }

      [bp-layout~="row:2@lg"] {
        grid-row: var(--βs2);
      }

      [bp-layout~="row:3@lg"] {
        grid-row: var(--βs3);
      }

      [bp-layout~="row:4@lg"] {
        grid-row: var(--βs4);
      }

      [bp-layout~="row:5@lg"] {
        grid-row: var(--βs5);
      }

      [bp-layout~="row:6@lg"] {
        grid-row: var(--βs6);
      }

      [bp-layout~="row:7@lg"] {
        grid-row: var(--βs7);
      }

      [bp-layout~="row:8@lg"] {
        grid-row: var(--βs8);
      }

      [bp-layout~="row:9@lg"] {
        grid-row: var(--βs9);
      }

      [bp-layout~="row:10@lg"] {
        grid-row: var(--βs10);
      }

      [bp-layout~="row:11@lg"] {
        grid-row: var(--βs11);
      }

      [bp-layout~="row:12@lg"] {
        grid-row: var(--βs12);
      }
    }

    @container (width >= 1168px) {
      [bp-layout~="row:1@xl"] {
        grid-row: var(--βs1);
      }

      [bp-layout~="row:2@xl"] {
        grid-row: var(--βs2);
      }

      [bp-layout~="row:3@xl"] {
        grid-row: var(--βs3);
      }

      [bp-layout~="row:4@xl"] {
        grid-row: var(--βs4);
      }

      [bp-layout~="row:5@xl"] {
        grid-row: var(--βs5);
      }

      [bp-layout~="row:6@xl"] {
        grid-row: var(--βs6);
      }

      [bp-layout~="row:7@xl"] {
        grid-row: var(--βs7);
      }

      [bp-layout~="row:8@xl"] {
        grid-row: var(--βs8);
      }

      [bp-layout~="row:9@xl"] {
        grid-row: var(--βs9);
      }

      [bp-layout~="row:10@xl"] {
        grid-row: var(--βs10);
      }

      [bp-layout~="row:11@xl"] {
        grid-row: var(--βs11);
      }

      [bp-layout~="row:12@xl"] {
        grid-row: var(--βs12);
      }
    }

    @container (width >= 320px) {
      [bp-layout~="row:start-1@xs"] {
        grid-row-start: 1;
      }

      [bp-layout~="row:end-1@xs"] {
        grid-row-end: 1;
      }

      [bp-layout~="row:start-2@xs"] {
        grid-row-start: 2;
      }

      [bp-layout~="row:end-2@xs"] {
        grid-row-end: 2;
      }

      [bp-layout~="row:start-3@xs"] {
        grid-row-start: 3;
      }

      [bp-layout~="row:end-3@xs"] {
        grid-row-end: 3;
      }

      [bp-layout~="row:start-4@xs"] {
        grid-row-start: 4;
      }

      [bp-layout~="row:end-4@xs"] {
        grid-row-end: 4;
      }

      [bp-layout~="row:start-5@xs"] {
        grid-row-start: 5;
      }

      [bp-layout~="row:end-5@xs"] {
        grid-row-end: 5;
      }

      [bp-layout~="row:start-6@xs"] {
        grid-row-start: 6;
      }

      [bp-layout~="row:end-6@xs"] {
        grid-row-end: 6;
      }

      [bp-layout~="row:start-7@xs"] {
        grid-row-start: 7;
      }

      [bp-layout~="row:end-7@xs"] {
        grid-row-end: 7;
      }

      [bp-layout~="row:start-8@xs"] {
        grid-row-start: 8;
      }

      [bp-layout~="row:end-8@xs"] {
        grid-row-end: 8;
      }

      [bp-layout~="row:start-9@xs"] {
        grid-row-start: 9;
      }

      [bp-layout~="row:end-9@xs"] {
        grid-row-end: 9;
      }

      [bp-layout~="row:start-10@xs"] {
        grid-row-start: 10;
      }

      [bp-layout~="row:end-10@xs"] {
        grid-row-end: 10;
      }

      [bp-layout~="row:start-11@xs"] {
        grid-row-start: 11;
      }

      [bp-layout~="row:end-11@xs"] {
        grid-row-end: 11;
      }

      [bp-layout~="row:start-12@xs"] {
        grid-row-start: 12;
      }

      [bp-layout~="row:end-12@xs"] {
        grid-row-end: 12;
      }

      [bp-layout~="row:start-13@xs"] {
        grid-row-start: 13;
      }

      [bp-layout~="row:end-13@xs"] {
        grid-row-end: 13;
      }
    }

    @container (width >= 480px) {
      [bp-layout~="row:start-1@sm"] {
        grid-row-start: 1;
      }

      [bp-layout~="row:end-1@sm"] {
        grid-row-end: 1;
      }

      [bp-layout~="row:start-2@sm"] {
        grid-row-start: 2;
      }

      [bp-layout~="row:end-2@sm"] {
        grid-row-end: 2;
      }

      [bp-layout~="row:start-3@sm"] {
        grid-row-start: 3;
      }

      [bp-layout~="row:end-3@sm"] {
        grid-row-end: 3;
      }

      [bp-layout~="row:start-4@sm"] {
        grid-row-start: 4;
      }

      [bp-layout~="row:end-4@sm"] {
        grid-row-end: 4;
      }

      [bp-layout~="row:start-5@sm"] {
        grid-row-start: 5;
      }

      [bp-layout~="row:end-5@sm"] {
        grid-row-end: 5;
      }

      [bp-layout~="row:start-6@sm"] {
        grid-row-start: 6;
      }

      [bp-layout~="row:end-6@sm"] {
        grid-row-end: 6;
      }

      [bp-layout~="row:start-7@sm"] {
        grid-row-start: 7;
      }

      [bp-layout~="row:end-7@sm"] {
        grid-row-end: 7;
      }

      [bp-layout~="row:start-8@sm"] {
        grid-row-start: 8;
      }

      [bp-layout~="row:end-8@sm"] {
        grid-row-end: 8;
      }

      [bp-layout~="row:start-9@sm"] {
        grid-row-start: 9;
      }

      [bp-layout~="row:end-9@sm"] {
        grid-row-end: 9;
      }

      [bp-layout~="row:start-10@sm"] {
        grid-row-start: 10;
      }

      [bp-layout~="row:end-10@sm"] {
        grid-row-end: 10;
      }

      [bp-layout~="row:start-11@sm"] {
        grid-row-start: 11;
      }

      [bp-layout~="row:end-11@sm"] {
        grid-row-end: 11;
      }

      [bp-layout~="row:start-12@sm"] {
        grid-row-start: 12;
      }

      [bp-layout~="row:end-12@sm"] {
        grid-row-end: 12;
      }

      [bp-layout~="row:start-13@sm"] {
        grid-row-start: 13;
      }

      [bp-layout~="row:end-13@sm"] {
        grid-row-end: 13;
      }
    }

    @container (width >= 720px) {
      [bp-layout~="row:start-1@md"] {
        grid-row-start: 1;
      }

      [bp-layout~="row:end-1@md"] {
        grid-row-end: 1;
      }

      [bp-layout~="row:start-2@md"] {
        grid-row-start: 2;
      }

      [bp-layout~="row:end-2@md"] {
        grid-row-end: 2;
      }

      [bp-layout~="row:start-3@md"] {
        grid-row-start: 3;
      }

      [bp-layout~="row:end-3@md"] {
        grid-row-end: 3;
      }

      [bp-layout~="row:start-4@md"] {
        grid-row-start: 4;
      }

      [bp-layout~="row:end-4@md"] {
        grid-row-end: 4;
      }

      [bp-layout~="row:start-5@md"] {
        grid-row-start: 5;
      }

      [bp-layout~="row:end-5@md"] {
        grid-row-end: 5;
      }

      [bp-layout~="row:start-6@md"] {
        grid-row-start: 6;
      }

      [bp-layout~="row:end-6@md"] {
        grid-row-end: 6;
      }

      [bp-layout~="row:start-7@md"] {
        grid-row-start: 7;
      }

      [bp-layout~="row:end-7@md"] {
        grid-row-end: 7;
      }

      [bp-layout~="row:start-8@md"] {
        grid-row-start: 8;
      }

      [bp-layout~="row:end-8@md"] {
        grid-row-end: 8;
      }

      [bp-layout~="row:start-9@md"] {
        grid-row-start: 9;
      }

      [bp-layout~="row:end-9@md"] {
        grid-row-end: 9;
      }

      [bp-layout~="row:start-10@md"] {
        grid-row-start: 10;
      }

      [bp-layout~="row:end-10@md"] {
        grid-row-end: 10;
      }

      [bp-layout~="row:start-11@md"] {
        grid-row-start: 11;
      }

      [bp-layout~="row:end-11@md"] {
        grid-row-end: 11;
      }

      [bp-layout~="row:start-12@md"] {
        grid-row-start: 12;
      }

      [bp-layout~="row:end-12@md"] {
        grid-row-end: 12;
      }

      [bp-layout~="row:start-13@md"] {
        grid-row-start: 13;
      }

      [bp-layout~="row:end-13@md"] {
        grid-row-end: 13;
      }
    }

    @container (width >= 1024px) {
      [bp-layout~="row:start-1@lg"] {
        grid-row-start: 1;
      }

      [bp-layout~="row:end-1@lg"] {
        grid-row-end: 1;
      }

      [bp-layout~="row:start-2@lg"] {
        grid-row-start: 2;
      }

      [bp-layout~="row:end-2@lg"] {
        grid-row-end: 2;
      }

      [bp-layout~="row:start-3@lg"] {
        grid-row-start: 3;
      }

      [bp-layout~="row:end-3@lg"] {
        grid-row-end: 3;
      }

      [bp-layout~="row:start-4@lg"] {
        grid-row-start: 4;
      }

      [bp-layout~="row:end-4@lg"] {
        grid-row-end: 4;
      }

      [bp-layout~="row:start-5@lg"] {
        grid-row-start: 5;
      }

      [bp-layout~="row:end-5@lg"] {
        grid-row-end: 5;
      }

      [bp-layout~="row:start-6@lg"] {
        grid-row-start: 6;
      }

      [bp-layout~="row:end-6@lg"] {
        grid-row-end: 6;
      }

      [bp-layout~="row:start-7@lg"] {
        grid-row-start: 7;
      }

      [bp-layout~="row:end-7@lg"] {
        grid-row-end: 7;
      }

      [bp-layout~="row:start-8@lg"] {
        grid-row-start: 8;
      }

      [bp-layout~="row:end-8@lg"] {
        grid-row-end: 8;
      }

      [bp-layout~="row:start-9@lg"] {
        grid-row-start: 9;
      }

      [bp-layout~="row:end-9@lg"] {
        grid-row-end: 9;
      }

      [bp-layout~="row:start-10@lg"] {
        grid-row-start: 10;
      }

      [bp-layout~="row:end-10@lg"] {
        grid-row-end: 10;
      }

      [bp-layout~="row:start-11@lg"] {
        grid-row-start: 11;
      }

      [bp-layout~="row:end-11@lg"] {
        grid-row-end: 11;
      }

      [bp-layout~="row:start-12@lg"] {
        grid-row-start: 12;
      }

      [bp-layout~="row:end-12@lg"] {
        grid-row-end: 12;
      }

      [bp-layout~="row:start-13@lg"] {
        grid-row-start: 13;
      }

      [bp-layout~="row:end-13@lg"] {
        grid-row-end: 13;
      }
    }

    @container (width >= 1168px) {
      [bp-layout~="row:start-1@xl"] {
        grid-row-start: 1;
      }

      [bp-layout~="row:end-1@xl"] {
        grid-row-end: 1;
      }

      [bp-layout~="row:start-2@xl"] {
        grid-row-start: 2;
      }

      [bp-layout~="row:end-2@xl"] {
        grid-row-end: 2;
      }

      [bp-layout~="row:start-3@xl"] {
        grid-row-start: 3;
      }

      [bp-layout~="row:end-3@xl"] {
        grid-row-end: 3;
      }

      [bp-layout~="row:start-4@xl"] {
        grid-row-start: 4;
      }

      [bp-layout~="row:end-4@xl"] {
        grid-row-end: 4;
      }

      [bp-layout~="row:start-5@xl"] {
        grid-row-start: 5;
      }

      [bp-layout~="row:end-5@xl"] {
        grid-row-end: 5;
      }

      [bp-layout~="row:start-6@xl"] {
        grid-row-start: 6;
      }

      [bp-layout~="row:end-6@xl"] {
        grid-row-end: 6;
      }

      [bp-layout~="row:start-7@xl"] {
        grid-row-start: 7;
      }

      [bp-layout~="row:end-7@xl"] {
        grid-row-end: 7;
      }

      [bp-layout~="row:start-8@xl"] {
        grid-row-start: 8;
      }

      [bp-layout~="row:end-8@xl"] {
        grid-row-end: 8;
      }

      [bp-layout~="row:start-9@xl"] {
        grid-row-start: 9;
      }

      [bp-layout~="row:end-9@xl"] {
        grid-row-end: 9;
      }

      [bp-layout~="row:start-10@xl"] {
        grid-row-start: 10;
      }

      [bp-layout~="row:end-10@xl"] {
        grid-row-end: 10;
      }

      [bp-layout~="row:start-11@xl"] {
        grid-row-start: 11;
      }

      [bp-layout~="row:end-11@xl"] {
        grid-row-end: 11;
      }

      [bp-layout~="row:start-12@xl"] {
        grid-row-start: 12;
      }

      [bp-layout~="row:end-12@xl"] {
        grid-row-end: 12;
      }

      [bp-layout~="row:start-13@xl"] {
        grid-row-start: 13;
      }

      [bp-layout~="row:end-13@xl"] {
        grid-row-end: 13;
      }
    }

    @container (width >= 320px) {
      [bp-layout~="grid"] {
        &[bp-layout~="block:start@xs"] {
          align-content: start;
        }

        &[bp-layout~="inline:end@xs"] {
          justify-content: end;
        }

        &[bp-layout~="block:end@xs"] {
          align-content: end;
        }

        &[bp-layout~="inline:start"] {
          justify-content: start;
        }

        &[bp-layout~="block:center@xs"] {
          align-content: center;
          align-items: center;
        }

        &[bp-layout~="inline:center@xs"] {
          justify-content: center;
          justify-items: center;
        }

        &[bp-layout~="center@xs"] {
          place-content: center;
          place-items: center;
        }

        &[bp-layout~="block:stretch@xs"] {
          align-content: stretch;
          align-items: stretch;
        }

        &[bp-layout~="inline:stretch@xs"] {
          justify-content: stretch;
          justify-items: stretch;
        }

        &[bp-layout~="stretch@xs"] {
          place-content: stretch;
          place-items: stretch stretch;
        }
      }
    }

    @container (width >= 480px) {
      [bp-layout~="grid"] {
        &[bp-layout~="block:start@sm"] {
          align-content: start;
        }

        &[bp-layout~="inline:end@sm"] {
          justify-content: end;
        }

        &[bp-layout~="block:end@sm"] {
          align-content: end;
        }

        &[bp-layout~="inline:start"] {
          justify-content: start;
        }

        &[bp-layout~="block:center@sm"] {
          align-content: center;
          align-items: center;
        }

        &[bp-layout~="inline:center@sm"] {
          justify-content: center;
          justify-items: center;
        }

        &[bp-layout~="center@sm"] {
          place-content: center;
          place-items: center;
        }

        &[bp-layout~="block:stretch@sm"] {
          align-content: stretch;
          align-items: stretch;
        }

        &[bp-layout~="inline:stretch@sm"] {
          justify-content: stretch;
          justify-items: stretch;
        }

        &[bp-layout~="stretch@sm"] {
          place-content: stretch;
          place-items: stretch stretch;
        }
      }
    }

    @container (width >= 720px) {
      [bp-layout~="grid"] {
        &[bp-layout~="block:start@md"] {
          align-content: start;
        }

        &[bp-layout~="inline:end@md"] {
          justify-content: end;
        }

        &[bp-layout~="block:end@md"] {
          align-content: end;
        }

        &[bp-layout~="inline:start"] {
          justify-content: start;
        }

        &[bp-layout~="block:center@md"] {
          align-content: center;
          align-items: center;
        }

        &[bp-layout~="inline:center@md"] {
          justify-content: center;
          justify-items: center;
        }

        &[bp-layout~="center@md"] {
          place-content: center;
          place-items: center;
        }

        &[bp-layout~="block:stretch@md"] {
          align-content: stretch;
          align-items: stretch;
        }

        &[bp-layout~="inline:stretch@md"] {
          justify-content: stretch;
          justify-items: stretch;
        }

        &[bp-layout~="stretch@md"] {
          place-content: stretch;
          place-items: stretch stretch;
        }
      }
    }

    @container (width >= 1024px) {
      [bp-layout~="grid"] {
        &[bp-layout~="block:start@lg"] {
          align-content: start;
        }

        &[bp-layout~="inline:end@lg"] {
          justify-content: end;
        }

        &[bp-layout~="block:end@lg"] {
          align-content: end;
        }

        &[bp-layout~="inline:start"] {
          justify-content: start;
        }

        &[bp-layout~="block:center@lg"] {
          align-content: center;
          align-items: center;
        }

        &[bp-layout~="inline:center@lg"] {
          justify-content: center;
          justify-items: center;
        }

        &[bp-layout~="center@lg"] {
          place-content: center;
          place-items: center;
        }

        &[bp-layout~="block:stretch@lg"] {
          align-content: stretch;
          align-items: stretch;
        }

        &[bp-layout~="inline:stretch@lg"] {
          justify-content: stretch;
          justify-items: stretch;
        }

        &[bp-layout~="stretch@lg"] {
          place-content: stretch;
          place-items: stretch stretch;
        }
      }
    }

    @container (width >= 1168px) {
      [bp-layout~="grid"] {
        &[bp-layout~="block:start@xl"] {
          align-content: start;
        }

        &[bp-layout~="inline:end@xl"] {
          justify-content: end;
        }

        &[bp-layout~="block:end@xl"] {
          align-content: end;
        }

        &[bp-layout~="inline:start"] {
          justify-content: start;
        }

        &[bp-layout~="block:center@xl"] {
          align-content: center;
          align-items: center;
        }

        &[bp-layout~="inline:center@xl"] {
          justify-content: center;
          justify-items: center;
        }

        &[bp-layout~="center@xl"] {
          place-content: center;
          place-items: center;
        }

        &[bp-layout~="block:stretch@xl"] {
          align-content: stretch;
          align-items: stretch;
        }

        &[bp-layout~="inline:stretch@xl"] {
          justify-content: stretch;
          justify-items: stretch;
        }

        &[bp-layout~="stretch@xl"] {
          place-content: stretch;
          place-items: stretch stretch;
        }
      }
    }

    [bp-layout~="display:none"] {
      display: none !important;
    }

    [bp-layout~="display:flex"] {
      display: flex !important;
    }

    [bp-layout~="display:contents"] {
      display: contents !important;
    }

    [bp-layout~="display:block"] {
      display: block !important;
    }

    [bp-layout~="display:inline"] {
      display: inline !important;
    }

    @container (width >= 480px) {
      [bp-layout~="display:none@sm"] {
        display: none !important;
      }

      [bp-layout~="display:flex@sm"] {
        display: flex !important;
      }

      [bp-layout~="display:block@sm"] {
        display: block !important;
      }

      [bp-layout~="display:inline@sm"] {
        display: inline !important;
      }
    }

    @container (width >= 720px) {
      [bp-layout~="display:none@md"] {
        display: none !important;
      }

      [bp-layout~="display:flex@md"] {
        display: flex !important;
      }

      [bp-layout~="display:block@md"] {
        display: block !important;
      }

      [bp-layout~="display:inline@md"] {
        display: inline !important;
      }
    }

    @container (width >= 1024px) {
      [bp-layout~="display:none@lg"] {
        display: none !important;
      }

      [bp-layout~="display:flex@lg"] {
        display: flex !important;
      }

      [bp-layout~="display:block@lg"] {
        display: block !important;
      }

      [bp-layout~="display:inline@lg"] {
        display: inline !important;
      }
    }

    @container (width >= 1168px) {
      [bp-layout~="display:none@xl"] {
        display: none !important;
      }

      [bp-layout~="display:flex@xl"] {
        display: flex !important;
      }

      [bp-layout~="display:block@xl"] {
        display: block !important;
      }

      [bp-layout~="display:inline@xl"] {
        display: inline !important;
      }
    }

    [bp-layout~="display:sr"] {
      clip: rect(1px, 1px, 1px, 1px);
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
      width: 1px;
      height: 1px;
      padding: 0;
      top: 0;
      left: 0;
      overflow: hidden;
      display: block !important;
      position: absolute !important;
    }

    [bp-layout~="gap:none"] {
      gap: min(var(--βgfr), 0);
    }

    [bp-layout~="gap:xs"] {
      gap: min(var(--βgfr), var(--β1));
    }

    [bp-layout~="gap:sm"] {
      gap: min(var(--βgfr), var(--β2));
    }

    [bp-layout~="gap:md"] {
      gap: min(var(--βgfr), var(--β3));
    }

    [bp-layout~="gap:lg"] {
      gap: min(var(--βgfr), var(--β4));
    }

    [bp-layout~="gap:xl"] {
      gap: min(var(--βgfr), var(--β5));
    }

    [bp-layout~="m:none"] {
      margin: 0 !important;
    }

    [bp-layout~="m:xs"] {
      margin: var(--β1) !important;
    }

    [bp-layout~="m:sm"] {
      margin: var(--β2) !important;
    }

    [bp-layout~="m:md"] {
      margin: var(--β3) !important;
    }

    [bp-layout~="m:lg"] {
      margin: var(--β4) !important;
    }

    [bp-layout~="m:xl"] {
      margin: var(--β5) !important;
    }

    [bp-layout~="m-x:none"] {
      margin-inline: 0 !important;
    }

    [bp-layout~="m-y:none"] {
      margin-block: 0 !important;
    }

    [bp-layout~="m-x:xs"] {
      margin-inline: var(--β1) !important;
    }

    [bp-layout~="m-y:xs"] {
      margin-block: var(--β1) !important;
    }

    [bp-layout~="m-x:sm"] {
      margin-inline: var(--β2) !important;
    }

    [bp-layout~="m-y:sm"] {
      margin-block: var(--β2) !important;
    }

    [bp-layout~="m-x:md"] {
      margin-inline: var(--β3) !important;
    }

    [bp-layout~="m-y:md"] {
      margin-block: var(--β3) !important;
    }

    [bp-layout~="m-x:lg"] {
      margin-inline: var(--β4) !important;
    }

    [bp-layout~="m-y:lg"] {
      margin-block: var(--β4) !important;
    }

    [bp-layout~="m-x:xl"] {
      margin-inline: var(--β5) !important;
    }

    [bp-layout~="m-y:xl"] {
      margin-block: var(--β5) !important;
    }

    [bp-layout~="m-t:none"] {
      margin-top: 0 !important;
    }

    [bp-layout~="m-r:none"] {
      margin-right: 0 !important;
    }

    [bp-layout~="m-b:none"] {
      margin-bottom: 0 !important;
    }

    [bp-layout~="m-l:none"] {
      margin-left: 0 !important;
    }

    [bp-layout~="m-t:xs"] {
      margin-top: var(--β1) !important;
    }

    [bp-layout~="m-r:xs"] {
      margin-right: var(--β1) !important;
    }

    [bp-layout~="m-b:xs"] {
      margin-bottom: var(--β1) !important;
    }

    [bp-layout~="m-l:xs"] {
      margin-left: var(--β1) !important;
    }

    [bp-layout~="m-t:sm"] {
      margin-top: var(--β2) !important;
    }

    [bp-layout~="m-r:sm"] {
      margin-right: var(--β2) !important;
    }

    [bp-layout~="m-b:sm"] {
      margin-bottom: var(--β2) !important;
    }

    [bp-layout~="m-l:sm"] {
      margin-left: var(--β2) !important;
    }

    [bp-layout~="m-t:md"] {
      margin-top: var(--β3) !important;
    }

    [bp-layout~="m-r:md"] {
      margin-right: var(--β3) !important;
    }

    [bp-layout~="m-b:md"] {
      margin-bottom: var(--β3) !important;
    }

    [bp-layout~="m-l:md"] {
      margin-left: var(--β3) !important;
    }

    [bp-layout~="m-t:lg"] {
      margin-top: var(--β4) !important;
    }

    [bp-layout~="m-r:lg"] {
      margin-right: var(--β4) !important;
    }

    [bp-layout~="m-b:lg"] {
      margin-bottom: var(--β4) !important;
    }

    [bp-layout~="m-l:lg"] {
      margin-left: var(--β4) !important;
    }

    [bp-layout~="m-t:xl"] {
      margin-top: var(--β5) !important;
    }

    [bp-layout~="m-r:xl"] {
      margin-right: var(--β5) !important;
    }

    [bp-layout~="m-b:xl"] {
      margin-bottom: var(--β5) !important;
    }

    [bp-layout~="m-l:xl"] {
      margin-left: var(--β5) !important;
    }

    [bp-layout="scroll:none"] {
      overflow: hidden !important;
    }

    [bp-layout~="fill"] {
      width: 100% !important;
    }
  }
}

*, :before, :after, :host {
  box-sizing: border-box;
}