diff --git a/README.md b/README.md index 6e015bf2..404e4ccc 100644 --- a/README.md +++ b/README.md @@ -81,3 +81,7 @@ You can test the Layout Grid with: - `yarn layout` - `yarn jest` + +You can update the visual snapshots with: + +- `yarn jest -u` diff --git a/blocks/layout-grid/editor.scss b/blocks/layout-grid/editor.scss index f9fae9ce..5766747f 100644 --- a/blocks/layout-grid/editor.scss +++ b/blocks/layout-grid/editor.scss @@ -23,7 +23,7 @@ } // 3. Unset margins and paddings for column container. -.wp-block-jetpack-layout-grid [data-type="jetpack/layout-grid-column"].wp-block { // Selector needs specificity to override. +.wp-block-jetpack-layout-grid-editor [data-type="jetpack/layout-grid-column"].wp-block { // Selector needs specificity to override. margin: 0; padding-left: 0; padding-right: 0; @@ -118,7 +118,7 @@ * Placeholder options */ -.wp-block-jetpack-layout-grid .block-editor-inner-blocks__template-picker-options { +.wp-block-jetpack-layout-grid-editor .block-editor-inner-blocks__template-picker-options { display: flex; flex-direction: row; flex-wrap: nowrap; @@ -213,7 +213,7 @@ /** * Individual column alignment for the editor */ -.wp-block-jetpack-layout-grid { +.wp-block-jetpack-layout-grid-editor { &.are-vertically-aligned-top [data-type="jetpack/layout-grid-column"].wp-block { align-self: flex-start; } diff --git a/blocks/layout-grid/front.css b/blocks/layout-grid/front.css deleted file mode 100644 index ee0c50ab..00000000 --- a/blocks/layout-grid/front.css +++ /dev/null @@ -1,1044 +0,0 @@ -/** - * Grid Block styles. - * These styles are loaded into both the editor, and the frontend. - */ -/** - * Responsive Grid Options - */ -/* autoprefixer grid: no-autoplace */ -.wp-block-jetpack-layout-grid { - display: -ms-grid; - display: grid; - grid-gap: 24px; - -ms-grid-columns: (1fr)[4]; - grid-template-columns: repeat(4, 1fr); } - .wp-block-jetpack-layout-grid.column1-mobile-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 1; - grid-column-start: 1; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 1; - grid-column-start: 1; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 1; - grid-column-start: 1; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 1; - grid-column-start: 1; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 2; - grid-column-start: 2; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 2; - grid-column-start: 2; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 2; - grid-column-start: 2; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 2; - grid-column-start: 2; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 3; - grid-column-start: 3; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 3; - grid-column-start: 3; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 3; - grid-column-start: 3; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 3; - grid-column-start: 3; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 4; - grid-column-start: 4; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 4; - grid-column-start: 4; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 4; - grid-column-start: 4; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 4; - grid-column-start: 4; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 5; - grid-column-start: 5; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 5; - grid-column-start: 5; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 5; - grid-column-start: 5; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 5; - grid-column-start: 5; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 6; - grid-column-start: 6; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 6; - grid-column-start: 6; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 6; - grid-column-start: 6; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 6; - grid-column-start: 6; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 7; - grid-column-start: 7; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 7; - grid-column-start: 7; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 7; - grid-column-start: 7; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 7; - grid-column-start: 7; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 8; - grid-column-start: 8; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 8; - grid-column-start: 8; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 8; - grid-column-start: 8; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 8; - grid-column-start: 8; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 9; - grid-column-start: 9; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 9; - grid-column-start: 9; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 9; - grid-column-start: 9; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 9; - grid-column-start: 9; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 10; - grid-column-start: 10; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 10; - grid-column-start: 10; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 10; - grid-column-start: 10; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 10; - grid-column-start: 10; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 11; - grid-column-start: 11; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 11; - grid-column-start: 11; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 11; - grid-column-start: 11; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 11; - grid-column-start: 11; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 12; - grid-column-start: 12; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 12; - grid-column-start: 12; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 12; - grid-column-start: 12; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 12; - grid-column-start: 12; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 1; - grid-column-end: span 1; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 1; - grid-column-end: span 1; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 1; - grid-column-end: span 1; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 1; - grid-column-end: span 1; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 2; - grid-column-end: span 2; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 2; - grid-column-end: span 2; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 2; - grid-column-end: span 2; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 2; - grid-column-end: span 2; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 3; - grid-column-end: span 3; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 3; - grid-column-end: span 3; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 3; - grid-column-end: span 3; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 3; - grid-column-end: span 3; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 4; - grid-column-end: span 4; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 4; - grid-column-end: span 4; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 4; - grid-column-end: span 4; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 4; - grid-column-end: span 4; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 5; - grid-column-end: span 5; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 5; - grid-column-end: span 5; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 5; - grid-column-end: span 5; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 5; - grid-column-end: span 5; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 6; - grid-column-end: span 6; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 6; - grid-column-end: span 6; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 6; - grid-column-end: span 6; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 6; - grid-column-end: span 6; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 7; - grid-column-end: span 7; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 7; - grid-column-end: span 7; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 7; - grid-column-end: span 7; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 7; - grid-column-end: span 7; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 8; - grid-column-end: span 8; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 8; - grid-column-end: span 8; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 8; - grid-column-end: span 8; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 8; - grid-column-end: span 8; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 9; - grid-column-end: span 9; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 9; - grid-column-end: span 9; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 9; - grid-column-end: span 9; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 9; - grid-column-end: span 9; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 10; - grid-column-end: span 10; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 10; - grid-column-end: span 10; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 10; - grid-column-end: span 10; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 10; - grid-column-end: span 10; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 11; - grid-column-end: span 11; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 11; - grid-column-end: span 11; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 11; - grid-column-end: span 11; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 11; - grid-column-end: span 11; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 12; - grid-column-end: span 12; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 12; - grid-column-end: span 12; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 12; - grid-column-end: span 12; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 12; - grid-column-end: span 12; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-row: 1; - grid-row-start: 1; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-row: 1; - grid-row-start: 1; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-row: 1; - grid-row-start: 1; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-row: 1; - grid-row-start: 1; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-row: 2; - grid-row-start: 2; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-row: 2; - grid-row-start: 2; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-row: 2; - grid-row-start: 2; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-row: 2; - grid-row-start: 2; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-row: 3; - grid-row-start: 3; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-row: 3; - grid-row-start: 3; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-row: 3; - grid-row-start: 3; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-row: 3; - grid-row-start: 3; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-row: 4; - grid-row-start: 4; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-row: 4; - grid-row-start: 4; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-row: 4; - grid-row-start: 4; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-row: 4; - grid-row-start: 4; } - @media (min-width: 600px) { - .wp-block-jetpack-layout-grid { - -ms-grid-columns: (1fr)[8]; - grid-template-columns: repeat(8, 1fr); } - .wp-block-jetpack-layout-grid.column1-tablet-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 1; - grid-column-start: 1; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 1; - grid-column-start: 1; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 1; - grid-column-start: 1; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 1; - grid-column-start: 1; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 2; - grid-column-start: 2; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 2; - grid-column-start: 2; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 2; - grid-column-start: 2; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 2; - grid-column-start: 2; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 3; - grid-column-start: 3; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 3; - grid-column-start: 3; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 3; - grid-column-start: 3; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 3; - grid-column-start: 3; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 4; - grid-column-start: 4; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 4; - grid-column-start: 4; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 4; - grid-column-start: 4; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 4; - grid-column-start: 4; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 5; - grid-column-start: 5; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 5; - grid-column-start: 5; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 5; - grid-column-start: 5; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 5; - grid-column-start: 5; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 6; - grid-column-start: 6; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 6; - grid-column-start: 6; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 6; - grid-column-start: 6; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 6; - grid-column-start: 6; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 7; - grid-column-start: 7; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 7; - grid-column-start: 7; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 7; - grid-column-start: 7; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 7; - grid-column-start: 7; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 8; - grid-column-start: 8; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 8; - grid-column-start: 8; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 8; - grid-column-start: 8; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 8; - grid-column-start: 8; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 9; - grid-column-start: 9; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 9; - grid-column-start: 9; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 9; - grid-column-start: 9; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 9; - grid-column-start: 9; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 10; - grid-column-start: 10; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 10; - grid-column-start: 10; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 10; - grid-column-start: 10; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 10; - grid-column-start: 10; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 11; - grid-column-start: 11; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 11; - grid-column-start: 11; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 11; - grid-column-start: 11; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 11; - grid-column-start: 11; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 12; - grid-column-start: 12; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 12; - grid-column-start: 12; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 12; - grid-column-start: 12; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 12; - grid-column-start: 12; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 1; - grid-column-end: span 1; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 1; - grid-column-end: span 1; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 1; - grid-column-end: span 1; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 1; - grid-column-end: span 1; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 2; - grid-column-end: span 2; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 2; - grid-column-end: span 2; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 2; - grid-column-end: span 2; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 2; - grid-column-end: span 2; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 3; - grid-column-end: span 3; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 3; - grid-column-end: span 3; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 3; - grid-column-end: span 3; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 3; - grid-column-end: span 3; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 4; - grid-column-end: span 4; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 4; - grid-column-end: span 4; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 4; - grid-column-end: span 4; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 4; - grid-column-end: span 4; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 5; - grid-column-end: span 5; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 5; - grid-column-end: span 5; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 5; - grid-column-end: span 5; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 5; - grid-column-end: span 5; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 6; - grid-column-end: span 6; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 6; - grid-column-end: span 6; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 6; - grid-column-end: span 6; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 6; - grid-column-end: span 6; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 7; - grid-column-end: span 7; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 7; - grid-column-end: span 7; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 7; - grid-column-end: span 7; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 7; - grid-column-end: span 7; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 8; - grid-column-end: span 8; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 8; - grid-column-end: span 8; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 8; - grid-column-end: span 8; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 8; - grid-column-end: span 8; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 9; - grid-column-end: span 9; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 9; - grid-column-end: span 9; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 9; - grid-column-end: span 9; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 9; - grid-column-end: span 9; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 10; - grid-column-end: span 10; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 10; - grid-column-end: span 10; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 10; - grid-column-end: span 10; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 10; - grid-column-end: span 10; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 11; - grid-column-end: span 11; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 11; - grid-column-end: span 11; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 11; - grid-column-end: span 11; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 11; - grid-column-end: span 11; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 12; - grid-column-end: span 12; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 12; - grid-column-end: span 12; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 12; - grid-column-end: span 12; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 12; - grid-column-end: span 12; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-row: 1; - grid-row-start: 1; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-row: 1; - grid-row-start: 1; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-row: 1; - grid-row-start: 1; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-row: 1; - grid-row-start: 1; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-row: 2; - grid-row-start: 2; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-row: 2; - grid-row-start: 2; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-row: 2; - grid-row-start: 2; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-row: 2; - grid-row-start: 2; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-row: 3; - grid-row-start: 3; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-row: 3; - grid-row-start: 3; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-row: 3; - grid-row-start: 3; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-row: 3; - grid-row-start: 3; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-row: 4; - grid-row-start: 4; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-row: 4; - grid-row-start: 4; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-row: 4; - grid-row-start: 4; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-row: 4; - grid-row-start: 4; } } - @media (min-width: 1080px) { - .wp-block-jetpack-layout-grid { - -ms-grid-columns: (1fr)[12]; - grid-template-columns: repeat(12, 1fr); } - .wp-block-jetpack-layout-grid.column1-desktop-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 1; - grid-column-start: 1; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 1; - grid-column-start: 1; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 1; - grid-column-start: 1; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 1; - grid-column-start: 1; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 2; - grid-column-start: 2; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 2; - grid-column-start: 2; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 2; - grid-column-start: 2; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 2; - grid-column-start: 2; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 3; - grid-column-start: 3; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 3; - grid-column-start: 3; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 3; - grid-column-start: 3; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 3; - grid-column-start: 3; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 4; - grid-column-start: 4; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 4; - grid-column-start: 4; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 4; - grid-column-start: 4; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 4; - grid-column-start: 4; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 5; - grid-column-start: 5; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 5; - grid-column-start: 5; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 5; - grid-column-start: 5; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 5; - grid-column-start: 5; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 6; - grid-column-start: 6; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 6; - grid-column-start: 6; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 6; - grid-column-start: 6; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 6; - grid-column-start: 6; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 7; - grid-column-start: 7; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 7; - grid-column-start: 7; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 7; - grid-column-start: 7; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 7; - grid-column-start: 7; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 8; - grid-column-start: 8; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 8; - grid-column-start: 8; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 8; - grid-column-start: 8; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 8; - grid-column-start: 8; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 9; - grid-column-start: 9; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 9; - grid-column-start: 9; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 9; - grid-column-start: 9; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 9; - grid-column-start: 9; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 10; - grid-column-start: 10; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 10; - grid-column-start: 10; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 10; - grid-column-start: 10; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 10; - grid-column-start: 10; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 11; - grid-column-start: 11; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 11; - grid-column-start: 11; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 11; - grid-column-start: 11; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 11; - grid-column-start: 11; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 12; - grid-column-start: 12; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 12; - grid-column-start: 12; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 12; - grid-column-start: 12; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 12; - grid-column-start: 12; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 1; - grid-column-end: span 1; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 1; - grid-column-end: span 1; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 1; - grid-column-end: span 1; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 1; - grid-column-end: span 1; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 2; - grid-column-end: span 2; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 2; - grid-column-end: span 2; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 2; - grid-column-end: span 2; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 2; - grid-column-end: span 2; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 3; - grid-column-end: span 3; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 3; - grid-column-end: span 3; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 3; - grid-column-end: span 3; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 3; - grid-column-end: span 3; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 4; - grid-column-end: span 4; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 4; - grid-column-end: span 4; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 4; - grid-column-end: span 4; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 4; - grid-column-end: span 4; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 5; - grid-column-end: span 5; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 5; - grid-column-end: span 5; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 5; - grid-column-end: span 5; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 5; - grid-column-end: span 5; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 6; - grid-column-end: span 6; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 6; - grid-column-end: span 6; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 6; - grid-column-end: span 6; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 6; - grid-column-end: span 6; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 7; - grid-column-end: span 7; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 7; - grid-column-end: span 7; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 7; - grid-column-end: span 7; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 7; - grid-column-end: span 7; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 8; - grid-column-end: span 8; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 8; - grid-column-end: span 8; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 8; - grid-column-end: span 8; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 8; - grid-column-end: span 8; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 9; - grid-column-end: span 9; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 9; - grid-column-end: span 9; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 9; - grid-column-end: span 9; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 9; - grid-column-end: span 9; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 10; - grid-column-end: span 10; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 10; - grid-column-end: span 10; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 10; - grid-column-end: span 10; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 10; - grid-column-end: span 10; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 11; - grid-column-end: span 11; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 11; - grid-column-end: span 11; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 11; - grid-column-end: span 11; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 11; - grid-column-end: span 11; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 12; - grid-column-end: span 12; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 12; - grid-column-end: span 12; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 12; - grid-column-end: span 12; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 12; - grid-column-end: span 12; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-row: 1; - grid-row-start: 1; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-row: 1; - grid-row-start: 1; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-row: 1; - grid-row-start: 1; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-row: 1; - grid-row-start: 1; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-row: 2; - grid-row-start: 2; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-row: 2; - grid-row-start: 2; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-row: 2; - grid-row-start: 2; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-row: 2; - grid-row-start: 2; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-row: 3; - grid-row-start: 3; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-row: 3; - grid-row-start: 3; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-row: 3; - grid-row-start: 3; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-row: 3; - grid-row-start: 3; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-row: 4; - grid-row-start: 4; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-row: 4; - grid-row-start: 4; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-row: 4; - grid-row-start: 4; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-row: 4; - grid-row-start: 4; } } - .wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column * { - word-break: break-word; - word-wrap: break-word; } - .wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__none { - grid-gap: 0px; } - .wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__small { - grid-gap: 8px; } - .wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__medium { - grid-gap: 16px; } - .wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__huge { - grid-gap: 48px; } - -.wp-block-jetpack-layout-grid-column { - max-width: 100%; } diff --git a/blocks/layout-grid/front.scss b/blocks/layout-grid/front.scss deleted file mode 100644 index 73a70650..00000000 --- a/blocks/layout-grid/front.scss +++ /dev/null @@ -1,131 +0,0 @@ -/** - * Grid Block styles. - * These styles are loaded into both the editor, and the frontend. - */ - -@import './constants.scss'; - - -/** - * Responsive Grid Options - */ - -/* autoprefixer grid: no-autoplace */ -.wp-block-jetpack-layout-grid { - display: grid; - grid-gap: $grid-gutter; - grid-template-columns: $grid-mobile; - - // Grid rules. - // Mobile first. - @for $i from 1 through 12 { - @for $x from 1 through 4 { - &.column#{ $x }-mobile-grid__start-#{ $i } > .wp-block-jetpack-layout-grid-column:nth-child(#{ $x }) { - grid-column-start: $i; - } - } - } - - @for $i from 1 through 12 { - @for $x from 1 through 4 { - &.column#{ $x }-mobile-grid__span-#{ $i } > .wp-block-jetpack-layout-grid-column:nth-child(#{ $x }) { - grid-column-end: span $i; // Set it to span $i columns, regardless of starting position. - } - } - } - - @for $i from 1 through 4 { - @for $x from 1 through 4 { - &.column#{ $x }-mobile-grid__row-#{ $i } > .wp-block-jetpack-layout-grid-column:nth-child(#{ $x }) { - grid-row-start: $i; - } - } - } - - // Tablet grid rules. - @media (min-width: #{ ($break-small) }) { - - grid-template-columns: $grid-tablet; - - @for $i from 1 through 12 { - @for $x from 1 through 4 { - &.column#{ $x }-tablet-grid__start-#{ $i } > .wp-block-jetpack-layout-grid-column:nth-child(#{ $x }) { - grid-column-start: $i; - } - } - } - - @for $i from 1 through 12 { - @for $x from 1 through 4 { - &.column#{ $x }-tablet-grid__span-#{ $i } > .wp-block-jetpack-layout-grid-column:nth-child(#{ $x }) { - grid-column-end: span $i; // Set it to span $i columns, regardless of starting position. - } - } - } - - @for $i from 1 through 4 { - @for $x from 1 through 4 { - &.column#{ $x }-tablet-grid__row-#{ $i } > .wp-block-jetpack-layout-grid-column:nth-child(#{ $x }) { - grid-row-start: $i; - } - } - } - } - - - // Desktop grid rules. - @media (min-width: #{ ($break-xlarge) }) { - grid-template-columns: $grid-desktop; - - @for $i from 1 through 12 { - @for $x from 1 through 4 { - &.column#{ $x }-desktop-grid__start-#{ $i } > .wp-block-jetpack-layout-grid-column:nth-child(#{ $x }) { - grid-column-start: $i; - } - } - } - - @for $i from 1 through 12 { - @for $x from 1 through 4 { - &.column#{ $x }-desktop-grid__span-#{ $i } > .wp-block-jetpack-layout-grid-column:nth-child(#{ $x }) { - grid-column-end: span $i; // Set it to span $i columns, regardless of starting position. - } - } - } - - @for $i from 1 through 4 { - @for $x from 1 through 4 { - &.column#{ $x }-desktop-grid__row-#{ $i } > .wp-block-jetpack-layout-grid-column:nth-child(#{ $x }) { - grid-row-start: $i; - } - } - } - } - - // Ensure long lines wrap in themes that don't already enforce this - .wp-block-jetpack-layout-grid-column * { - word-break: break-word; - word-wrap: break-word; - } - - &.wp-block-jetpack-layout-gutter__none { - grid-gap: $grid-gutter-none; - } - - &.wp-block-jetpack-layout-gutter__small { - grid-gap: $grid-gutter-small; - } - - &.wp-block-jetpack-layout-gutter__medium { - grid-gap: $grid-gutter-medium; - } - - &.wp-block-jetpack-layout-gutter__huge { - grid-gap: $grid-gutter-huge; - } -} - -// Ensure inner blocks with deliberate overflows are still constrained to column. -.wp-block-jetpack-layout-grid-column { - max-width: 100%; -} diff --git a/blocks/layout-grid/index.json b/blocks/layout-grid/index.json deleted file mode 100644 index 1ab55833..00000000 --- a/blocks/layout-grid/index.json +++ /dev/null @@ -1,3 +0,0 @@ -[ - "front.css" -] diff --git a/blocks/layout-grid/index.php b/blocks/layout-grid/index.php index c6cfbd4b..fabb385e 100644 --- a/blocks/layout-grid/index.php +++ b/blocks/layout-grid/index.php @@ -6,30 +6,13 @@ 'editor_script' => 'block-experiments', 'style' => 'block-experiments', 'editor_style' => 'block-experiments-editor', - 'render_callback' => function( $attribs, $content ) { - wp_enqueue_style( 'wpcom-layout-grid-front' ); - return $content; - }, ] ); register_block_type( 'jetpack/layout-grid-column', [ 'editor_script' => 'block-experiments', 'style' => 'block-experiments', 'editor_style' => 'block-experiments-editor', - 'render_callback' => function( $attribs, $content ) { - wp_enqueue_style( 'wpcom-layout-grid-front' ); - return $content; - }, ] ); wp_set_script_translations( 'block-experiments', 'layout-grid' ); } ); - -add_action( 'wp_enqueue_scripts', function() { - wp_register_style( - 'wpcom-layout-grid-front', - plugins_url( 'front.css', __FILE__ ), - [], // no dependencies - filemtime( plugin_dir_path( __FILE__ ) . 'front.css' ) - ); -} ); diff --git a/blocks/layout-grid/src/__tests__/__image_snapshots__/four-column-desktop-snap.png b/blocks/layout-grid/src/__tests__/__image_snapshots__/four-column-desktop-snap.png index 76288c62..1b6e6919 100644 Binary files a/blocks/layout-grid/src/__tests__/__image_snapshots__/four-column-desktop-snap.png and b/blocks/layout-grid/src/__tests__/__image_snapshots__/four-column-desktop-snap.png differ diff --git a/blocks/layout-grid/src/__tests__/__image_snapshots__/four-column-mobile-snap.png b/blocks/layout-grid/src/__tests__/__image_snapshots__/four-column-mobile-snap.png index 4e94b7dc..11f0815f 100644 Binary files a/blocks/layout-grid/src/__tests__/__image_snapshots__/four-column-mobile-snap.png and b/blocks/layout-grid/src/__tests__/__image_snapshots__/four-column-mobile-snap.png differ diff --git a/blocks/layout-grid/src/__tests__/__image_snapshots__/four-column-tablet-snap.png b/blocks/layout-grid/src/__tests__/__image_snapshots__/four-column-tablet-snap.png index 94ff15e7..bf4ec2aa 100644 Binary files a/blocks/layout-grid/src/__tests__/__image_snapshots__/four-column-tablet-snap.png and b/blocks/layout-grid/src/__tests__/__image_snapshots__/four-column-tablet-snap.png differ diff --git a/blocks/layout-grid/src/__tests__/__image_snapshots__/three-column-desktop-snap.png b/blocks/layout-grid/src/__tests__/__image_snapshots__/three-column-desktop-snap.png index c1f4839a..334a2366 100644 Binary files a/blocks/layout-grid/src/__tests__/__image_snapshots__/three-column-desktop-snap.png and b/blocks/layout-grid/src/__tests__/__image_snapshots__/three-column-desktop-snap.png differ diff --git a/blocks/layout-grid/src/__tests__/__image_snapshots__/three-column-mobile-snap.png b/blocks/layout-grid/src/__tests__/__image_snapshots__/three-column-mobile-snap.png index 5f339718..b34f6f48 100644 Binary files a/blocks/layout-grid/src/__tests__/__image_snapshots__/three-column-mobile-snap.png and b/blocks/layout-grid/src/__tests__/__image_snapshots__/three-column-mobile-snap.png differ diff --git a/blocks/layout-grid/src/__tests__/__image_snapshots__/three-column-tablet-snap.png b/blocks/layout-grid/src/__tests__/__image_snapshots__/three-column-tablet-snap.png index 475ba079..5537ea23 100644 Binary files a/blocks/layout-grid/src/__tests__/__image_snapshots__/three-column-tablet-snap.png and b/blocks/layout-grid/src/__tests__/__image_snapshots__/three-column-tablet-snap.png differ diff --git a/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-custom-background-mobile-snap.png b/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-custom-background-mobile-snap.png index b35f372d..b925622a 100644 Binary files a/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-custom-background-mobile-snap.png and b/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-custom-background-mobile-snap.png differ diff --git a/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-custom-background-tablet-snap.png b/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-custom-background-tablet-snap.png index 529f8f3b..03d45256 100644 Binary files a/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-custom-background-tablet-snap.png and b/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-custom-background-tablet-snap.png differ diff --git a/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-mobile-snap.png b/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-mobile-snap.png index 8513ba2e..0d5611dc 100644 Binary files a/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-mobile-snap.png and b/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-mobile-snap.png differ diff --git a/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-no-gutters-desktop-snap.png b/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-no-gutters-desktop-snap.png index 1dd4df63..8cd30d13 100644 Binary files a/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-no-gutters-desktop-snap.png and b/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-no-gutters-desktop-snap.png differ diff --git a/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-no-gutters-mobile-snap.png b/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-no-gutters-mobile-snap.png index 3943ee8c..ec42d850 100644 Binary files a/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-no-gutters-mobile-snap.png and b/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-no-gutters-mobile-snap.png differ diff --git a/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-no-gutters-tablet-snap.png b/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-no-gutters-tablet-snap.png index 3010d0bc..b8ff6bbb 100644 Binary files a/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-no-gutters-tablet-snap.png and b/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-no-gutters-tablet-snap.png differ diff --git a/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-tablet-snap.png b/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-tablet-snap.png index 334e6606..e742c391 100644 Binary files a/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-tablet-snap.png and b/blocks/layout-grid/src/__tests__/__image_snapshots__/two-column-tablet-snap.png differ diff --git a/blocks/layout-grid/src/grid-overlay.scss b/blocks/layout-grid/src/grid-overlay.scss index 28323ef0..0ad89d1b 100644 --- a/blocks/layout-grid/src/grid-overlay.scss +++ b/blocks/layout-grid/src/grid-overlay.scss @@ -74,7 +74,7 @@ ($grid-gutter-medium / 2) 0 0 0 currentColor; } } - + // Huge gutter. .wp-block-jetpack-layout-gutter__huge & { .is-selected & { diff --git a/blocks/layout-grid/src/grid-resize.scss b/blocks/layout-grid/src/grid-resize.scss index ebbc6de9..4f461d11 100644 --- a/blocks/layout-grid/src/grid-resize.scss +++ b/blocks/layout-grid/src/grid-resize.scss @@ -4,7 +4,7 @@ * Resize grid overlay */ -.wp-block-jetpack-layout-grid .wpcom-resize-grid { +.wp-block-jetpack-layout-grid-editor .wpcom-resize-grid { user-select: none; position: absolute; top: 0; @@ -19,19 +19,19 @@ } } -.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__none .wpcom-resize-grid:not(.wpcom-resize-grid__resizing) { +.wp-block-jetpack-layout-grid-editor.wp-block-jetpack-layout-gutter__none .wpcom-resize-grid:not(.wpcom-resize-grid__resizing) { grid-gap: $grid-gutter-none; } -.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__small .wpcom-resize-grid:not(.wpcom-resize-grid__resizing) { +.wp-block-jetpack-layout-grid-editor.wp-block-jetpack-layout-gutter__small .wpcom-resize-grid:not(.wpcom-resize-grid__resizing) { grid-gap: $grid-gutter-small; } -.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__medium .wpcom-resize-grid:not(.wpcom-resize-grid__resizing) { +.wp-block-jetpack-layout-grid-editor.wp-block-jetpack-layout-gutter__medium .wpcom-resize-grid:not(.wpcom-resize-grid__resizing) { grid-gap: $grid-gutter-medium; } -.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__huge .wpcom-resize-grid:not(.wpcom-resize-grid__resizing) { +.wp-block-jetpack-layout-grid-editor.wp-block-jetpack-layout-gutter__huge .wpcom-resize-grid:not(.wpcom-resize-grid__resizing) { grid-gap: $grid-gutter-huge; } diff --git a/blocks/layout-grid/src/grid.scss b/blocks/layout-grid/src/grid.scss index 5ab95832..d13077c9 100644 --- a/blocks/layout-grid/src/grid.scss +++ b/blocks/layout-grid/src/grid.scss @@ -5,7 +5,7 @@ */ // Output editor specific styles. -.wp-block-jetpack-layout-grid > .block-editor-inner-blocks > .block-editor-block-list__layout { +.wp-block-jetpack-layout-grid-editor > .block-editor-inner-blocks > .block-editor-block-list__layout { display: grid; grid-gap: 24px; grid-template-columns: $grid-desktop; @@ -32,24 +32,24 @@ overflow-wrap: break-word; // New standard. } -.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__none > .block-editor-inner-blocks > .block-editor-block-list__layout { +.wp-block-jetpack-layout-grid-editor.wp-block-jetpack-layout-gutter__none > .block-editor-inner-blocks > .block-editor-block-list__layout { grid-gap: $grid-gutter-none; } -.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__small > .block-editor-inner-blocks > .block-editor-block-list__layout { +.wp-block-jetpack-layout-grid-editor.wp-block-jetpack-layout-gutter__small > .block-editor-inner-blocks > .block-editor-block-list__layout { grid-gap: $grid-gutter-small; } -.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__medium > .block-editor-inner-blocks > .block-editor-block-list__layout { +.wp-block-jetpack-layout-grid-editor.wp-block-jetpack-layout-gutter__medium > .block-editor-inner-blocks > .block-editor-block-list__layout { grid-gap: $grid-gutter-medium; } -.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__huge > .block-editor-inner-blocks > .block-editor-block-list__layout { +.wp-block-jetpack-layout-grid-editor.wp-block-jetpack-layout-gutter__huge > .block-editor-inner-blocks > .block-editor-block-list__layout { grid-gap: $grid-gutter-huge; } // Editor grid styles -.wp-block-jetpack-layout-grid { +.wp-block-jetpack-layout-grid-editor { // These three rules are only necessary for Safari. // Safari interprets percentages in CSS grid differently. // Flex causes children to "stretch", fixing that interpretation. @@ -92,7 +92,7 @@ * Presets for tablet and mobile - switch the number of columns and layout */ -.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-tablet { +.wp-block-jetpack-layout-grid-editor.wp-block-jetpack-layout-tablet { .wpcom-overlay-grid, .wpcom-resize-grid, > .block-editor-inner-blocks > .block-editor-block-list__layout { @@ -100,7 +100,7 @@ } } -.wp-block-jetpack-layout-grid.wp-block-jetpack-layout-mobile { +.wp-block-jetpack-layout-grid-editor.wp-block-jetpack-layout-mobile { .wpcom-overlay-grid, .wpcom-resize-grid, > .block-editor-inner-blocks > .block-editor-block-list__layout { diff --git a/blocks/layout-grid/src/grid/edit.js b/blocks/layout-grid/src/grid/edit.js index c537db0b..fd99ba56 100644 --- a/blocks/layout-grid/src/grid/edit.js +++ b/blocks/layout-grid/src/grid/edit.js @@ -242,7 +242,6 @@ class Edit extends Component { setAttributes, updateAlignment, columnAttributes, - previewDeviceType, } = this.props; const { viewPort } = this.state; const previewMode = this.getPreviewMode(); @@ -256,7 +255,11 @@ class Edit extends Component { const { gutterSize, addGutterEnds, verticalAlignment } = attributes; const layoutGrid = new LayoutGrid( attributes, previewMode, columns ); const classes = classnames( - removeGridClasses( className ), + removeGridClasses( className ).replace( + 'layout-grid', + 'layout-grid-editor' + ), + 'wp-block-jetpack-editor', extra, { 'wp-block-jetpack-layout-tablet': previewMode === 'Tablet', diff --git a/blocks/layout-grid/style.scss b/blocks/layout-grid/style.scss index 81dce971..6addb3ab 100644 --- a/blocks/layout-grid/style.scss +++ b/blocks/layout-grid/style.scss @@ -197,3 +197,128 @@ align-self: flex-end; } } + + +/** + * Responsive Grid Options. Exclude these from the editor. + */ + +/* autoprefixer grid: no-autoplace */ +.wp-block-jetpack-layout-grid { + display: grid; + grid-gap: $grid-gutter; + grid-template-columns: $grid-mobile; + + // Grid rules. + // Mobile first. + @for $i from 1 through 12 { + @for $x from 1 through 4 { + &.column#{ $x }-mobile-grid__start-#{ $i } > .wp-block-jetpack-layout-grid-column:nth-child(#{ $x }) { + grid-column-start: $i; + } + } + } + + @for $i from 1 through 12 { + @for $x from 1 through 4 { + &.column#{ $x }-mobile-grid__span-#{ $i } > .wp-block-jetpack-layout-grid-column:nth-child(#{ $x }) { + grid-column-end: span $i; // Set it to span $i columns, regardless of starting position. + } + } + } + + @for $i from 1 through 4 { + @for $x from 1 through 4 { + &.column#{ $x }-mobile-grid__row-#{ $i } > .wp-block-jetpack-layout-grid-column:nth-child(#{ $x }) { + grid-row-start: $i; + } + } + } + + // Tablet grid rules. + @media (min-width: #{ ($break-small) }) { + + grid-template-columns: $grid-tablet; + + @for $i from 1 through 12 { + @for $x from 1 through 4 { + &.column#{ $x }-tablet-grid__start-#{ $i } > .wp-block-jetpack-layout-grid-column:nth-child(#{ $x }) { + grid-column-start: $i; + } + } + } + + @for $i from 1 through 12 { + @for $x from 1 through 4 { + &.column#{ $x }-tablet-grid__span-#{ $i } > .wp-block-jetpack-layout-grid-column:nth-child(#{ $x }) { + grid-column-end: span $i; // Set it to span $i columns, regardless of starting position. + } + } + } + + @for $i from 1 through 4 { + @for $x from 1 through 4 { + &.column#{ $x }-tablet-grid__row-#{ $i } > .wp-block-jetpack-layout-grid-column:nth-child(#{ $x }) { + grid-row-start: $i; + } + } + } + } + + + // Desktop grid rules. + @media (min-width: #{ ($break-xlarge) }) { + grid-template-columns: $grid-desktop; + + @for $i from 1 through 12 { + @for $x from 1 through 4 { + &.column#{ $x }-desktop-grid__start-#{ $i } > .wp-block-jetpack-layout-grid-column:nth-child(#{ $x }) { + grid-column-start: $i; + } + } + } + + @for $i from 1 through 12 { + @for $x from 1 through 4 { + &.column#{ $x }-desktop-grid__span-#{ $i } > .wp-block-jetpack-layout-grid-column:nth-child(#{ $x }) { + grid-column-end: span $i; // Set it to span $i columns, regardless of starting position. + } + } + } + + @for $i from 1 through 4 { + @for $x from 1 through 4 { + &.column#{ $x }-desktop-grid__row-#{ $i } > .wp-block-jetpack-layout-grid-column:nth-child(#{ $x }) { + grid-row-start: $i; + } + } + } + } + + // Ensure long lines wrap in themes that don't already enforce this + .wp-block-jetpack-layout-grid-column * { + word-break: break-word; + word-wrap: break-word; + } + + &.wp-block-jetpack-layout-gutter__none { + grid-gap: $grid-gutter-none; + } + + &.wp-block-jetpack-layout-gutter__small { + grid-gap: $grid-gutter-small; + } + + &.wp-block-jetpack-layout-gutter__medium { + grid-gap: $grid-gutter-medium; + } + + &.wp-block-jetpack-layout-gutter__huge { + grid-gap: $grid-gutter-huge; + } +} + +// Ensure inner blocks with deliberate overflows are still constrained to column. +.wp-block-jetpack-layout-grid-column { + max-width: 100%; +} diff --git a/blocks/layout-grid/tests/tools/block.js b/blocks/layout-grid/tests/tools/block.js index 7ff85130..d2207d30 100644 --- a/blocks/layout-grid/tests/tools/block.js +++ b/blocks/layout-grid/tests/tools/block.js @@ -7,7 +7,6 @@ import fs from 'fs'; /** * Internal dependencies */ -import '../../front.css'; import './style.css'; // TODO: it would be better if we could generate scss => css directly here diff --git a/blocks/layout-grid/tests/tools/style.css b/blocks/layout-grid/tests/tools/style.css index 61952da4..a5e079aa 100644 --- a/blocks/layout-grid/tests/tools/style.css +++ b/blocks/layout-grid/tests/tools/style.css @@ -110,3 +110,704 @@ .wp-block-jetpack-layout-grid-column.is-vertically-aligned-bottom { align-self: flex-end; } + +/** + * Responsive Grid Options. Exclude these from the editor. + */ +/* autoprefixer grid: no-autoplace */ +.wp-block-jetpack-layout-grid { + display: grid; + grid-gap: 24px; + grid-template-columns: repeat(4, 1fr); } + .wp-block-jetpack-layout-grid.column1-mobile-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-start: 1; } + .wp-block-jetpack-layout-grid.column2-mobile-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-start: 1; } + .wp-block-jetpack-layout-grid.column3-mobile-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-start: 1; } + .wp-block-jetpack-layout-grid.column4-mobile-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-start: 1; } + .wp-block-jetpack-layout-grid.column1-mobile-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-start: 2; } + .wp-block-jetpack-layout-grid.column2-mobile-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-start: 2; } + .wp-block-jetpack-layout-grid.column3-mobile-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-start: 2; } + .wp-block-jetpack-layout-grid.column4-mobile-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-start: 2; } + .wp-block-jetpack-layout-grid.column1-mobile-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-start: 3; } + .wp-block-jetpack-layout-grid.column2-mobile-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-start: 3; } + .wp-block-jetpack-layout-grid.column3-mobile-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-start: 3; } + .wp-block-jetpack-layout-grid.column4-mobile-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-start: 3; } + .wp-block-jetpack-layout-grid.column1-mobile-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-start: 4; } + .wp-block-jetpack-layout-grid.column2-mobile-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-start: 4; } + .wp-block-jetpack-layout-grid.column3-mobile-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-start: 4; } + .wp-block-jetpack-layout-grid.column4-mobile-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-start: 4; } + .wp-block-jetpack-layout-grid.column1-mobile-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-start: 5; } + .wp-block-jetpack-layout-grid.column2-mobile-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-start: 5; } + .wp-block-jetpack-layout-grid.column3-mobile-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-start: 5; } + .wp-block-jetpack-layout-grid.column4-mobile-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-start: 5; } + .wp-block-jetpack-layout-grid.column1-mobile-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-start: 6; } + .wp-block-jetpack-layout-grid.column2-mobile-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-start: 6; } + .wp-block-jetpack-layout-grid.column3-mobile-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-start: 6; } + .wp-block-jetpack-layout-grid.column4-mobile-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-start: 6; } + .wp-block-jetpack-layout-grid.column1-mobile-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-start: 7; } + .wp-block-jetpack-layout-grid.column2-mobile-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-start: 7; } + .wp-block-jetpack-layout-grid.column3-mobile-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-start: 7; } + .wp-block-jetpack-layout-grid.column4-mobile-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-start: 7; } + .wp-block-jetpack-layout-grid.column1-mobile-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-start: 8; } + .wp-block-jetpack-layout-grid.column2-mobile-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-start: 8; } + .wp-block-jetpack-layout-grid.column3-mobile-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-start: 8; } + .wp-block-jetpack-layout-grid.column4-mobile-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-start: 8; } + .wp-block-jetpack-layout-grid.column1-mobile-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-start: 9; } + .wp-block-jetpack-layout-grid.column2-mobile-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-start: 9; } + .wp-block-jetpack-layout-grid.column3-mobile-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-start: 9; } + .wp-block-jetpack-layout-grid.column4-mobile-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-start: 9; } + .wp-block-jetpack-layout-grid.column1-mobile-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-start: 10; } + .wp-block-jetpack-layout-grid.column2-mobile-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-start: 10; } + .wp-block-jetpack-layout-grid.column3-mobile-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-start: 10; } + .wp-block-jetpack-layout-grid.column4-mobile-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-start: 10; } + .wp-block-jetpack-layout-grid.column1-mobile-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-start: 11; } + .wp-block-jetpack-layout-grid.column2-mobile-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-start: 11; } + .wp-block-jetpack-layout-grid.column3-mobile-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-start: 11; } + .wp-block-jetpack-layout-grid.column4-mobile-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-start: 11; } + .wp-block-jetpack-layout-grid.column1-mobile-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-start: 12; } + .wp-block-jetpack-layout-grid.column2-mobile-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-start: 12; } + .wp-block-jetpack-layout-grid.column3-mobile-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-start: 12; } + .wp-block-jetpack-layout-grid.column4-mobile-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-start: 12; } + .wp-block-jetpack-layout-grid.column1-mobile-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-end: span 1; } + .wp-block-jetpack-layout-grid.column2-mobile-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-end: span 1; } + .wp-block-jetpack-layout-grid.column3-mobile-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-end: span 1; } + .wp-block-jetpack-layout-grid.column4-mobile-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-end: span 1; } + .wp-block-jetpack-layout-grid.column1-mobile-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-end: span 2; } + .wp-block-jetpack-layout-grid.column2-mobile-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-end: span 2; } + .wp-block-jetpack-layout-grid.column3-mobile-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-end: span 2; } + .wp-block-jetpack-layout-grid.column4-mobile-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-end: span 2; } + .wp-block-jetpack-layout-grid.column1-mobile-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-end: span 3; } + .wp-block-jetpack-layout-grid.column2-mobile-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-end: span 3; } + .wp-block-jetpack-layout-grid.column3-mobile-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-end: span 3; } + .wp-block-jetpack-layout-grid.column4-mobile-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-end: span 3; } + .wp-block-jetpack-layout-grid.column1-mobile-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-end: span 4; } + .wp-block-jetpack-layout-grid.column2-mobile-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-end: span 4; } + .wp-block-jetpack-layout-grid.column3-mobile-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-end: span 4; } + .wp-block-jetpack-layout-grid.column4-mobile-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-end: span 4; } + .wp-block-jetpack-layout-grid.column1-mobile-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-end: span 5; } + .wp-block-jetpack-layout-grid.column2-mobile-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-end: span 5; } + .wp-block-jetpack-layout-grid.column3-mobile-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-end: span 5; } + .wp-block-jetpack-layout-grid.column4-mobile-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-end: span 5; } + .wp-block-jetpack-layout-grid.column1-mobile-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-end: span 6; } + .wp-block-jetpack-layout-grid.column2-mobile-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-end: span 6; } + .wp-block-jetpack-layout-grid.column3-mobile-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-end: span 6; } + .wp-block-jetpack-layout-grid.column4-mobile-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-end: span 6; } + .wp-block-jetpack-layout-grid.column1-mobile-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-end: span 7; } + .wp-block-jetpack-layout-grid.column2-mobile-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-end: span 7; } + .wp-block-jetpack-layout-grid.column3-mobile-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-end: span 7; } + .wp-block-jetpack-layout-grid.column4-mobile-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-end: span 7; } + .wp-block-jetpack-layout-grid.column1-mobile-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-end: span 8; } + .wp-block-jetpack-layout-grid.column2-mobile-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-end: span 8; } + .wp-block-jetpack-layout-grid.column3-mobile-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-end: span 8; } + .wp-block-jetpack-layout-grid.column4-mobile-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-end: span 8; } + .wp-block-jetpack-layout-grid.column1-mobile-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-end: span 9; } + .wp-block-jetpack-layout-grid.column2-mobile-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-end: span 9; } + .wp-block-jetpack-layout-grid.column3-mobile-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-end: span 9; } + .wp-block-jetpack-layout-grid.column4-mobile-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-end: span 9; } + .wp-block-jetpack-layout-grid.column1-mobile-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-end: span 10; } + .wp-block-jetpack-layout-grid.column2-mobile-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-end: span 10; } + .wp-block-jetpack-layout-grid.column3-mobile-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-end: span 10; } + .wp-block-jetpack-layout-grid.column4-mobile-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-end: span 10; } + .wp-block-jetpack-layout-grid.column1-mobile-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-end: span 11; } + .wp-block-jetpack-layout-grid.column2-mobile-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-end: span 11; } + .wp-block-jetpack-layout-grid.column3-mobile-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-end: span 11; } + .wp-block-jetpack-layout-grid.column4-mobile-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-end: span 11; } + .wp-block-jetpack-layout-grid.column1-mobile-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-end: span 12; } + .wp-block-jetpack-layout-grid.column2-mobile-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-end: span 12; } + .wp-block-jetpack-layout-grid.column3-mobile-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-end: span 12; } + .wp-block-jetpack-layout-grid.column4-mobile-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-end: span 12; } + .wp-block-jetpack-layout-grid.column1-mobile-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-row-start: 1; } + .wp-block-jetpack-layout-grid.column2-mobile-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-row-start: 1; } + .wp-block-jetpack-layout-grid.column3-mobile-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-row-start: 1; } + .wp-block-jetpack-layout-grid.column4-mobile-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-row-start: 1; } + .wp-block-jetpack-layout-grid.column1-mobile-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-row-start: 2; } + .wp-block-jetpack-layout-grid.column2-mobile-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-row-start: 2; } + .wp-block-jetpack-layout-grid.column3-mobile-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-row-start: 2; } + .wp-block-jetpack-layout-grid.column4-mobile-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-row-start: 2; } + .wp-block-jetpack-layout-grid.column1-mobile-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-row-start: 3; } + .wp-block-jetpack-layout-grid.column2-mobile-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-row-start: 3; } + .wp-block-jetpack-layout-grid.column3-mobile-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-row-start: 3; } + .wp-block-jetpack-layout-grid.column4-mobile-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-row-start: 3; } + .wp-block-jetpack-layout-grid.column1-mobile-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-row-start: 4; } + .wp-block-jetpack-layout-grid.column2-mobile-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-row-start: 4; } + .wp-block-jetpack-layout-grid.column3-mobile-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-row-start: 4; } + .wp-block-jetpack-layout-grid.column4-mobile-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-row-start: 4; } + @media (min-width: 600px) { + .wp-block-jetpack-layout-grid { + grid-template-columns: repeat(8, 1fr); } + .wp-block-jetpack-layout-grid.column1-tablet-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-start: 1; } + .wp-block-jetpack-layout-grid.column2-tablet-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-start: 1; } + .wp-block-jetpack-layout-grid.column3-tablet-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-start: 1; } + .wp-block-jetpack-layout-grid.column4-tablet-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-start: 1; } + .wp-block-jetpack-layout-grid.column1-tablet-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-start: 2; } + .wp-block-jetpack-layout-grid.column2-tablet-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-start: 2; } + .wp-block-jetpack-layout-grid.column3-tablet-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-start: 2; } + .wp-block-jetpack-layout-grid.column4-tablet-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-start: 2; } + .wp-block-jetpack-layout-grid.column1-tablet-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-start: 3; } + .wp-block-jetpack-layout-grid.column2-tablet-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-start: 3; } + .wp-block-jetpack-layout-grid.column3-tablet-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-start: 3; } + .wp-block-jetpack-layout-grid.column4-tablet-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-start: 3; } + .wp-block-jetpack-layout-grid.column1-tablet-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-start: 4; } + .wp-block-jetpack-layout-grid.column2-tablet-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-start: 4; } + .wp-block-jetpack-layout-grid.column3-tablet-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-start: 4; } + .wp-block-jetpack-layout-grid.column4-tablet-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-start: 4; } + .wp-block-jetpack-layout-grid.column1-tablet-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-start: 5; } + .wp-block-jetpack-layout-grid.column2-tablet-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-start: 5; } + .wp-block-jetpack-layout-grid.column3-tablet-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-start: 5; } + .wp-block-jetpack-layout-grid.column4-tablet-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-start: 5; } + .wp-block-jetpack-layout-grid.column1-tablet-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-start: 6; } + .wp-block-jetpack-layout-grid.column2-tablet-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-start: 6; } + .wp-block-jetpack-layout-grid.column3-tablet-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-start: 6; } + .wp-block-jetpack-layout-grid.column4-tablet-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-start: 6; } + .wp-block-jetpack-layout-grid.column1-tablet-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-start: 7; } + .wp-block-jetpack-layout-grid.column2-tablet-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-start: 7; } + .wp-block-jetpack-layout-grid.column3-tablet-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-start: 7; } + .wp-block-jetpack-layout-grid.column4-tablet-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-start: 7; } + .wp-block-jetpack-layout-grid.column1-tablet-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-start: 8; } + .wp-block-jetpack-layout-grid.column2-tablet-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-start: 8; } + .wp-block-jetpack-layout-grid.column3-tablet-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-start: 8; } + .wp-block-jetpack-layout-grid.column4-tablet-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-start: 8; } + .wp-block-jetpack-layout-grid.column1-tablet-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-start: 9; } + .wp-block-jetpack-layout-grid.column2-tablet-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-start: 9; } + .wp-block-jetpack-layout-grid.column3-tablet-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-start: 9; } + .wp-block-jetpack-layout-grid.column4-tablet-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-start: 9; } + .wp-block-jetpack-layout-grid.column1-tablet-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-start: 10; } + .wp-block-jetpack-layout-grid.column2-tablet-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-start: 10; } + .wp-block-jetpack-layout-grid.column3-tablet-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-start: 10; } + .wp-block-jetpack-layout-grid.column4-tablet-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-start: 10; } + .wp-block-jetpack-layout-grid.column1-tablet-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-start: 11; } + .wp-block-jetpack-layout-grid.column2-tablet-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-start: 11; } + .wp-block-jetpack-layout-grid.column3-tablet-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-start: 11; } + .wp-block-jetpack-layout-grid.column4-tablet-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-start: 11; } + .wp-block-jetpack-layout-grid.column1-tablet-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-start: 12; } + .wp-block-jetpack-layout-grid.column2-tablet-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-start: 12; } + .wp-block-jetpack-layout-grid.column3-tablet-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-start: 12; } + .wp-block-jetpack-layout-grid.column4-tablet-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-start: 12; } + .wp-block-jetpack-layout-grid.column1-tablet-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-end: span 1; } + .wp-block-jetpack-layout-grid.column2-tablet-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-end: span 1; } + .wp-block-jetpack-layout-grid.column3-tablet-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-end: span 1; } + .wp-block-jetpack-layout-grid.column4-tablet-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-end: span 1; } + .wp-block-jetpack-layout-grid.column1-tablet-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-end: span 2; } + .wp-block-jetpack-layout-grid.column2-tablet-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-end: span 2; } + .wp-block-jetpack-layout-grid.column3-tablet-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-end: span 2; } + .wp-block-jetpack-layout-grid.column4-tablet-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-end: span 2; } + .wp-block-jetpack-layout-grid.column1-tablet-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-end: span 3; } + .wp-block-jetpack-layout-grid.column2-tablet-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-end: span 3; } + .wp-block-jetpack-layout-grid.column3-tablet-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-end: span 3; } + .wp-block-jetpack-layout-grid.column4-tablet-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-end: span 3; } + .wp-block-jetpack-layout-grid.column1-tablet-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-end: span 4; } + .wp-block-jetpack-layout-grid.column2-tablet-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-end: span 4; } + .wp-block-jetpack-layout-grid.column3-tablet-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-end: span 4; } + .wp-block-jetpack-layout-grid.column4-tablet-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-end: span 4; } + .wp-block-jetpack-layout-grid.column1-tablet-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-end: span 5; } + .wp-block-jetpack-layout-grid.column2-tablet-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-end: span 5; } + .wp-block-jetpack-layout-grid.column3-tablet-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-end: span 5; } + .wp-block-jetpack-layout-grid.column4-tablet-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-end: span 5; } + .wp-block-jetpack-layout-grid.column1-tablet-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-end: span 6; } + .wp-block-jetpack-layout-grid.column2-tablet-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-end: span 6; } + .wp-block-jetpack-layout-grid.column3-tablet-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-end: span 6; } + .wp-block-jetpack-layout-grid.column4-tablet-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-end: span 6; } + .wp-block-jetpack-layout-grid.column1-tablet-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-end: span 7; } + .wp-block-jetpack-layout-grid.column2-tablet-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-end: span 7; } + .wp-block-jetpack-layout-grid.column3-tablet-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-end: span 7; } + .wp-block-jetpack-layout-grid.column4-tablet-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-end: span 7; } + .wp-block-jetpack-layout-grid.column1-tablet-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-end: span 8; } + .wp-block-jetpack-layout-grid.column2-tablet-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-end: span 8; } + .wp-block-jetpack-layout-grid.column3-tablet-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-end: span 8; } + .wp-block-jetpack-layout-grid.column4-tablet-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-end: span 8; } + .wp-block-jetpack-layout-grid.column1-tablet-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-end: span 9; } + .wp-block-jetpack-layout-grid.column2-tablet-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-end: span 9; } + .wp-block-jetpack-layout-grid.column3-tablet-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-end: span 9; } + .wp-block-jetpack-layout-grid.column4-tablet-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-end: span 9; } + .wp-block-jetpack-layout-grid.column1-tablet-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-end: span 10; } + .wp-block-jetpack-layout-grid.column2-tablet-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-end: span 10; } + .wp-block-jetpack-layout-grid.column3-tablet-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-end: span 10; } + .wp-block-jetpack-layout-grid.column4-tablet-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-end: span 10; } + .wp-block-jetpack-layout-grid.column1-tablet-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-end: span 11; } + .wp-block-jetpack-layout-grid.column2-tablet-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-end: span 11; } + .wp-block-jetpack-layout-grid.column3-tablet-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-end: span 11; } + .wp-block-jetpack-layout-grid.column4-tablet-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-end: span 11; } + .wp-block-jetpack-layout-grid.column1-tablet-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-end: span 12; } + .wp-block-jetpack-layout-grid.column2-tablet-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-end: span 12; } + .wp-block-jetpack-layout-grid.column3-tablet-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-end: span 12; } + .wp-block-jetpack-layout-grid.column4-tablet-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-end: span 12; } + .wp-block-jetpack-layout-grid.column1-tablet-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-row-start: 1; } + .wp-block-jetpack-layout-grid.column2-tablet-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-row-start: 1; } + .wp-block-jetpack-layout-grid.column3-tablet-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-row-start: 1; } + .wp-block-jetpack-layout-grid.column4-tablet-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-row-start: 1; } + .wp-block-jetpack-layout-grid.column1-tablet-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-row-start: 2; } + .wp-block-jetpack-layout-grid.column2-tablet-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-row-start: 2; } + .wp-block-jetpack-layout-grid.column3-tablet-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-row-start: 2; } + .wp-block-jetpack-layout-grid.column4-tablet-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-row-start: 2; } + .wp-block-jetpack-layout-grid.column1-tablet-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-row-start: 3; } + .wp-block-jetpack-layout-grid.column2-tablet-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-row-start: 3; } + .wp-block-jetpack-layout-grid.column3-tablet-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-row-start: 3; } + .wp-block-jetpack-layout-grid.column4-tablet-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-row-start: 3; } + .wp-block-jetpack-layout-grid.column1-tablet-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-row-start: 4; } + .wp-block-jetpack-layout-grid.column2-tablet-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-row-start: 4; } + .wp-block-jetpack-layout-grid.column3-tablet-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-row-start: 4; } + .wp-block-jetpack-layout-grid.column4-tablet-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-row-start: 4; } } + @media (min-width: 1080px) { + .wp-block-jetpack-layout-grid { + grid-template-columns: repeat(12, 1fr); } + .wp-block-jetpack-layout-grid.column1-desktop-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-start: 1; } + .wp-block-jetpack-layout-grid.column2-desktop-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-start: 1; } + .wp-block-jetpack-layout-grid.column3-desktop-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-start: 1; } + .wp-block-jetpack-layout-grid.column4-desktop-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-start: 1; } + .wp-block-jetpack-layout-grid.column1-desktop-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-start: 2; } + .wp-block-jetpack-layout-grid.column2-desktop-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-start: 2; } + .wp-block-jetpack-layout-grid.column3-desktop-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-start: 2; } + .wp-block-jetpack-layout-grid.column4-desktop-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-start: 2; } + .wp-block-jetpack-layout-grid.column1-desktop-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-start: 3; } + .wp-block-jetpack-layout-grid.column2-desktop-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-start: 3; } + .wp-block-jetpack-layout-grid.column3-desktop-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-start: 3; } + .wp-block-jetpack-layout-grid.column4-desktop-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-start: 3; } + .wp-block-jetpack-layout-grid.column1-desktop-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-start: 4; } + .wp-block-jetpack-layout-grid.column2-desktop-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-start: 4; } + .wp-block-jetpack-layout-grid.column3-desktop-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-start: 4; } + .wp-block-jetpack-layout-grid.column4-desktop-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-start: 4; } + .wp-block-jetpack-layout-grid.column1-desktop-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-start: 5; } + .wp-block-jetpack-layout-grid.column2-desktop-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-start: 5; } + .wp-block-jetpack-layout-grid.column3-desktop-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-start: 5; } + .wp-block-jetpack-layout-grid.column4-desktop-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-start: 5; } + .wp-block-jetpack-layout-grid.column1-desktop-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-start: 6; } + .wp-block-jetpack-layout-grid.column2-desktop-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-start: 6; } + .wp-block-jetpack-layout-grid.column3-desktop-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-start: 6; } + .wp-block-jetpack-layout-grid.column4-desktop-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-start: 6; } + .wp-block-jetpack-layout-grid.column1-desktop-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-start: 7; } + .wp-block-jetpack-layout-grid.column2-desktop-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-start: 7; } + .wp-block-jetpack-layout-grid.column3-desktop-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-start: 7; } + .wp-block-jetpack-layout-grid.column4-desktop-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-start: 7; } + .wp-block-jetpack-layout-grid.column1-desktop-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-start: 8; } + .wp-block-jetpack-layout-grid.column2-desktop-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-start: 8; } + .wp-block-jetpack-layout-grid.column3-desktop-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-start: 8; } + .wp-block-jetpack-layout-grid.column4-desktop-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-start: 8; } + .wp-block-jetpack-layout-grid.column1-desktop-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-start: 9; } + .wp-block-jetpack-layout-grid.column2-desktop-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-start: 9; } + .wp-block-jetpack-layout-grid.column3-desktop-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-start: 9; } + .wp-block-jetpack-layout-grid.column4-desktop-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-start: 9; } + .wp-block-jetpack-layout-grid.column1-desktop-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-start: 10; } + .wp-block-jetpack-layout-grid.column2-desktop-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-start: 10; } + .wp-block-jetpack-layout-grid.column3-desktop-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-start: 10; } + .wp-block-jetpack-layout-grid.column4-desktop-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-start: 10; } + .wp-block-jetpack-layout-grid.column1-desktop-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-start: 11; } + .wp-block-jetpack-layout-grid.column2-desktop-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-start: 11; } + .wp-block-jetpack-layout-grid.column3-desktop-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-start: 11; } + .wp-block-jetpack-layout-grid.column4-desktop-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-start: 11; } + .wp-block-jetpack-layout-grid.column1-desktop-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-start: 12; } + .wp-block-jetpack-layout-grid.column2-desktop-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-start: 12; } + .wp-block-jetpack-layout-grid.column3-desktop-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-start: 12; } + .wp-block-jetpack-layout-grid.column4-desktop-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-start: 12; } + .wp-block-jetpack-layout-grid.column1-desktop-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-end: span 1; } + .wp-block-jetpack-layout-grid.column2-desktop-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-end: span 1; } + .wp-block-jetpack-layout-grid.column3-desktop-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-end: span 1; } + .wp-block-jetpack-layout-grid.column4-desktop-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-end: span 1; } + .wp-block-jetpack-layout-grid.column1-desktop-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-end: span 2; } + .wp-block-jetpack-layout-grid.column2-desktop-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-end: span 2; } + .wp-block-jetpack-layout-grid.column3-desktop-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-end: span 2; } + .wp-block-jetpack-layout-grid.column4-desktop-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-end: span 2; } + .wp-block-jetpack-layout-grid.column1-desktop-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-end: span 3; } + .wp-block-jetpack-layout-grid.column2-desktop-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-end: span 3; } + .wp-block-jetpack-layout-grid.column3-desktop-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-end: span 3; } + .wp-block-jetpack-layout-grid.column4-desktop-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-end: span 3; } + .wp-block-jetpack-layout-grid.column1-desktop-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-end: span 4; } + .wp-block-jetpack-layout-grid.column2-desktop-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-end: span 4; } + .wp-block-jetpack-layout-grid.column3-desktop-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-end: span 4; } + .wp-block-jetpack-layout-grid.column4-desktop-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-end: span 4; } + .wp-block-jetpack-layout-grid.column1-desktop-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-end: span 5; } + .wp-block-jetpack-layout-grid.column2-desktop-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-end: span 5; } + .wp-block-jetpack-layout-grid.column3-desktop-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-end: span 5; } + .wp-block-jetpack-layout-grid.column4-desktop-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-end: span 5; } + .wp-block-jetpack-layout-grid.column1-desktop-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-end: span 6; } + .wp-block-jetpack-layout-grid.column2-desktop-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-end: span 6; } + .wp-block-jetpack-layout-grid.column3-desktop-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-end: span 6; } + .wp-block-jetpack-layout-grid.column4-desktop-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-end: span 6; } + .wp-block-jetpack-layout-grid.column1-desktop-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-end: span 7; } + .wp-block-jetpack-layout-grid.column2-desktop-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-end: span 7; } + .wp-block-jetpack-layout-grid.column3-desktop-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-end: span 7; } + .wp-block-jetpack-layout-grid.column4-desktop-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-end: span 7; } + .wp-block-jetpack-layout-grid.column1-desktop-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-end: span 8; } + .wp-block-jetpack-layout-grid.column2-desktop-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-end: span 8; } + .wp-block-jetpack-layout-grid.column3-desktop-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-end: span 8; } + .wp-block-jetpack-layout-grid.column4-desktop-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-end: span 8; } + .wp-block-jetpack-layout-grid.column1-desktop-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-end: span 9; } + .wp-block-jetpack-layout-grid.column2-desktop-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-end: span 9; } + .wp-block-jetpack-layout-grid.column3-desktop-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-end: span 9; } + .wp-block-jetpack-layout-grid.column4-desktop-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-end: span 9; } + .wp-block-jetpack-layout-grid.column1-desktop-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-end: span 10; } + .wp-block-jetpack-layout-grid.column2-desktop-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-end: span 10; } + .wp-block-jetpack-layout-grid.column3-desktop-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-end: span 10; } + .wp-block-jetpack-layout-grid.column4-desktop-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-end: span 10; } + .wp-block-jetpack-layout-grid.column1-desktop-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-end: span 11; } + .wp-block-jetpack-layout-grid.column2-desktop-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-end: span 11; } + .wp-block-jetpack-layout-grid.column3-desktop-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-end: span 11; } + .wp-block-jetpack-layout-grid.column4-desktop-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-end: span 11; } + .wp-block-jetpack-layout-grid.column1-desktop-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-column-end: span 12; } + .wp-block-jetpack-layout-grid.column2-desktop-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-column-end: span 12; } + .wp-block-jetpack-layout-grid.column3-desktop-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-column-end: span 12; } + .wp-block-jetpack-layout-grid.column4-desktop-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-column-end: span 12; } + .wp-block-jetpack-layout-grid.column1-desktop-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-row-start: 1; } + .wp-block-jetpack-layout-grid.column2-desktop-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-row-start: 1; } + .wp-block-jetpack-layout-grid.column3-desktop-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-row-start: 1; } + .wp-block-jetpack-layout-grid.column4-desktop-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-row-start: 1; } + .wp-block-jetpack-layout-grid.column1-desktop-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-row-start: 2; } + .wp-block-jetpack-layout-grid.column2-desktop-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-row-start: 2; } + .wp-block-jetpack-layout-grid.column3-desktop-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-row-start: 2; } + .wp-block-jetpack-layout-grid.column4-desktop-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-row-start: 2; } + .wp-block-jetpack-layout-grid.column1-desktop-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-row-start: 3; } + .wp-block-jetpack-layout-grid.column2-desktop-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-row-start: 3; } + .wp-block-jetpack-layout-grid.column3-desktop-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-row-start: 3; } + .wp-block-jetpack-layout-grid.column4-desktop-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-row-start: 3; } + .wp-block-jetpack-layout-grid.column1-desktop-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(1) { + grid-row-start: 4; } + .wp-block-jetpack-layout-grid.column2-desktop-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(2) { + grid-row-start: 4; } + .wp-block-jetpack-layout-grid.column3-desktop-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(3) { + grid-row-start: 4; } + .wp-block-jetpack-layout-grid.column4-desktop-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + grid-row-start: 4; } } + .wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column * { + word-break: break-word; + word-wrap: break-word; } + .wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__none { + grid-gap: 0px; } + .wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__small { + grid-gap: 8px; } + .wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__medium { + grid-gap: 16px; } + .wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__huge { + grid-gap: 48px; } + +.wp-block-jetpack-layout-grid-column { + max-width: 100%; } diff --git a/package.json b/package.json index 870a58fc..d12c9a48 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,6 @@ "start": "yarn build-css && wp-scripts start & node-sass --watch editor.scss -o build & node-sass --watch style.scss -o build", "build": "wp-scripts build && yarn build-css", "build-css": "node-sass ./editor.scss -o build | postcss build/editor.css -u autoprefixer -b 'last 2 versions' -r --no-map && node-sass ./style.scss -o build | postcss build/style.css -u autoprefixer -b 'last 2 versions' -r --no-map", - "layout": "node-sass ./blocks/layout-grid/front.scss -o ./blocks/layout-grid | postcss ./blocks/layout-grid/front.css -u autoprefixer -b 'last 2 versions' -r --no-map && node-sass ./blocks/layout-grid/style.scss -o ./blocks/layout-grid/tests/tools/", "plugin": "yarn clean && node ./bundler/build", "everything": "./bundler/build/everything.sh", "bundle": "./build/bundle.sh",