/** * Legacy Jet Blocks for WordPress - Mosaic Gallery Styles * * Source: Derived from Jetpack Tiled Gallery block styles (automattic/jetpack) * Component: _inc/blocks/tiled-gallery/view.css * Copyright: (c) Automattic, Inc. and Jetpack Contributors * License: GNU General Public License v2.0 or later (GPL-2.0-or-later) * License URI: https://www.gnu.org/licenses/gpl-2.0.html * * This stylesheet restores the responsive tiled/mosaic layout, column ratios, * square/circle aspect ratios, and rounded corner presets for galleries with * the .wp-block-jetpack-tiled-gallery class without requiring Jetpack. * * Version: 1.0.0 * Maintained by: waylayer (https://juan.webmasterpersonal.com) */ :is(.wp-block-jetpack-tiled-gallery .is-style-circle, .wp-block-jetpack-tiled-gallery.is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-circle) .tiled-gallery__item img { border-radius:50%; } :is(.wp-block-jetpack-tiled-gallery .is-style-circle, .wp-block-jetpack-tiled-gallery .is-style-square, .wp-block-jetpack-tiled-gallery.is-style-circle, .wp-block-jetpack-tiled-gallery.is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-square) .tiled-gallery__row { flex-grow:1; width:100%; } :is(.wp-block-jetpack-tiled-gallery .is-style-circle, .wp-block-jetpack-tiled-gallery .is-style-square, .wp-block-jetpack-tiled-gallery.is-style-circle, .wp-block-jetpack-tiled-gallery.is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-square) .tiled-gallery__row.columns-1 .tiled-gallery__col { width:100%; } :is(.wp-block-jetpack-tiled-gallery .is-style-circle, .wp-block-jetpack-tiled-gallery .is-style-square, .wp-block-jetpack-tiled-gallery.is-style-circle, .wp-block-jetpack-tiled-gallery.is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-square) .tiled-gallery__row.columns-2 .tiled-gallery__col { width:calc(50% - 2px); } :is(.wp-block-jetpack-tiled-gallery .is-style-circle, .wp-block-jetpack-tiled-gallery .is-style-square, .wp-block-jetpack-tiled-gallery.is-style-circle, .wp-block-jetpack-tiled-gallery.is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-square) .tiled-gallery__row.columns-3 .tiled-gallery__col { width:calc(33.33333% - 2.66667px); } :is(.wp-block-jetpack-tiled-gallery .is-style-circle, .wp-block-jetpack-tiled-gallery .is-style-square, .wp-block-jetpack-tiled-gallery.is-style-circle, .wp-block-jetpack-tiled-gallery.is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-square) .tiled-gallery__row.columns-4 .tiled-gallery__col { width:calc(25% - 3px); } :is(.wp-block-jetpack-tiled-gallery .is-style-circle, .wp-block-jetpack-tiled-gallery .is-style-square, .wp-block-jetpack-tiled-gallery.is-style-circle, .wp-block-jetpack-tiled-gallery.is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-square) .tiled-gallery__row.columns-5 .tiled-gallery__col { width:calc(20% - 3.2px); } :is(.wp-block-jetpack-tiled-gallery .is-style-circle, .wp-block-jetpack-tiled-gallery .is-style-square, .wp-block-jetpack-tiled-gallery.is-style-circle, .wp-block-jetpack-tiled-gallery.is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-square) .tiled-gallery__row.columns-6 .tiled-gallery__col { width:calc(16.66667% - 3.33333px); } :is(.wp-block-jetpack-tiled-gallery .is-style-circle, .wp-block-jetpack-tiled-gallery .is-style-square, .wp-block-jetpack-tiled-gallery.is-style-circle, .wp-block-jetpack-tiled-gallery.is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-square) .tiled-gallery__row.columns-7 .tiled-gallery__col { width:calc(14.28571% - 3.42857px); } :is(.wp-block-jetpack-tiled-gallery .is-style-circle, .wp-block-jetpack-tiled-gallery .is-style-square, .wp-block-jetpack-tiled-gallery.is-style-circle, .wp-block-jetpack-tiled-gallery.is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-square) .tiled-gallery__row.columns-8 .tiled-gallery__col { width:calc(12.5% - 3.5px); } :is(.wp-block-jetpack-tiled-gallery .is-style-circle, .wp-block-jetpack-tiled-gallery .is-style-square, .wp-block-jetpack-tiled-gallery.is-style-circle, .wp-block-jetpack-tiled-gallery.is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-square) .tiled-gallery__row.columns-9 .tiled-gallery__col { width:calc(11.11111% - 3.55556px); } :is(.wp-block-jetpack-tiled-gallery .is-style-circle, .wp-block-jetpack-tiled-gallery .is-style-square, .wp-block-jetpack-tiled-gallery.is-style-circle, .wp-block-jetpack-tiled-gallery.is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-square) .tiled-gallery__row.columns-10 .tiled-gallery__col { width:calc(10% - 3.6px); } :is(.wp-block-jetpack-tiled-gallery .is-style-circle, .wp-block-jetpack-tiled-gallery .is-style-square, .wp-block-jetpack-tiled-gallery.is-style-circle, .wp-block-jetpack-tiled-gallery.is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-square) .tiled-gallery__row.columns-11 .tiled-gallery__col { width:calc(9.09091% - 3.63636px); } :is(.wp-block-jetpack-tiled-gallery .is-style-circle, .wp-block-jetpack-tiled-gallery .is-style-square, .wp-block-jetpack-tiled-gallery.is-style-circle, .wp-block-jetpack-tiled-gallery.is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-square) .tiled-gallery__row.columns-12 .tiled-gallery__col { width:calc(8.33333% - 3.66667px); } :is(.wp-block-jetpack-tiled-gallery .is-style-circle, .wp-block-jetpack-tiled-gallery .is-style-square, .wp-block-jetpack-tiled-gallery.is-style-circle, .wp-block-jetpack-tiled-gallery.is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-square) .tiled-gallery__row.columns-13 .tiled-gallery__col { width:calc(7.69231% - 3.69231px); } :is(.wp-block-jetpack-tiled-gallery .is-style-circle, .wp-block-jetpack-tiled-gallery .is-style-square, .wp-block-jetpack-tiled-gallery.is-style-circle, .wp-block-jetpack-tiled-gallery.is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-square) .tiled-gallery__row.columns-14 .tiled-gallery__col { width:calc(7.14286% - 3.71429px); } :is(.wp-block-jetpack-tiled-gallery .is-style-circle, .wp-block-jetpack-tiled-gallery .is-style-square, .wp-block-jetpack-tiled-gallery.is-style-circle, .wp-block-jetpack-tiled-gallery.is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-square) .tiled-gallery__row.columns-15 .tiled-gallery__col { width:calc(6.66667% - 3.73333px); } :is(.wp-block-jetpack-tiled-gallery .is-style-circle, .wp-block-jetpack-tiled-gallery .is-style-square, .wp-block-jetpack-tiled-gallery.is-style-circle, .wp-block-jetpack-tiled-gallery.is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-square) .tiled-gallery__row.columns-16 .tiled-gallery__col { width:calc(6.25% - 3.75px); } :is(.wp-block-jetpack-tiled-gallery .is-style-circle, .wp-block-jetpack-tiled-gallery .is-style-square, .wp-block-jetpack-tiled-gallery.is-style-circle, .wp-block-jetpack-tiled-gallery.is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-square) .tiled-gallery__row.columns-17 .tiled-gallery__col { width:calc(5.88235% - 3.76471px); } :is(.wp-block-jetpack-tiled-gallery .is-style-circle, .wp-block-jetpack-tiled-gallery .is-style-square, .wp-block-jetpack-tiled-gallery.is-style-circle, .wp-block-jetpack-tiled-gallery.is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-square) .tiled-gallery__row.columns-18 .tiled-gallery__col { width:calc(5.55556% - 3.77778px); } :is(.wp-block-jetpack-tiled-gallery .is-style-circle, .wp-block-jetpack-tiled-gallery .is-style-square, .wp-block-jetpack-tiled-gallery.is-style-circle, .wp-block-jetpack-tiled-gallery.is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-square) .tiled-gallery__row.columns-19 .tiled-gallery__col { width:calc(5.26316% - 3.78947px); } :is(.wp-block-jetpack-tiled-gallery .is-style-circle, .wp-block-jetpack-tiled-gallery .is-style-square, .wp-block-jetpack-tiled-gallery.is-style-circle, .wp-block-jetpack-tiled-gallery.is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-square) .tiled-gallery__row.columns-20 .tiled-gallery__col { width:calc(5% - 3.8px); } :is(.wp-block-jetpack-tiled-gallery .is-style-circle, .wp-block-jetpack-tiled-gallery .is-style-square, .wp-block-jetpack-tiled-gallery.is-style-circle, .wp-block-jetpack-tiled-gallery.is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-square, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-circle, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-square) .tiled-gallery__item img { aspect-ratio:1; } :is(.wp-block-jetpack-tiled-gallery .is-style-columns, .wp-block-jetpack-tiled-gallery .is-style-rectangular, .wp-block-jetpack-tiled-gallery.is-style-columns, .wp-block-jetpack-tiled-gallery.is-style-rectangular, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-columns, .wp-block-legacy-jet-blocks-mosaic-gallery .is-style-rectangular, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-columns, .wp-block-legacy-jet-blocks-mosaic-gallery.is-style-rectangular) .tiled-gallery__item { display:flex; } :is(.wp-block-jetpack-tiled-gallery, .wp-block-legacy-jet-blocks-mosaic-gallery) .has-rounded-corners-1 .tiled-gallery__item img { border-radius:1px; } :is(.wp-block-jetpack-tiled-gallery, .wp-block-legacy-jet-blocks-mosaic-gallery) .has-rounded-corners-2 .tiled-gallery__item img { border-radius:2px; } :is(.wp-block-jetpack-tiled-gallery, .wp-block-legacy-jet-blocks-mosaic-gallery) .has-rounded-corners-3 .tiled-gallery__item img { border-radius:3px; } :is(.wp-block-jetpack-tiled-gallery, .wp-block-legacy-jet-blocks-mosaic-gallery) .has-rounded-corners-4 .tiled-gallery__item img { border-radius:4px; } :is(.wp-block-jetpack-tiled-gallery, .wp-block-legacy-jet-blocks-mosaic-gallery) .has-rounded-corners-5 .tiled-gallery__item img { border-radius:5px; } :is(.wp-block-jetpack-tiled-gallery, .wp-block-legacy-jet-blocks-mosaic-gallery) .has-rounded-corners-6 .tiled-gallery__item img { border-radius:6px; } :is(.wp-block-jetpack-tiled-gallery, .wp-block-legacy-jet-blocks-mosaic-gallery) .has-rounded-corners-7 .tiled-gallery__item img { border-radius:7px; } :is(.wp-block-jetpack-tiled-gallery, .wp-block-legacy-jet-blocks-mosaic-gallery) .has-rounded-corners-8 .tiled-gallery__item img { border-radius:8px; } :is(.wp-block-jetpack-tiled-gallery, .wp-block-legacy-jet-blocks-mosaic-gallery) .has-rounded-corners-9 .tiled-gallery__item img { border-radius:9px; } :is(.wp-block-jetpack-tiled-gallery, .wp-block-legacy-jet-blocks-mosaic-gallery) .has-rounded-corners-10 .tiled-gallery__item img { border-radius:10px; } :is(.wp-block-jetpack-tiled-gallery, .wp-block-legacy-jet-blocks-mosaic-gallery) .has-rounded-corners-11 .tiled-gallery__item img { border-radius:11px; } :is(.wp-block-jetpack-tiled-gallery, .wp-block-legacy-jet-blocks-mosaic-gallery) .has-rounded-corners-12 .tiled-gallery__item img { border-radius:12px; } :is(.wp-block-jetpack-tiled-gallery, .wp-block-legacy-jet-blocks-mosaic-gallery) .has-rounded-corners-13 .tiled-gallery__item img { border-radius:13px; } :is(.wp-block-jetpack-tiled-gallery, .wp-block-legacy-jet-blocks-mosaic-gallery) .has-rounded-corners-14 .tiled-gallery__item img { border-radius:14px; } :is(.wp-block-jetpack-tiled-gallery, .wp-block-legacy-jet-blocks-mosaic-gallery) .has-rounded-corners-15 .tiled-gallery__item img { border-radius:15px; } :is(.wp-block-jetpack-tiled-gallery, .wp-block-legacy-jet-blocks-mosaic-gallery) .has-rounded-corners-16 .tiled-gallery__item img { border-radius:16px; } :is(.wp-block-jetpack-tiled-gallery, .wp-block-legacy-jet-blocks-mosaic-gallery) .has-rounded-corners-17 .tiled-gallery__item img { border-radius:17px; } :is(.wp-block-jetpack-tiled-gallery, .wp-block-legacy-jet-blocks-mosaic-gallery) .has-rounded-corners-18 .tiled-gallery__item img { border-radius:18px; } :is(.wp-block-jetpack-tiled-gallery, .wp-block-legacy-jet-blocks-mosaic-gallery) .has-rounded-corners-19 .tiled-gallery__item img { border-radius:19px; } :is(.wp-block-jetpack-tiled-gallery, .wp-block-legacy-jet-blocks-mosaic-gallery) .has-rounded-corners-20 .tiled-gallery__item img { border-radius:20px; } .tiled-gallery__gallery { display:flex; flex-wrap:wrap; padding:0; width:100%; } .tiled-gallery__row { display:flex; flex-direction:row; justify-content:center; margin:0; width:100%; } .tiled-gallery__row+.tiled-gallery__row { margin-top:4px; } .tiled-gallery__col { display:flex; flex-direction:column; justify-content:center; margin:0; } .tiled-gallery__col+.tiled-gallery__col { margin-inline-start:4px; } .tiled-gallery__item { flex-grow:1; justify-content:center; margin:0; overflow:hidden; padding:0; position:relative; } .tiled-gallery__item.filter__black-and-white { filter:grayscale(100%); } .tiled-gallery__item.filter__sepia { filter:sepia(100%); } .tiled-gallery__item.filter__1977 { position:relative; } .tiled-gallery__item.filter__1977 img { width:100%; z-index:1; } .tiled-gallery__item.filter__1977:before { z-index:2; } .tiled-gallery__item.filter__1977:after,.tiled-gallery__item.filter__1977:before { content:""; display:block; height:100%; left:0; pointer-events:none; position:absolute; top:0; width:100%; } .tiled-gallery__item.filter__1977:after { z-index:3; } .tiled-gallery__item.filter__1977 { filter:contrast(1.1) brightness(1.1) saturate(1.3); } .tiled-gallery__item.filter__1977:after { background:#f36abc4d; mix-blend-mode:screen; } .tiled-gallery__item.filter__clarendon { position:relative; } .tiled-gallery__item.filter__clarendon img { width:100%; z-index:1; } .tiled-gallery__item.filter__clarendon:before { z-index:2; } .tiled-gallery__item.filter__clarendon:after,.tiled-gallery__item.filter__clarendon:before { content:""; display:block; height:100%; left:0; pointer-events:none; position:absolute; top:0; width:100%; } .tiled-gallery__item.filter__clarendon:after { z-index:3; } .tiled-gallery__item.filter__clarendon { filter:contrast(1.2) saturate(1.35); } .tiled-gallery__item.filter__clarendon:before { background:#7fbbe333; mix-blend-mode:overlay; } .tiled-gallery__item.filter__gingham { position:relative; } .tiled-gallery__item.filter__gingham img { width:100%; z-index:1; } .tiled-gallery__item.filter__gingham:before { z-index:2; } .tiled-gallery__item.filter__gingham:after,.tiled-gallery__item.filter__gingham:before { content:""; display:block; height:100%; left:0; pointer-events:none; position:absolute; top:0; width:100%; } .tiled-gallery__item.filter__gingham:after { z-index:3; } .tiled-gallery__item.filter__gingham { filter:brightness(1.05) hue-rotate(-10deg); } .tiled-gallery__item.filter__gingham:after { background:#e6e6fa; mix-blend-mode:soft-light; } .tiled-gallery__item+.tiled-gallery__item { margin-top:4px; } .tiled-gallery__item:focus-within { box-shadow:0 0 0 2px var(--wp-admin-theme-color); overflow:visible; } .tiled-gallery__item>a,.tiled-gallery__item>a>img,.tiled-gallery__item>img { display:block; height:auto; margin:0; max-width:100%; object-fit:cover; object-position:center; padding:0; width:100%; } .is-email .tiled-gallery__gallery { display:block; } /* ========================================================================== Responsive Adaptations for Legacy Mosaic Gallery Target: .wp-block-legacy-jet-blocks-mosaic-gallery ONLY. Historical galleries (.wp-block-jetpack-tiled-gallery) are strictly NOT affected. ========================================================================== */ /* 1. Base / Desktop Rules (> 768px): Strictly preserve calculated block rows intact without wrapping. Spacing between columns is 4px (via margin-inline-start), accounting for flex proportions with flex-shrink so rows fit 100% width with 0px overflow. */ .wp-block-legacy-jet-blocks-mosaic-gallery .tiled-gallery__row { display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%; box-sizing: border-box; } .wp-block-legacy-jet-blocks-mosaic-gallery .tiled-gallery__col { flex-shrink: 1; box-sizing: border-box; min-width: 0; } .wp-block-legacy-jet-blocks-mosaic-gallery .tiled-gallery__col + .tiled-gallery__col { margin-inline-start: 4px; } /* 2. Tablet Rules (<= 768px): - Dense rows with 4 or more columns adapt to at most 3 columns per line. - Rows with 1, 2, or 3 columns remain intact side-by-side without unwanted wrapping. */ @media (max-width: 768px) { /* Dense rows with 4+ columns wrap */ .wp-block-legacy-jet-blocks-mosaic-gallery .tiled-gallery__row:has(> .tiled-gallery__col:nth-child(4)), .wp-block-legacy-jet-blocks-mosaic-gallery:is(.is-style-square, .is-style-circle) .tiled-gallery__row:is(.columns-4, .columns-5, .columns-6, .columns-7, .columns-8) { flex-wrap: wrap; gap: 4px; } .wp-block-legacy-jet-blocks-mosaic-gallery .tiled-gallery__row:has(> .tiled-gallery__col:nth-child(4)) .tiled-gallery__col + .tiled-gallery__col, .wp-block-legacy-jet-blocks-mosaic-gallery:is(.is-style-square, .is-style-circle) .tiled-gallery__row:is(.columns-4, .columns-5, .columns-6, .columns-7, .columns-8) .tiled-gallery__col + .tiled-gallery__col { margin-inline-start: 0; } .wp-block-legacy-jet-blocks-mosaic-gallery:is(.is-style-rectangular, .is-style-columns) .tiled-gallery__row:has(> .tiled-gallery__col:nth-child(4)) .tiled-gallery__col { flex: 1 1 calc(33.33333% - 2.66667px) !important; max-width: calc(50% - 2px); } .wp-block-legacy-jet-blocks-mosaic-gallery:is(.is-style-square, .is-style-circle) .tiled-gallery__row:is(.columns-4, .columns-5, .columns-6, .columns-7, .columns-8) .tiled-gallery__col { width: calc(33.33333% - 2.66667px) !important; } } /* 3. Mobile Rules (<= 480px, including 375px): - Dense rows with 3 or more columns adapt to at most 2 columns per line. - Rows with 1 or 2 columns remain intact (single column = 100%, 2 columns = 2 side-by-side). - Images avoid microscopic thumbnail compression and maintain proper aspect ratios. */ @media (max-width: 480px) { /* Rows with 3+ columns wrap to at most 2 columns */ .wp-block-legacy-jet-blocks-mosaic-gallery .tiled-gallery__row:has(> .tiled-gallery__col:nth-child(3)), .wp-block-legacy-jet-blocks-mosaic-gallery:is(.is-style-square, .is-style-circle) .tiled-gallery__row:is(.columns-3, .columns-4, .columns-5, .columns-6, .columns-7, .columns-8) { flex-wrap: wrap; gap: 4px; } .wp-block-legacy-jet-blocks-mosaic-gallery .tiled-gallery__row:has(> .tiled-gallery__col:nth-child(3)) .tiled-gallery__col + .tiled-gallery__col, .wp-block-legacy-jet-blocks-mosaic-gallery:is(.is-style-square, .is-style-circle) .tiled-gallery__row:is(.columns-3, .columns-4, .columns-5, .columns-6, .columns-7, .columns-8) .tiled-gallery__col + .tiled-gallery__col { margin-inline-start: 0; } .wp-block-legacy-jet-blocks-mosaic-gallery:is(.is-style-rectangular, .is-style-columns) .tiled-gallery__row:has(> .tiled-gallery__col:nth-child(3)) .tiled-gallery__col { flex: 1 1 calc(50% - 2px) !important; max-width: 100%; } .wp-block-legacy-jet-blocks-mosaic-gallery:is(.is-style-square, .is-style-circle) .tiled-gallery__row:is(.columns-3, .columns-4, .columns-5, .columns-6, .columns-7, .columns-8) .tiled-gallery__col { width: calc(50% - 2px) !important; } }