/** Shopify CDN: Minification failed Line 264:0 Unexpected ")" Line 623:1 Unexpected ")" Line 898:1 Unexpected ")" Line 998:1 Unexpected ")" Line 1002:1 Unexpected ")" **/ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~ COLLECTION UTILITIES ~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ .collection-utilities { display: grid; padding: 2rem 3vw; gap: 1.5rem; grid-template-areas: "col_menu col_menu col_menu col_menu col_menu . . . . . col_facets col_facets"; position: sticky; top: 6rem; z-index: 2; background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* ~~~ Grid areas ~~~ */ .collection-menu { grid-area: col_menu; } .facets-wrapper { grid-area: col_facets; justify-self: end; align-content: center; } /* ~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~ CUSTOM SORTING ~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~ */ .sorting-details { position: relative; } .sorting-details > summary span { flex-shrink: 0 } .sorting-details > summary svg.icon-caret { display: inline-block } .sorting-details > summary svg.icon-plus { display: none } .sorting-details > summary svg { width: 0.6rem; height: 0.5rem } .sorting-details > div { position: absolute; top: 100%; right: 0; z-index: 2; padding: 2rem 1.5rem 2rem 3.5rem; background: #ffffff; display: flex; flex-direction: column; gap: 0.5rem; min-width: max-content; box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1); border-radius: 0.8rem; border: 1px solid #dfdfdf; } .sorting-details > div span { cursor: pointer; } .sorting-details > div span:hover { text-decoration: underline; } .sorting-details > div span[aria-selected="true"] { text-decoration: underline; } @media (max-width: 49rem) { .sorting-details { width: 100%; padding: 1rem 0; border-top: 1px solid #EEEEEE; border-bottom: 1px solid #EEEEEE; } .sorting-details > div { width: 100%; padding: 2rem 3.5rem 2rem 1.5rem; text-align: left; } .sorting-details > summary span svg.icon-caret { display: none } .sorting-details > summary span svg.icon-plus { display: inline-block } .sorting-details > summary > span { justify-content: space-between } .sorting-details > summary svg { width: 1rem; height: 1rem } } /* ~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~ COLLECTION MENU ~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~ */ .collection-menu { width: 100%; overflow: hidden; } .collection-menu-nav ul { display: flex; flex-wrap: wrap; gap: 1rem 2rem; } .collection-menu-nav ul li { flex-shrink: 0; text-align: center; border-radius: 3rem; padding: 0.5rem 1rem; display: flex; align-items: center; justify-content: center; } .collection-menu-nav ul li.current { background: var(--col-metafield-color); } @media (max-width: 60em) { .collection-menu-nav ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .collection-utilities { grid-template-areas: "col_menu" "col_facets"; } } @media (max-width: 49em) { .grid-item { margin-bottom: 3rem; } .collection-utilities:has(.collection-menu-nav) { position: sticky; top: 6rem; z-index: 2; padding: 2rem 2rem; } .collection-utilities.pinned { gap: 0; padding: 1rem 3vw; backdrop-filter: blur(10px); height: 0; } .collection-menu-nav.header-appended { padding: 1rem 3vw; } .collection-utilities.pinned .facets-wrapper { display: none; } html:has(.collection-utilities.pinned) #shopify-section-header.scrolled-past-header { background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } html:has(.collection-utilities.pinned) .header-area-logo .icon-logo-symbol { opacity: 0; } html:has(.collection-utilities.pinned) .header-area-logo .icon-logo-huge { opacity: 1; } .facets-wrapper { width: 100%; justify-self: start; } .sorting-and-count-container { flex-direction: column; align-items: start; width: 100% } .sorting-and-count-container .facet-filters { order: 1; width: 100%; } .sorting-and-count-container .facet-filters .facet-filters-field { width: 100%; justify-content: space-between; } .sorting-and-count-container .count-container { order: 2; } .product-count-text, .facet-filters-label, .facet-filters-sort { font-size: var(--font-12) } .facet-filters { padding: 2rem 0; border-top: 1px solid #EEEEEE; border-bottom: 1px solid #EEEEEE; } } #product-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 0.5rem; row-gap: 3vw; padding: 0 3vw 3vw 3vw; } @media (max-width: 49em) { #product-grid { column-gap: 1.5rem; } } #product-grid > .grid-item { grid-column: span 4 } .is-extra { max-height: calc(100% - 3.5rem); } .is-extra img { border-radius: 0.5rem; } /* ~~~ STANDARD GRID ~~~ ~~~ 3 (size: 1/3 of 12col grid each) ~~~ ~~~ 4 (size: 1/4 of 12col grid each) ~~~ ~~~ 4 (size: 1/4 of 12col grid each) ~~~ ~~~ 3 (size: 1/3 of 12col grid each) ~~~ */ /* #product-grid > li:not([data-page="1"]) { grid-column: span 4 } #product-grid > li:not([data-page="1"]):is( :nth-child(14n+1), :nth-child(14n+2), :nth-child(14n+3), :nth-child(14n+12), :nth-child(14n+13), :nth-child(14n+14) ) { grid-column: span 4 } #product-grid > li:not([data-page="1"]):is( :nth-child(14n+4), :nth-child(14n+5), :nth-child(14n+6), :nth-child(14n+7), :nth-child(14n+8), :nth-child(14n+9), :nth-child(14n+10), :nth-child(14n+11) ) { grid-column: span 3 } */ /* Apply to all pages including page 1 (when no .extra class is present) */ #product-grid > li:is( :nth-child(14n+1), :nth-child(14n+2), :nth-child(14n+3), :nth-child(14n+12), :nth-child(14n+13), :nth-child(14n+14) ) { grid-column: span 4 } #product-grid > li:is( :nth-child(14n+4), :nth-child(14n+5), :nth-child(14n+6), :nth-child(14n+7), :nth-child(14n+8), :nth-child(14n+9), :nth-child(14n+10), :nth-child(14n+11) ) { grid-column: span 3 } /* ~~~ APPENDED UL STANDARD GRID ~~~ */ .appended-ul { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 0.5rem; row-gap: 3vw; padding: 0 3vw 3vw 3vw; } @media (max-width: 49em) { .appended-ul { column-gap: 1.5rem; } } .appended-ul > li:not([data-page="1"]) { grid-column: span 4 } .appended-ul > li:not([data-page="1"]):is( :nth-child(14n+1), :nth-child(14n+2), :nth-child(14n+3), :nth-child(14n+12), :nth-child(14n+13), :nth-child(14n+14) ) { grid-column: span 4 } .appended-ul > li:not([data-page="1"]):is( :nth-child(14n+4), :nth-child(14n+5), :nth-child(14n+6), :nth-child(14n+7), :nth-child(14n+8), :nth-child(14n+9), :nth-child(14n+10), :nth-child(14n+11) ) { grid-column: span 3 } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* - IF ONLY 1 ITEM HAS EXTRA (cases: 1st, 3rd, 10th) - overall nth-child number grows by 1 (:nth-child(15n+x)) because of the extra item - What the selector says: ~~~ :has(.extra:nth-child(X)) ~~~ Specifies that the #product-grid element must contain at least one .extra element, and that element must either be: X = 1st OR X = 3rd OR X = 10th ~~~ :not(:has(.extra:nth-of-type(n + Y))) ~~~ Specifies that the #product-grid element cannot contain any .extra elements beyond Y. This ensures that there is exactly one .extra element, and it's the Y-th of its type within #product-grid. Also, Y grows by 1 because of the extra item, so Y must be larger than X (by at least 1). */ /* X = 1. tested: OK LAYOUT ~~~ 1 (size: 1/3 of 12col grid) - 1 (size: 2/3 of 12col grid) ~~~ ~~~ 3 (size: 1/3 of 12col grid each) ~~~ ~~~ 4 (size: 1/4 of 12col grid each) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 4 (size: 1/4 of 12col grid each) ~~~ */ #product-grid:has(.extra:nth-child(1)):not(:has(.extra:nth-of-type(n + 2))) > li[data-page="1"].extra:is(:nth-child(15n+1)) { grid-column: span 4 } #product-grid:has(.extra:nth-child(1)):not(:has(.extra:nth-of-type(n + 2))) > li[data-page="1"].is-extra:is(:nth-child(15n+2)) { grid-column: span 8 } #product-grid:has(.extra:nth-child(1)):not(:has(.extra:nth-of-type(n + 2))) > li[data-page="1"]:is( :nth-child(15n+3), :nth-child(15n+4), :nth-child(15n+5), :nth-child(15n+6), :nth-child(15n+10), :nth-child(15n+11), :nth-child(15n+12) ) { grid-column: span 4 } #product-grid:has(.extra:nth-child(1)):not(:has(.extra:nth-of-type(n + 2))) > li[data-page="1"]:is( :nth-child(15n+10), :nth-child(15n+11) ) { grid-column: span 6 } #product-grid:has(.extra:nth-child(1)):not(:has(.extra:nth-of-type(n + 2))) > li[data-page="1"]:is( :nth-child(15n+6), :nth-child(15n+7), :nth-child(15n+8), :nth-child(15n+9), :nth-child(15n+12), :nth-child(15n+13), :nth-child(15n+14), :nth-child(15n+15) ) { grid-column: span 3 } /* X = 3. tested: OK LAYOUT ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 1 (size: 1/3 of 12col grid) - 1 (size: 2/3 of 12col grid) ~~~ ~~~ 4 (size: 1/4 of 12col grid each) ~~~ ~~~ 3 (size: 1/3 of 12col grid each) ~~~ ~~~ 4 (size: 1/4 of 12col grid each) ~~~ */ #product-grid:has(.extra:nth-child(3)):not(:has(.extra:nth-of-type(n + 4))) > li[data-page="1"].extra:is(:nth-child(15n+3)) { grid-column: span 4 } #product-grid:has(.extra:nth-child(3)):not(:has(.extra:nth-of-type(n + 4))) > li[data-page="1"].is-extra:is(:nth-child(15n+4)) { grid-column: span 8 } #product-grid:has(.extra:nth-child(3)):not(:has(.extra:nth-of-type(n + 4))) > li[data-page="1"]:is( :nth-child(15n+5), :nth-child(15n+6), :nth-child(15n+7), :nth-child(15n+8), :nth-child(15n+12), :nth-child(15n+13), :nth-child(15n+14), :nth-child(15n+15), ) { grid-column: span 3 } #product-grid:has(.extra:nth-child(3)):not(:has(.extra:nth-of-type(n + 4))) > li[data-page="1"]:is( :nth-child(15n+9), :nth-child(15n+10), :nth-child(15n+11) ) { grid-column: span 4 } #product-grid:has(.extra:nth-child(3)):not(:has(.extra:nth-of-type(n + 4))) > li[data-page="1"]:is( :nth-child(15n+1), :nth-child(15n+2) ) { grid-column: span 6 } /* X = 10. tested: OK LAYOUT ~~~ 3 (size: 1/3 of 12col grid each) ~~~ ~~~ 4 (size: 1/4 of 12col grid each) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 1 (size: 1/3 of 12col grid) - 1 (size: 2/3 of 12col grid) ~~~ ~~~ 4 (size: 1/4 of 12col grid each) ~~~ */ #product-grid:has(.extra:nth-child(10)):not(:has(.extra:nth-of-type(n + 11))) > li[data-page="1"].extra:is(:nth-child(15n+10)) { grid-column: span 4 } #product-grid:has(.extra:nth-child(10)):not(:has(.extra:nth-of-type(n + 11))) > li[data-page="1"].is-extra:is(:nth-child(15n+11)) { grid-column: span 8 } #product-grid:has(.extra:nth-child(10)):not(:has(.extra:nth-of-type(n + 11))) > li[data-page="1"]:is( :nth-child(15n+1), :nth-child(15n+2), :nth-child(15n+3) ) { grid-column: span 4 } #product-grid:has(.extra:nth-child(10)):not(:has(.extra:nth-of-type(n + 11))) > li[data-page="1"]:is( :nth-child(15n+4), :nth-child(15n+5), :nth-child(15n+6), :nth-child(15n+7), :nth-child(15n+12), :nth-child(15n+13), :nth-child(15n+14), :nth-child(15n+15) ) { grid-column: span 3 } #product-grid:has(.extra:nth-child(10)):not(:has(.extra:nth-of-type(n + 11))) > li[data-page="1"]:is( :nth-child(15n+8), :nth-child(15n+9) ) { grid-column: span 6 } /* - IF ONLY 2 ITEMS HAVE EXTRA (cases: 1st + 3rd, 1st + 10th, 3rd + 10th) - overall nth-child number grows by 2 (:nth-child(16n+x)) because of the extra items - What the selector says: ~~~ :has(.extra:nth-child(X)):has(.extra:nth-child(Y)) ~~~ Chained :has() -> ensures that that the #product-grid element must contain: - at least one .extra element that is the X-th child among its siblings - at least one .extra element that is the Y-th child among its siblings These combinations must either be: X = 1st and Y = 3rd OR X = 1st and Y = 10th OR X = 3rd and Y = 10th ~~~ :not(:has(.extra:nth-of-type(n + Z))) ~~~ Specifies that the #product-grid element cannot contain any .extra elements beyond Z. Also, Z grows by 2 because of the extra items, and Z must be larger than Y (by at least 2). */ /* X = 1 and Y = 3. tested: OK LAYOUT ~~~ 1 (size: 1/3 of 12col grid) - 1 (size: 2/3 of 12col grid) ~~~ ~~~ 2x1 size: 1/4 of 12col grid each) - 6/ ~~~ ~~~ 2x1 size: 1/4 of 12col grid each) - /2 ~~~ ~~~ 4 (size: 1/4 of 12col grid each) ~~~ ~~~ 3 (size: 1/3 of 12col grid each) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ */ #product-grid:has(.extra:nth-child(1)):has(.extra:nth-child(4)):not(:has(.extra:nth-of-type(n + 5))) > li[data-page="1"].extra:is( :nth-child(16n+1) ) { grid-column: span 4 } #product-grid:has(.extra:nth-child(1)):has(.extra:nth-child(4)):not(:has(.extra:nth-of-type(n + 5))) > li[data-page="1"].is-extra:is( :nth-child(16n+2) ) { grid-column: span 8 } #product-grid:has(.extra:nth-child(1)):has(.extra:nth-child(4)):not(:has(.extra:nth-of-type(n + 5))) > li[data-page="1"]:is( :nth-child(16n+3), :nth-child(16n+4), :nth-child(16n+6), :nth-child(16n+7), :nth-child(16n+8), :nth-child(16n+9), :nth-child(16n+10), :nth-child(16n+11) ) { grid-column: span 3; } #product-grid:has(.extra:nth-child(1)):has(.extra:nth-child(4)):not(:has(.extra:nth-of-type(n + 5))) > li[data-page="1"].is-extra:is( :nth-child(16n+5) ) { grid-column: span 6; grid-row: span 2; } #product-grid:has(.extra:nth-child(1)):has(.extra:nth-child(4)):not(:has(.extra:nth-of-type(n + 5))) > li[data-page="1"]:is( :nth-child(16n+12), :nth-child(16n+13), :nth-child(16n+14) ) { grid-column: span 4 } #product-grid:has(.extra:nth-child(1)):has(.extra:nth-child(4)):not(:has(.extra:nth-of-type(n + 5))) > li[data-page="1"]:is( :nth-child(16n+15), :nth-child(16n+16) ) { grid-column: span 6 } /* X = 1 and Y = 10. tested: OK LAYOUT ~~~ 1 (size: 1/3 of 12col grid) - 1 (size: 2/3 of 12col grid) ~~~ ~~~ 4 (size: 1/4 of 12col grid each) ~~~ ~~~ 4 (size: 1/4 of 12col grid each) ~~~ ~~~ 1 (size: 1/3 of 12col grid) - 1 (size: 2/3 of 12col grid) ~~~ ~~~ 4 (size: 1/4 of 12col grid each) ~~~ */ #product-grid:has(.extra:nth-child(1)):has(.extra:nth-child(11)):not(:has(.extra:nth-of-type(n + 12))) > li[data-page="1"].extra:is( :nth-child(16n+1), :nth-child(16n+11) ) { grid-column: span 4 } #product-grid:has(.extra:nth-child(1)):has(.extra:nth-child(11)):not(:has(.extra:nth-of-type(n + 12))) > li[data-page="1"].is-extra:is( :nth-child(16n+2), :nth-child(16n+12) ) { grid-column: span 8 } #product-grid:has(.extra:nth-child(1)):has(.extra:nth-child(11)):not(:has(.extra:nth-of-type(n + 12))) > li[data-page="1"]:is( :nth-child(16n+3), :nth-child(16n+4), :nth-child(16n+5), :nth-child(16n+6), :nth-child(16n+7), :nth-child(16n+8), :nth-child(16n+9), :nth-child(16n+10), :nth-child(16n+13), :nth-child(16n+14), :nth-child(16n+15), :nth-child(16n+16) ) { grid-column: span 3; } /* X = 3 and Y = 10. tested: OK LAYOUT ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 1 (size: 1/3 of 12col grid) - 1 (size: 2/3 of 12col grid) ~~~ ~~~ 3 (size: 1/3 of 12col grid each) ~~~ ~~~ 3 (size: 1/3 of 12col grid each) ~~~ ~~~ 1 (size: 1/3 of 12col grid) - 1 (size: 2/3 of 12col grid) ~~~ ~~~ 4 (size: 1/4 of 12col grid each) ~~~ */ #product-grid:has(.extra:nth-child(3)):has(.extra:nth-child(11)):not(:has(.extra:nth-of-type(n + 12))) > li[data-page="1"]:is( :nth-child(16n+1), :nth-child(16n+2) ) { grid-column: span 6 } #product-grid:has(.extra:nth-child(3)):has(.extra:nth-child(11)):not(:has(.extra:nth-of-type(n + 12))) > li[data-page="1"].extra:is( :nth-child(16n+3), :nth-child(16n+11) ) { grid-column: span 4 } #product-grid:has(.extra:nth-child(3)):has(.extra:nth-child(11)):not(:has(.extra:nth-of-type(n + 12))) > li[data-page="1"].is-extra:is( :nth-child(16n+4), :nth-child(16n+12) ) { grid-column: span 8 } #product-grid:has(.extra:nth-child(3)):has(.extra:nth-child(11)):not(:has(.extra:nth-of-type(n + 12))) > li[data-page="1"]:is( :nth-child(16n+5), :nth-child(16n+6), :nth-child(16n+7), :nth-child(16n+8), :nth-child(16n+9), :nth-child(16n+10) ) { grid-column: span 4 } #product-grid:has(.extra:nth-child(3)):has(.extra:nth-child(11)):not(:has(.extra:nth-of-type(n + 12))) > li[data-page="1"]:is( :nth-child(16n+13), :nth-child(16n+14), :nth-child(16n+15), :nth-child(16n+16) ) { grid-column: span 3 } /* - IF ALL 3 ITEMS HAVE EXTRA - overall nth-child number grows by 3 (:nth-child(17n+x)) because of the extra items - What the selector says: ~~~ :has(.extra:nth-child(X)):has(.extra:nth-child(Y)):has(.extra:nth-child(Z)) ~~~ Chained :has() -> ensures that that the #product-grid element must contain: - at least one .extra element that is the X-th child among its siblings - at least one .extra element that is the Y-th child among its siblings - at least one .extra element that is the Z-th child among its siblings ~~~ :not(:has(.extra:nth-of-type(n + W))) ~~~ Specifies that the #product-grid element cannot contain any .extra elements beyond W. Also, W grows by 3 because of the extra items, so Z must be larger than Y (by at least 3). */ /* X = 1 and Y = 3 and Z = 10. tested: OK LAYOUT ~~~ 1 (size: 1/3 of 12col grid) - 1 (size: 2/3 of 12col grid) ~~~ ~~~ 2x1 size: 1/4 of 12col grid each) - 6/ ~~~ ~~~ 2x1 size: 1/4 of 12col grid each) - /2 ~~~ ~~~ 4 (size: 1/4 of 12col grid each) ~~~ ~~~ 1 (size: 1/3 of 12col grid) - 1 (size: 2/3 of 12col grid) ~~~ ~~~ 4 (size: 1/4 of 12col grid each) ~~~ */ #product-grid:has(.extra:nth-child(1)):has(.extra:nth-child(4)):has(.extra:nth-child(12)):not(:has(.extra:nth-of-type(n + 13))) > li[data-page="1"].extra:is( :nth-child(17n+1), :nth-child(17n+12) ) { grid-column: span 4 } #product-grid:has(.extra:nth-child(1)):has(.extra:nth-child(4)):has(.extra:nth-child(12)):not(:has(.extra:nth-of-type(n + 13))) > li[data-page="1"].is-extra:is( :nth-child(17n+2), :nth-child(17n+13) ) { grid-column: span 8 } #product-grid:has(.extra:nth-child(1)):has(.extra:nth-child(4)):has(.extra:nth-child(12)):not(:has(.extra:nth-of-type(n + 13))) > li[data-page="1"]:is( :nth-child(17n+3), :nth-child(17n+4), :nth-child(17n+6), :nth-child(17n+7), :nth-child(17n+8), :nth-child(17n+9), :nth-child(17n+10), :nth-child(17n+11), :nth-child(17n+14), :nth-child(17n+15), :nth-child(17n+16), :nth-child(17n+17) ) { grid-column: span 3; } #product-grid:has(.extra:nth-child(1)):has(.extra:nth-child(4)):has(.extra:nth-child(12)):not(:has(.extra:nth-of-type(n + 13))) > li[data-page="1"]:is( :nth-child(17n+5) ) { grid-column: span 6; grid-row: span 2; } @media (max-width: 73em) { #product-grid > .grid-item, .appended-ul > .grid-item { grid-column: span 6 } /* ~~~ STANDARD GRID ~~~ ~~~ TESTED - OK ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 3 (size: 1/3 of 12col grid each) ~~~ ~~~ 3 (size: 1/3 of 12col grid each) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 3 (size: 1/3 of 12col grid each) ~~~ ~~~ 1 (size: 1/1 of 12col grid each) ~~~ */ #product-grid > li:is( :nth-child(14n+1), :nth-child(14n+2), :nth-child(14n+9), :nth-child(14n+10) ) { grid-column: span 6 } #product-grid > li:is( :nth-child(14n+3), :nth-child(14n+4), :nth-child(14n+5), :nth-child(14n+6), :nth-child(14n+7), :nth-child(14n+8), :nth-child(14n+11), :nth-child(14n+12), :nth-child(14n+13) ) { grid-column: span 4 } #product-grid > li:is( :nth-child(14n+14) ) { grid-column: span 12 } /* ~~~ APPENDED UL STANDARD GRID ~~~ */ .appended-ul > li:not([data-page="1"]):is( :nth-child(14n+1), :nth-child(14n+2), :nth-child(14n+9), :nth-child(14n+10) ) { grid-column: span 6 } .appended-ul > li:not([data-page="1"]):is( :nth-child(14n+3), :nth-child(14n+4), :nth-child(14n+5), :nth-child(14n+6), :nth-child(14n+7), :nth-child(14n+8), :nth-child(14n+11), :nth-child(14n+12), :nth-child(14n+13) ) { grid-column: span 4 } .appended-ul > li:not([data-page="1"]):is( :nth-child(14n+14) ) { grid-column: span 12 } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* X = 1. tested: OK LAYOUT ~~~ 1 (size: 1/3 of 12col grid) - 1 (size: 2/3 of 12col grid) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 3 (size: 1/3 of 12col grid each) ~~~ ~~~ 3 (size: 1/3 of 12col grid each) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 3 (size: 1/3 of 12col grid each) ~~~ */ #product-grid:has(.extra:nth-child(1)):not(:has(.extra:nth-of-type(n + 2))) > li[data-page="1"].extra:is(:nth-child(15n+1)) { grid-column: span 4 } #product-grid:has(.extra:nth-child(1)):not(:has(.extra:nth-of-type(n + 2))) > li[data-page="1"].is-extra:is(:nth-child(15n+2)) { grid-column: span 8 } #product-grid:has(.extra:nth-child(1)):not(:has(.extra:nth-of-type(n + 2))) > li[data-page="1"]:is( :nth-child(15n+5), :nth-child(15n+6), :nth-child(15n+7), :nth-child(15n+8), :nth-child(15n+9), :nth-child(15n+10), :nth-child(15n+13), :nth-child(15n+14), :nth-child(15n+15) ) { grid-column: span 4 } #product-grid:has(.extra:nth-child(1)):not(:has(.extra:nth-of-type(n + 2))) > li[data-page="1"]:is( :nth-child(15n+3), :nth-child(15n+4), :nth-child(15n+11), :nth-child(15n+12) ) { grid-column: span 6 } /* X = 3. tested: OK LAYOUT ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 1 (size: 1/3 of 12col grid) - 1 (size: 2/3 of 12col grid) ~~~ ~~~ 3 (size: 1/3 of 12col grid each) ~~~ ~~~ 3 (size: 1/3 of 12col grid each) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 3 (size: 1/3 of 12col grid each) ~~~ */ #product-grid:has(.extra:nth-child(3)):not(:has(.extra:nth-of-type(n + 4))) > li[data-page="1"].extra:is(:nth-child(15n+3)) { grid-column: span 4 } #product-grid:has(.extra:nth-child(3)):not(:has(.extra:nth-of-type(n + 4))) > li[data-page="1"].is-extra:is(:nth-child(15n+4)) { grid-column: span 8 } #product-grid:has(.extra:nth-child(3)):not(:has(.extra:nth-of-type(n + 4))) > li[data-page="1"]:is( :nth-child(15n+5), :nth-child(15n+6), :nth-child(15n+7), :nth-child(15n+8), :nth-child(15n+9), :nth-child(15n+10), :nth-child(15n+13), :nth-child(15n+14), :nth-child(15n+15) ) { grid-column: span 4 } #product-grid:has(.extra:nth-child(3)):not(:has(.extra:nth-of-type(n + 4))) > li[data-page="1"]:is( :nth-child(15n+1), :nth-child(15n+2), :nth-child(15n+11), :nth-child(15n+12) ) { grid-column: span 6 } /* X = 10. tested: OK LAYOUT ~~~ 3 (size: 1/3 of 12col grid each) ~~~ ~~~ 1 (size: 1/1 of 12col) ~~~ ~~~ 3 (size: 1/3 of 12col grid each) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 1 (size: 1/3 of 12col grid) - 1 (size: 2/3 of 12col grid) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ */ #product-grid:has(.extra:nth-child(10)):not(:has(.extra:nth-of-type(n + 11))) > li[data-page="1"].extra:is(:nth-child(15n+10)) { grid-column: span 4 } #product-grid:has(.extra:nth-child(10)):not(:has(.extra:nth-of-type(n + 11))) > li[data-page="1"].is-extra:is(:nth-child(15n+11)) { grid-column: span 8 } #product-grid:has(.extra:nth-child(10)):not(:has(.extra:nth-of-type(n + 11))) > li[data-page="1"]:is( :nth-child(15n+1), :nth-child(15n+2), :nth-child(15n+3), :nth-child(15n+5), :nth-child(15n+6), :nth-child(15n+7) ) { grid-column: span 4 } #product-grid:has(.extra:nth-child(10)):not(:has(.extra:nth-of-type(n + 11))) > li[data-page="1"]:is( :nth-child(15n+8), :nth-child(15n+9), :nth-child(15n+12), :nth-child(15n+13), :nth-child(15n+14), :nth-child(15n+15) ) { grid-column: span 6 } #product-grid:has(.extra:nth-child(10)):not(:has(.extra:nth-of-type(n + 11))) > li[data-page="1"]:is( :nth-child(15n+4) ) { grid-column: span 12 } /* X = 1 and Y = 3. tested: NOT OK LAYOUT ~~~ 1 (size: 1/3 of 12col grid) - 1 (size: 2/3 of 12col grid) ~~~ ~~~ 1 (size: 1/1 of 12col) ~~~ ~~~ 1 (size: 1/3 of 12col grid) - 1 (size: 2/3 of 12col grid) ~~~ ~~~ 3 (size: 1/3 of 12col grid each) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 3 (size: 1/3 of 12col grid each) ~~~ ~~~ 3 (size: 1/3 of 12col grid each) ~~~ */ #product-grid:has(.extra:nth-child(1)):has(.extra:nth-child(4)):not(:has(.extra:nth-of-type(n + 5))) > li[data-page="1"].extra:is( :nth-child(16n+1), :nth-child(16n+4) ) { grid-column: span 4 } #product-grid:has(.extra:nth-child(1)):has(.extra:nth-child(4)):not(:has(.extra:nth-of-type(n + 5))) > li[data-page="1"].is-extra:is( :nth-child(16n+2), :nth-child(16n+5) ) { grid-column: span 8 } #product-grid:has(.extra:nth-child(1)):has(.extra:nth-child(4)):not(:has(.extra:nth-of-type(n + 5))) > li[data-page="1"]:is( :nth-child(16n+3) ) { grid-column: span 12 } #product-grid:has(.extra:nth-child(1)):has(.extra:nth-child(4)):not(:has(.extra:nth-of-type(n + 5))) > li[data-page="1"]:is( :nth-child(16n+8), :nth-child(16n+9), :nth-child(16n+10), :nth-child(16n+11), :nth-child(16n+12), :nth-child(16n+13), :nth-child(16n+14), :nth-child(16n+15), :nth-child(16n+16) ) { grid-column: span 4 } #product-grid:has(.extra:nth-child(1)):has(.extra:nth-child(4)):not(:has(.extra:nth-of-type(n + 5))) > li[data-page="1"]:is( :nth-child(16n+6), :nth-child(16n+7), ) { grid-column: span 6 } /* X = 1 and Y = 10. tested: OK LAYOUT ~~~ 1 (size: 1/3 of 12col grid) - 1 (size: 2/3 of 12col grid) ~~~ ~~~ 3 (size: 1/3 of 12col grid each) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 3 (size: 1/3 of 12col grid each) ~~~ ~~~ 1 (size: 1/3 of 12col grid) - 1 (size: 2/3 of 12col grid) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ */ #product-grid:has(.extra:nth-child(1)):has(.extra:nth-child(11)):not(:has(.extra:nth-of-type(n + 12))) > li[data-page="1"].extra:is( :nth-child(16n+1), :nth-child(16n+11) ) { grid-column: span 4 } #product-grid:has(.extra:nth-child(1)):has(.extra:nth-child(11)):not(:has(.extra:nth-of-type(n + 12))) > li[data-page="1"].is-extra:is( :nth-child(16n+2), :nth-child(16n+12) ) { grid-column: span 8 } #product-grid:has(.extra:nth-child(1)):has(.extra:nth-child(11)):not(:has(.extra:nth-of-type(n + 12))) > li[data-page="1"]:is( :nth-child(16n+3), :nth-child(16n+4), :nth-child(16n+5), :nth-child(16n+8), :nth-child(16n+9), :nth-child(16n+10) ) { grid-column: span 4; } #product-grid:has(.extra:nth-child(1)):has(.extra:nth-child(11)):not(:has(.extra:nth-of-type(n + 12))) > li[data-page="1"]:is( :nth-child(16n+6), :nth-child(16n+7), :nth-child(16n+13), :nth-child(16n+14), :nth-child(16n+15), :nth-child(16n+16) ) { grid-column: span 6; } /* X = 3 and Y = 10. tested: OK LAYOUT ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 1 (size: 1/3 of 12col grid) - 1 (size: 2/3 of 12col grid) ~~~ ~~~ 3 (size: 1/3 of 12col grid each) ~~~ ~~~ 3 (size: 1/3 of 12col grid each) ~~~ ~~~ 1 (size: 1/3 of 12col grid) - 1 (size: 2/3 of 12col grid) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ */ #product-grid:has(.extra:nth-child(3)):has(.extra:nth-child(11)):not(:has(.extra:nth-of-type(n + 12))) > li[data-page="1"].extra:is( :nth-child(16n+3), :nth-child(16n+11) ) { grid-column: span 4 } #product-grid:has(.extra:nth-child(3)):has(.extra:nth-child(11)):not(:has(.extra:nth-of-type(n + 12))) > li[data-page="1"].is-extra:is( :nth-child(16n+4), :nth-child(16n+12) ) { grid-column: span 8 } #product-grid:has(.extra:nth-child(3)):has(.extra:nth-child(11)):not(:has(.extra:nth-of-type(n + 12))) > li[data-page="1"]:is( :nth-child(16n+1), :nth-child(16n+2), :nth-child(16n+13), :nth-child(16n+14), :nth-child(16n+15), :nth-child(16n+16) ) { grid-column: span 6; } #product-grid:has(.extra:nth-child(3)):has(.extra:nth-child(11)):not(:has(.extra:nth-of-type(n + 12))) > li[data-page="1"]:is( :nth-child(16n+5), :nth-child(16n+6), :nth-child(16n+7), :nth-child(16n+8), :nth-child(16n+9), :nth-child(16n+10) ) { grid-column: span 4 } /* X = 1, Y = 3 and Z = 10. tested: OK LAYOUT ~~~ 1 (size: 1/3 of 12col grid) - 1 (size: 2/3 of 12col grid) ~~~ ~~~ 1 (size: 1/1 of 12col grid) ~~~ ~~~ 1 (size: 1/3 of 12col grid) - 1 (size: 2/3 of 12col grid) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 3 (size: 1/3 of 12col grid each) ~~~ ~~~ 1 (size: 1/1 of 12col grid) ~~~ ~~~ 1 (size: 1/3 of 12col grid) - 1 (size: 2/3 of 12col grid) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ */ #product-grid:has(.extra:nth-child(1)):has(.extra:nth-child(4)):has(.extra:nth-child(12)):not(:has(.extra:nth-of-type(n + 13))) > li[data-page="1"].extra:is( :nth-child(17n+1), :nth-child(17n+4) ) { grid-column: span 4 } #product-grid:has(.extra:nth-child(1)):has(.extra:nth-child(4)):has(.extra:nth-child(12)):not(:has(.extra:nth-of-type(n + 13))) > li[data-page="1"].is-extra:is( :nth-child(17n+2), :nth-child(17n+5) ) { grid-column: span 8 } #product-grid:has(.extra:nth-child(1)):has(.extra:nth-child(4)):has(.extra:nth-child(12)):not(:has(.extra:nth-of-type(n + 13))) > li[data-page="1"]:is( :nth-child(17n+8), :nth-child(17n+9), :nth-child(17n+10) ) { grid-column: span 4; } #product-grid:has(.extra:nth-child(1)):has(.extra:nth-child(4)):has(.extra:nth-child(12)):not(:has(.extra:nth-of-type(n + 13))) > li[data-page="1"]:is( :nth-child(17n+3), :nth-child(17n+11) ) { grid-column: span 12 } #product-grid:has(.extra:nth-child(1)):has(.extra:nth-child(4)):has(.extra:nth-child(12)):not(:has(.extra:nth-of-type(n + 13))) > li[data-page="1"]:is( :nth-child(17n+6), :nth-child(17n+7), :nth-child(17n+12), :nth-child(17n+13), :nth-child(17n+14), :nth-child(17n+15), :nth-child(17n+16), :nth-child(17n+17) ) { grid-column: span 6; } } @media (max-width: 48em) { /* ~~~ STANDARD GRID ~~~ ~~~ TESTED - OK ~~~ 1 (size: 1/1 of 12col) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 1 (size: 1/1 of 12col) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 1 (size: 1/1 of 12col) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 1 (size: 1/1 of 12col) ~~~ */ #product-grid > li:is( :nth-child(14n+1), :nth-child(14n+6), :nth-child(14n+11), :nth-child(14n+14) ) { grid-column: span 12 } #product-grid > li:is( :nth-child(14n+2), :nth-child(14n+3), :nth-child(14n+4), :nth-child(14n+5), :nth-child(14n+7), :nth-child(14n+8), :nth-child(14n+9), :nth-child(14n+10), :nth-child(14n+12), :nth-child(14n+13) ) { grid-column: span 6 } /* ~~~ APPENDED UL STANDARD GRID ~~~ */ .appended-ul > li:not([data-page="1"]):is( :nth-child(14n+1), :nth-child(14n+6), :nth-child(14n+11), :nth-child(14n+14) ) { grid-column: span 12 } .appended-ul > li:not([data-page="1"]):is( :nth-child(14n+2), :nth-child(14n+3), :nth-child(14n+4), :nth-child(14n+5), :nth-child(14n+7), :nth-child(14n+8), :nth-child(14n+9), :nth-child(14n+10), :nth-child(14n+12), :nth-child(14n+13) ) { grid-column: span 6 } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* X = 1. tested: OK LAYOUT ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 1 (size: 1/1 of 12col) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 1 (size: 1/1 of 12col) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 1 (size: 1/1 of 12col) ~~~ */ #product-grid:has(.extra:nth-child(1)):not(:has(.extra:nth-of-type(n + 2))) > li[data-page="1"].extra:is(:nth-child(15n+1)) { grid-column: span 6 } #product-grid:has(.extra:nth-child(1)):not(:has(.extra:nth-of-type(n + 2))) > li[data-page="1"].is-extra:is(:nth-child(15n+2)) { grid-column: span 6 } #product-grid:has(.extra:nth-child(1)):not(:has(.extra:nth-of-type(n + 2))) > li[data-page="1"].extra:is(:nth-child(15n+1)) { grid-column: span 12 } #product-grid:has(.extra:nth-child(1)):not(:has(.extra:nth-of-type(n + 2))) > li[data-page="1"].is-extra:is(:nth-child(15n+2)) { grid-column: span 12; height:40vh; min-height: 200px; width: 120%; margin-left: -2.5rem; } #product-grid:has(.extra:nth-child(1)):not(:has(.extra:nth-of-type(n + 2))) > li[data-page="1"]:is( :nth-child(15n+4), :nth-child(15n+5), :nth-child(15n+6), :nth-child(15n+7), :nth-child(15n+9), :nth-child(15n+10), :nth-child(15n+11), :nth-child(15n+12), :nth-child(15n+13), :nth-child(15n+14) ) { grid-column: span 6 } #product-grid:has(.extra:nth-child(1)):not(:has(.extra:nth-of-type(n + 2))) > li[data-page="1"]:is( :nth-child(15n+3), :nth-child(15n+8), :nth-child(15n+15) ) { grid-column: span 12 } /* X = 3. tested: OK LAYOUT ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 1 (size: 1/1 of 12col) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 1 (size: 1/1 of 12col) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 1 (size: 1/1 of 12col) ~~~ */ #product-grid:has(.extra:nth-child(3)):not(:has(.extra:nth-of-type(n + 4))) > li[data-page="1"].extra:is(:nth-child(15n+3)) { grid-column: span 6 } #product-grid:has(.extra:nth-child(3)):not(:has(.extra:nth-of-type(n + 4))) > li[data-page="1"].is-extra:is(:nth-child(15n+4)) { grid-column: span 6 } #product-grid:has(.extra:nth-child(3)):not(:has(.extra:nth-of-type(n + 4))) > li[data-page="1"]:is( :nth-child(15n+5), :nth-child(15n+10), :nth-child(15n+15) ) { grid-column: span 12 } #product-grid:has(.extra:nth-child(3)):not(:has(.extra:nth-of-type(n + 4))) > li[data-page="1"]:is( :nth-child(15n+1), :nth-child(15n+2), :nth-child(15n+6), :nth-child(15n+7), :nth-child(15n+8), :nth-child(15n+9), :nth-child(15n+11), :nth-child(15n+12), :nth-child(15n+13), :nth-child(15n+14) ) { grid-column: span 6 } /* X = 10. tested: OK LAYOUT ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 1 (size: 1/1 of 12col) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 1 (size: 1/1 of 12col) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 1 (size: 1/1 of 12col) ~~~ */ #product-grid:has(.extra:nth-child(10)):not(:has(.extra:nth-of-type(n + 11))) > li[data-page="1"].extra:is(:nth-child(15n+10)) { grid-column: span 6 } #product-grid:has(.extra:nth-child(10)):not(:has(.extra:nth-of-type(n + 11))) > li[data-page="1"].is-extra:is(:nth-child(15n+11)) { grid-column: span 6 } #product-grid:has(.extra:nth-child(10)):not(:has(.extra:nth-of-type(n + 11))) > li[data-page="1"]:is( :nth-child(15n+1), :nth-child(15n+2), :nth-child(15n+3), :nth-child(15n+4), :nth-child(15n+6), :nth-child(15n+7), :nth-child(15n+8), :nth-child(15n+9), :nth-child(15n+13), :nth-child(15n+14) ) { grid-column: span 6 } #product-grid:has(.extra:nth-child(10)):not(:has(.extra:nth-of-type(n + 11))) > li[data-page="1"]:is( :nth-child(15n+5), :nth-child(15n+12), :nth-child(15n+15) ) { grid-column: span 12 } /* X = 1 and Y = 3. tested: OK LAYOUT ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 1 (size: 1/1 of 12col) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 1 (size: 1/1 of 12col) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 1 (size: 1/1 of 12col) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 1 (size: 1/1 of 12col) ~~~ */ #product-grid:has(.extra:nth-child(1)):has(.extra:nth-child(4)):not(:has(.extra:nth-of-type(n + 5))) > li[data-page="1"].extra:is( :nth-child(16n+1), :nth-child(16n+4) ) { grid-column: span 6 } #product-grid:has(.extra:nth-child(1)):has(.extra:nth-child(4)):not(:has(.extra:nth-of-type(n + 5))) > li[data-page="1"].is-extra:is( :nth-child(16n+2), :nth-child(16n+5) ) { grid-column: span 6 } #product-grid:has(.extra:nth-child(1)):has(.extra:nth-child(4)):not(:has(.extra:nth-of-type(n + 5))) > li[data-page="1"]:is( :nth-child(16n+7), :nth-child(16n+8), :nth-child(16n+9), :nth-child(16n+10), :nth-child(16n+12), :nth-child(16n+13), :nth-child(16n+14), :nth-child(16n+15) ) { grid-column: span 6 } #product-grid:has(.extra:nth-child(1)):has(.extra:nth-child(4)):not(:has(.extra:nth-of-type(n + 5))) > li[data-page="1"]:is( :nth-child(16n+3), :nth-child(16n+6), :nth-child(16n+11), :nth-child(16n+16), ) { grid-column: span 12 } /* X = 1 and Y = 10. tested: OK LAYOUT ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 1 (size: 1/1 of 12col) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 1 (size: 1/1 of 12col) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 1 (size: 1/1 of 12col) ~~~ ~~~ 1 (size: 1/1 of 12col) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 1 (size: 1/1 of 12col) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 1 (size: 1/1 of 12col) ~~~ */ #product-grid:has(.extra:nth-child(1)):has(.extra:nth-child(11)):not(:has(.extra:nth-of-type(n + 12))) > li[data-page="1"].extra:is( :nth-child(16n+1), :nth-child(16n+11) ) { grid-column: span 6 } #product-grid:has(.extra:nth-child(1)):has(.extra:nth-child(11)):not(:has(.extra:nth-of-type(n + 12))) > li[data-page="1"].is-extra:is( :nth-child(16n+2), :nth-child(16n+12) ) { grid-column: span 6 } #product-grid:has(.extra:nth-child(1)):has(.extra:nth-child(11)):not(:has(.extra:nth-of-type(n + 12))) > li[data-page="1"]:is( :nth-child(16n+4), :nth-child(16n+5), :nth-child(16n+7), :nth-child(16n+8), :nth-child(16n+14), :nth-child(16n+15) ) { grid-column: span 6; } #product-grid:has(.extra:nth-child(1)):has(.extra:nth-child(11)):not(:has(.extra:nth-of-type(n + 12))) > li[data-page="1"]:is( :nth-child(16n+3), :nth-child(16n+6), :nth-child(16n+9), :nth-child(16n+10), :nth-child(16n+13), :nth-child(16n+16) ) { grid-column: span 12; } /* X = 3 and Y = 10. tested: OK LAYOUT ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 1 (size: 1/3 of 12col grid) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 1 (size: 1/3 of 12col grid) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 1 (size: 1/3 of 12col grid) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 1 (size: 1/3 of 12col grid) ~~~ */ #product-grid:has(.extra:nth-child(3)):has(.extra:nth-child(11)):not(:has(.extra:nth-of-type(n + 12))) > li[data-page="1"].extra:is( :nth-child(16n+3), :nth-child(16n+11) ) { grid-column: span 6 } #product-grid:has(.extra:nth-child(3)):has(.extra:nth-child(11)):not(:has(.extra:nth-of-type(n + 12))) > li[data-page="1"].is-extra:is( :nth-child(16n+4), :nth-child(16n+12) ) { grid-column: span 6 } #product-grid:has(.extra:nth-child(3)):has(.extra:nth-child(11)):not(:has(.extra:nth-of-type(n + 12))) > li[data-page="1"]:is( :nth-child(16n+1), :nth-child(16n+2), :nth-child(16n+6), :nth-child(16n+7), :nth-child(16n+9), :nth-child(16n+10), :nth-child(16n+14), :nth-child(16n+15) ) { grid-column: span 6; } #product-grid:has(.extra:nth-child(3)):has(.extra:nth-child(11)):not(:has(.extra:nth-of-type(n + 12))) > li[data-page="1"]:is( :nth-child(16n+5), :nth-child(16n+8), :nth-child(16n+13), :nth-child(16n+16) ) { grid-column: span 12 } /* X = 1, Y = 3 and Z = 10. tested: OK LAYOUT ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 1 (size: 1/3 of 12col grid) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 1 (size: 1/3 of 12col grid) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 1 (size: 1/3 of 12col grid) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 1 (size: 1/3 of 12col grid) ~~~ ~~~ 2 (size: 1/2 of 12col grid each) ~~~ ~~~ 1 (size: 1/3 of 12col grid) ~~~ */ #product-grid:has(.extra:nth-child(1)):has(.extra:nth-child(4)):has(.extra:nth-child(12)):not(:has(.extra:nth-of-type(n + 13))) > li[data-page="1"].extra:is( :nth-child(17n+1), :nth-child(17n+4) ) { grid-column: span 6 } #product-grid:has(.extra:nth-child(1)):has(.extra:nth-child(4)):has(.extra:nth-child(12)):not(:has(.extra:nth-of-type(n + 13))) > li[data-page="1"].is-extra:is( :nth-child(17n+2), :nth-child(17n+5) ) { grid-column: span 6 } #product-grid:has(.extra:nth-child(1)):has(.extra:nth-child(4)):has(.extra:nth-child(12)):not(:has(.extra:nth-of-type(n + 13))) > li[data-page="1"]:is( :nth-child(17n+6), :nth-child(17n+7), :nth-child(17n+9), :nth-child(17n+10), :nth-child(17n+12), :nth-child(17n+13), :nth-child(17n+15), :nth-child(17n+16), ) { grid-column: span 6; } #product-grid:has(.extra:nth-child(1)):has(.extra:nth-child(4)):has(.extra:nth-child(12)):not(:has(.extra:nth-of-type(n + 13))) > li[data-page="1"]:is( :nth-child(17n+3), :nth-child(17n+8), :nth-child(17n+11), :nth-child(17n+14), :nth-child(17n+17), ) { grid-column: span 12 } } @media (max-width: 30em) { /* YOU CAN APPLY THE FOLLOWING RULES TO THE MEDIA QUERY ABOVE TO MAKE THEM ALL FULL WIDTH. RIGHT NOW SOME ARE HALF WIDTH AND THERE IS NOT ENOUGH SPACE TO DISPLAY THEM PROPERLY. */ .appended-ul, #product-grid > li, #product-grid > li[data-page="1"], #product-grid > li[data-page="1"].extra { grid-column: span 6; } /* #product-grid > li[data-page="1"].is-extra { display: none; } */ } @media (max-width: 49rem) { #product-grid { padding: 0 2rem 3vw 2rem; } }