:where(.fs-block-grid) {
  --grid-columns: 4;
  --grid-height: 600px;
  --grid-gap: var(--wp--preset--spacing--base);
}

.fs-block-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gap) clamp(0%, var(--grid-gap), calc(100% / var(--grid-columns)));

  :has(> &) {
    container-type: inline-size;
  }

  :where(.fs-block-grid > *) {
    min-width: 0;
  }

  &.is-lanes {
    /*
     TODO: display: grid-lanes;
     @see https://github.com/w3c/csswg-drafts/issues/12022#issuecomment-3525043825
    */
    display: grid-lanes;
    align-items: start;
  }

  &.is-layout-1,
  &.is-layout-2,
  &.is-layout-3,
  &.is-layout-4,
  &.is-layout-5,
  &.is-layout-6,
  &.is-layout-7,
  &.is-layout-8,
  &.is-layout-9,
  &.is-layout-10,
  &.is-layout-11,
  &.is-layout-12,
  &.is-layout-13,
  &.is-layout-14 {
    grid-auto-flow: dense;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(calc((var(--grid-height) - var(--grid-gap) * 11) / 12), auto);
  }

  /* Layout 1 */

  &.is-layout-1 {

    >* {
      grid-column: span 12;
      grid-row: span 4;
    }

    > :nth-child(1),
    > :nth-child(2) {
      grid-row: span 8;
    }

    @container (min-width: 551px) {

      >* {
        grid-column: span 6;
        grid-row: span 4;
      }

      > :nth-child(1) {
        grid-column: span 12;
        grid-row: span 8;
      }

      > :nth-child(2) {
        grid-row: span 8;
      }
    }

    @container (min-width: 851px) {

      >* {
        grid-column: span 3;
        grid-row: span 6;
      }

      > :nth-child(1) {
        grid-column: span 6;
        grid-row: span 12;
      }

      > :nth-child(2) {
        grid-column: span 3;
        grid-row: span 12;
      }

      > :nth-child(3),
      > :nth-child(4) {
        grid-column: span 3;
        grid-row: span 6;
      }
    }
  }

  /* Layout 2 */

  &.is-layout-2 {

    >* {
      grid-column: span 12;
      grid-row: span 4;
    }

    > :nth-child(1) {
      grid-row: span 8;
    }

    @container (min-width: 851px) {

      >* {
        grid-column: span 4;
      }

      > :nth-child(1) {
        grid-column: span 12;
        grid-row: span 12;
      }
    }
  }

  /* Layout 3 */

  &.is-layout-3 {

    >* {
      grid-column: span 12;
      grid-row: span 4;
    }

    > :nth-child(1) {
      grid-row: span 8;
    }

    @container (min-width: 551px) {

      >* {
        grid-column: span 6;
      }

      > :nth-child(1) {
        grid-column: span 12;
        grid-row: span 8;
      }
    }

    @container (min-width: 851px) {

      >* {
        grid-column: span 3;
        grid-row: span 6;
      }

      > :nth-child(1) {
        grid-column: span 6;
        grid-row: span 12;
      }

      > :nth-child(2) {
        grid-column: span 6;
      }

      > :nth-child(3),
      > :nth-child(4) {
        grid-column: span 3;
      }
    }
  }

  /* Layout 4 */

  &.is-layout-4 {

    >* {
      grid-column: span 12;
      grid-row: span 8;
    }

    @container (min-width: 551px) {

      >* {
        grid-column: span 6;
      }
    }

    @container (min-width: 851px) {

      >* {
        grid-column: span 3;
        grid-row: span 12;
      }
    }
  }

  /* Layout 5 */

  &.is-layout-5 {

    >* {
      grid-column: span 12;
      grid-row: span 8;
    }

    @container (min-width: 551px) {

      >* {
        grid-column: span 6;
      }
    }

    @container (min-width: 851px) {

      >* {
        grid-column: span 4;
        grid-row: span 12;
      }
    }
  }

  /* Layout 6 */

  &.is-layout-6 {

    >* {
      grid-column: span 12;
      grid-row: span 4;
    }

    > :nth-child(1) {
      grid-row: span 8;
    }

    @container (min-width: 551px) {

      >* {
        grid-column: span 6;
      }

      > :nth-child(1) {
        grid-column: span 12;
      }
    }

    @container (min-width: 851px) {

      >* {
        grid-column: span 3;
        grid-row: span 6;
      }

      > :nth-child(1) {
        grid-column: span 9;
        grid-row: span 12;
      }
    }
  }

  /* Layout 7 */

  &.is-layout-7 {

    >* {
      grid-column: span 12;
      grid-row: span 4;
    }

    > :nth-child(1),
    > :nth-child(2) {
      grid-row: span 8;
    }

    @container (min-width: 551px) {

      >* {
        grid-column: span 6;
      }

      > :nth-child(1) {
        grid-column: span 12;
        grid-row: span 8;
      }

      > :nth-child(2) {
        grid-column: span 6;
        grid-row: span 8;
      }
    }

    @container (min-width: 851px) {

      >* {
        grid-column: span 3;
        grid-row: span 6;
      }

      > :nth-child(1) {
        grid-column: span 3;
        grid-row: span 12;
      }

      > :nth-child(2) {
        grid-column: span 6;
        grid-row: span 12;
      }
    }
  }

  /* Layout 8 */

  &.is-layout-8 {

    >* {
      grid-column: span 12;
      grid-row: span 8;
    }


    @container (min-width: 551px) {

      >* {
        grid-column: span 6;
      }

      > :nth-child(1) {
        grid-column: span 12;
      }
    }

    @container (min-width: 851px) {

      >*,
      > :nth-child(1) {
        grid-column: span 3;
        grid-row: span 12;
      }

      > :nth-child(2) {
        grid-column: span 6;
      }
    }
  }

  /* Layout 9 */

  &.is-layout-9 {

    >* {
      grid-column: span 12;
      grid-row: span 8;
    }


    @container (min-width: 551px) {

      >* {
        grid-column: span 6;
        grid-row: span 8;
      }

      > :nth-child(1) {
        grid-column: span 12;
      }
    }

    @container (min-width: 851px) {

      >* {
        grid-column: span 3;
        grid-row: span 12;
      }

      > :nth-child(1) {
        grid-column: span 6;
        grid-row: span 12;
      }
    }
  }

  /* Layout 10 */

  &.is-layout-10 {

    >* {
      grid-column: span 12;
      grid-row: span 3;
    }

    > :nth-child(1) {
      grid-row: span 6;
    }

    @container (min-width: 551px) {

      >* {
        grid-column: span 6;
        grid-row: span 3;
      }

      > :nth-child(1) {
        grid-column: span 12;
        grid-row: span 6;
      }
    }

    @container (min-width: 851px) {

      >* {
        grid-column: span 6;
        grid-row: span 4;
      }

      > :nth-child(1) {
        grid-column: span 6;
        grid-row: span 12;
      }

      > :nth-child(3),
      > :nth-child(4) {
        grid-column: span 3;
      }
    }
  }

  /* Layout 11 */

  &.is-layout-11 {

    >* {
      grid-column: span 12;
      grid-row: span 4;
    }

    > :nth-child(1) {
      grid-row: span 8;
    }

    @container (min-width: 551px) {

      >* {
        grid-column: span 6;
        grid-row: span 4;
      }

      > :nth-child(1) {
        grid-column: span 12;
        grid-row: span 6;
      }

      > :nth-child(2),
      > :nth-child(4) {
        grid-column: span 6;
        grid-row: span 6;
      }

      > :nth-child(3) {
        grid-column: span 6;
        grid-row: span 12;
      }
    }

    @container (min-width: 851px) {

      >* {
        grid-column: span 6;
        grid-row: span 4;
      }

      > :nth-child(1) {
        grid-column: span 6;
        grid-row: span 8;
      }

      > :nth-child(2) {
        grid-column: span 3;
        grid-row: span 8;
      }

      > :nth-child(3) {
        grid-column: span 3;
        grid-row: span 12;
      }

      > :nth-child(4) {
        grid-column: span 3;
        grid-row: span 4;
      }

      > :nth-child(5) {
        grid-column: span 6;
        grid-row: span 4;
      }
    }
  }

  /* Layout 12 */

  &.is-layout-12 {

    >* {
      grid-column: span 12;
      grid-row: span 8;
    }

    > :nth-child(1),
    > :nth-child(4),
    > :nth-child(5) {
      grid-row: span 4;
    }

    @container (min-width: 551px) {

      >* {
        grid-column: span 6;
        grid-row: span 6;
      }

      > :nth-child(1) {
        grid-column: span 12;
        grid-row: span 4;
      }

      > :nth-child(2),
      > :nth-child(3) {
        grid-column: span 6;
        grid-row: span 8;

      }

      > :nth-child(4),
      > :nth-child(5) {
        grid-column: span 6;
        grid-row: span 4;
      }
    }

    @container (min-width: 851px) {

      >* {
        grid-column: span 4;
        grid-row: span 12;
      }

      > :nth-child(1),
      > :nth-child(4),
      > :nth-child(5) {
        grid-column: span 8;
        grid-row: span 6;
      }

      > :nth-child(2),
      > :nth-child(3),
      > :nth-child(6) {
        grid-column: span 4;
        grid-row: span 12;
      }
    }
  }

  /* Layout 13 */

  &.is-layout-13 {

    >* {
      grid-column: span 12;
      grid-row: span 3;
    }

    > :nth-child(1) {
      grid-row: span 6;
    }

    > :nth-child(2),
    > :nth-child(4) {
      grid-row: span 4;
    }

    > :nth-child(3) {
      grid-row: span 8;
    }

    @container (min-width: 551px) {

      > :nth-child(2),
      > :nth-child(4) {
        grid-column: span 6;
      }

      > :nth-child(3) {
        grid-column: span 6;
      }
    }

    @container (min-width: 851px) {

      >* {
        grid-column: span 6;
        grid-row: span 4;
      }

      > :nth-child(1) {
        grid-column: span 6;
        grid-row: span 8;
      }

      > :nth-child(2),
      > :nth-child(4) {
        grid-column: span 3;
        grid-row: span 6;
      }

      > :nth-child(3) {
        grid-column: span 3;
        grid-row: span 12;
      }
    }
  }

  /* Layout 14 */

  &.is-layout-14 {

    >* {
      grid-column: span 12;
      grid-row: span 4;
    }

    > :nth-child(2),
    > :nth-child(3),
    > :nth-child(4),
    > :nth-child(5) {
      grid-row: span 8;
    }

    @container (min-width: 551px) {

      >* {
        grid-column: span 6;
        grid-row: span 4;
      }

      > :nth-child(1) {
        grid-column: span 12;
      }

      > :nth-child(2),
      > :nth-child(3),
      > :nth-child(4),
      > :nth-child(5) {
        grid-column: span 6;
        grid-row: span 8;
      }
    }

    @container (min-width: 851px) {

      >* {
        grid-column: span 4;
        grid-row: span 6;
      }

      > :nth-child(1) {
        grid-column: span 8;
        grid-row: span 6;
      }

      > :nth-child(2) {
        grid-column: span 4;
        grid-row: span 12;
      }

      > :nth-child(3) {
        grid-column: span 4;
        grid-row: span 12;
      }

      > :nth-child(4) {
        grid-column: span 2;
        grid-row: span 12;
      }

      > :nth-child(5) {
        grid-column: span 2;
        grid-row: span 12;
      }
    }
  }
}