/** * Mosaic Gallery v4 * —————————————————————————————————————————— * * 1 image: single * 2 images: 2-a … 2-d (4 layouts) * 3 images: 3-a … 3-x (24 layouts, families A–E) * * Alignment via .mosaic-pos--XX classes (flex-based). * * Family A/B vertical cell variations: * 5|5 = equal split * 4|6 = narrow vertical (A) / wide pair (B) */ /* —————————————————————————————————————————— CONTAINER —————————————————————————————————————————— */ .mosaic { padding-top: 0; padding-bottom: 0; } .ds-mosaic { width: 100%; height: var(--mosaic-H); margin: 0; padding: 0; position: relative; grid-column: 1 / span 12; } @media (min-width: 768px) { .ds-mosaic { grid-column: 1 / span 12; } } @media (min-width: 1024px) { .ds-mosaic { grid-column: 2 / span 10; height: 65vh; } } @media (min-width: 1440px) { .ds-mosaic { grid-column: 2 / span 10; height: 65vh; } } @media (min-width: 1920px) { .ds-mosaic { grid-column: 3 / span 8; height: 65vh; } } /* —————————————————————————————————————————— SLIDE BASE —————————————————————————————————————————— */ .mosaic-slide { width: 100%; height: 100%; margin: 0 var(--S01) 0 0; padding: 0; display: grid; gap: var(--S01); } .mosaic-slide__cell { margin: 0; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; } .mosaic-slide__cell img { max-width: 100%; max-height: 100%; display: block; } @media (min-width: 1024px) { .mosaic-slide { margin: 0 10vw 0 0; } } /* —————————————————————————————————————————— POSITION CLASSES —————————————————————————————————————————— tl = top left tc = top center tr = top right cl = center left cc = center center cr = center right bl = bottom left bc = bottom center br = bottom right —————————————————————————————————————————— */ .mosaic-pos--tl { align-items: flex-start; justify-content: flex-start; } .mosaic-pos--tc { align-items: flex-start; justify-content: center; } .mosaic-pos--tr { align-items: flex-start; justify-content: flex-end; } .mosaic-pos--cl { align-items: center; justify-content: flex-start; } .mosaic-pos--cc { align-items: center; justify-content: center; } .mosaic-pos--cr { align-items: center; justify-content: flex-end; } .mosaic-pos--bl { align-items: flex-end; justify-content: flex-start; } .mosaic-pos--bc { align-items: flex-end; justify-content: center; } .mosaic-pos--br { align-items: flex-end; justify-content: flex-end; } .mosaic-pos--cc img { width: 100%; height: 100%; max-width: auto; max-height: auto; object-fit: cover; } .mosaic-slide--single .mosaic-pos--cc img { width: 100%; height: 100%; max-width: auto; max-height: auto; object-fit: contain; } /* —————————————————————————————————————————— 1 X IMAGE —————————————————————————————————————————— */ .mosaic-slide--single { grid-template-columns: 1fr; grid-template-rows: 1fr; } /* —————————————————————————————————————————— 2 X IMAGES —————————————————————————————————————————— */ .mosaic-slide--layout-2-a { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } .mosaic-slide--layout-2-b { grid-template-columns: 1fr; grid-template-rows: 2fr 1fr; } .mosaic-slide--layout-2-c { grid-template-columns: 1fr; grid-template-rows: 1fr 2fr; } .mosaic-slide--layout-2-d { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } /* [class*="mosaic-slide--layout-2"] img { width: 100%; height: 100%; max-width: auto; max-height: auto; object-fit: cover; } */ @media (min-width: 1024px) { .mosaic-slide--layout-2-a { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; } .mosaic-slide--layout-2-b { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr; } .mosaic-slide--layout-2-c { grid-template-columns: 1fr 2fr; grid-template-rows: 1fr; } .mosaic-slide--layout-2-d { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } /* [class*="mosaic-slide--layout-2"] img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: inherit; } */ } /* —————————————————————————————————————————— 3 X IMAGES — FAMILY A: Vertical left —————————————————————————————————————————— +--------+--------+ | | 2 | | 1 +--------+ | | 3 | +--------+--------+ Variations: 5|5 (equal) or 4|6 (narrow vertical) Rows: 3|3, 4|2, 2|4 —————————————————————————————————————————— */ .mosaic-slide--layout-3-a .mosaic-slide__cell--1, .mosaic-slide--layout-3-b .mosaic-slide__cell--1, .mosaic-slide--layout-3-c .mosaic-slide__cell--1, .mosaic-slide--layout-3-d .mosaic-slide__cell--1, .mosaic-slide--layout-3-e .mosaic-slide__cell--1, .mosaic-slide--layout-3-f .mosaic-slide__cell--1, .mosaic-slide--layout-3-y .mosaic-slide__cell--1 { grid-column: 1 / span 2; grid-row: 1; } /* 3-a: 5|5 cols · 3|3 rows */ .mosaic-slide--layout-3-a { grid-template-columns: 1fr 1fr; grid-template-rows: 6fr 4fr; } /* 3-b: 4|6 cols · 3|3 rows (narrow vertical) */ .mosaic-slide--layout-3-b { grid-template-columns: 1fr 1fr; grid-template-rows: 6fr 4fr; } /* 3-c: 5|5 cols · 4|2 rows */ .mosaic-slide--layout-3-c { grid-template-columns: 1fr 1fr; grid-template-rows: 6fr 4fr; } /* 3-d: 5|5 cols · 2|4 rows */ .mosaic-slide--layout-3-d { grid-template-columns: 1fr 1fr; grid-template-rows: 6fr 4fr; } /* 3-e: 4|6 cols · 4|2 rows (narrow vertical) */ .mosaic-slide--layout-3-e { grid-template-columns: 1fr 1fr; grid-template-rows: 6fr 4fr; } /* 3-f: 4|6 cols · 2|4 rows (narrow vertical) */ .mosaic-slide--layout-3-f { grid-template-columns: 1fr 1fr; grid-template-rows: 6fr 4fr; } /* 3-y: 6|4 cols · 3|3 rows (wide vertical) */ .mosaic-slide--layout-3-y { grid-template-columns: 1fr 1fr; grid-template-rows: 6fr 4fr; } @media (min-width: 1024px) { .mosaic-slide--layout-3-a .mosaic-slide__cell--1, .mosaic-slide--layout-3-b .mosaic-slide__cell--1, .mosaic-slide--layout-3-c .mosaic-slide__cell--1, .mosaic-slide--layout-3-d .mosaic-slide__cell--1, .mosaic-slide--layout-3-e .mosaic-slide__cell--1, .mosaic-slide--layout-3-f .mosaic-slide__cell--1, .mosaic-slide--layout-3-y .mosaic-slide__cell--1 { grid-column: 1 / span 1; grid-row: 1 / span 2; } /* 3-a: 5|5 cols · 3|3 rows */ .mosaic-slide--layout-3-a { grid-template-columns: 5fr 5fr; grid-template-rows: 3fr 3fr; } /* 3-b: 4|6 cols · 3|3 rows (narrow vertical) */ .mosaic-slide--layout-3-b { grid-template-columns: 4fr 6fr; grid-template-rows: 3fr 3fr; } /* 3-c: 5|5 cols · 4|2 rows */ .mosaic-slide--layout-3-c { grid-template-columns: 5fr 5fr; grid-template-rows: 4fr 2fr; } /* 3-d: 5|5 cols · 2|4 rows */ .mosaic-slide--layout-3-d { grid-template-columns: 5fr 5fr; grid-template-rows: 2fr 4fr; } /* 3-e: 4|6 cols · 4|2 rows (narrow vertical) */ .mosaic-slide--layout-3-e { grid-template-columns: 4fr 6fr; grid-template-rows: 4fr 2fr; } /* 3-f: 4|6 cols · 2|4 rows (narrow vertical) */ .mosaic-slide--layout-3-f { grid-template-columns: 4fr 6fr; grid-template-rows: 2fr 4fr; } /* 3-y: 6|4 cols · 3|3 rows (wide vertical) */ .mosaic-slide--layout-3-y { grid-template-columns: 6fr 4fr; grid-template-rows: 3fr 3fr; } } /* —————————————————————————————————————————— 3 X IMAGES — FAMILY B: Vertical right —————————————————————————————————————————— +--------+--------+ | 1 | | +--------+ 2 | | 3 | | +--------+--------+ Variations: 5|5 (equal) or 6|4 (narrow vertical) Rows: 3|3, 4|2, 2|4 —————————————————————————————————————————— */ .mosaic-slide--layout-3-g .mosaic-slide__cell--1, .mosaic-slide--layout-3-h .mosaic-slide__cell--1, .mosaic-slide--layout-3-i .mosaic-slide__cell--1, .mosaic-slide--layout-3-j .mosaic-slide__cell--1, .mosaic-slide--layout-3-k .mosaic-slide__cell--1, .mosaic-slide--layout-3-l .mosaic-slide__cell--1, .mosaic-slide--layout-3-z .mosaic-slide__cell--1 { grid-column: 2; grid-row: 1; } .mosaic-slide--layout-3-g .mosaic-slide__cell--2, .mosaic-slide--layout-3-h .mosaic-slide__cell--2, .mosaic-slide--layout-3-i .mosaic-slide__cell--2, .mosaic-slide--layout-3-j .mosaic-slide__cell--2, .mosaic-slide--layout-3-k .mosaic-slide__cell--2, .mosaic-slide--layout-3-l .mosaic-slide__cell--2, .mosaic-slide--layout-3-z .mosaic-slide__cell--2 { grid-column: 1 / span 2; grid-row: 2; } .mosaic-slide--layout-3-g .mosaic-slide__cell--3, .mosaic-slide--layout-3-h .mosaic-slide__cell--3, .mosaic-slide--layout-3-i .mosaic-slide__cell--3, .mosaic-slide--layout-3-j .mosaic-slide__cell--3, .mosaic-slide--layout-3-k .mosaic-slide__cell--3, .mosaic-slide--layout-3-l .mosaic-slide__cell--3, .mosaic-slide--layout-3-z .mosaic-slide__cell--3 { grid-column: 1; grid-row: 1; } /* 3-g: 5|5 cols · 3|3 rows */ .mosaic-slide--layout-3-g { grid-template-columns: 1fr 1fr; grid-template-rows: 4fr 6fr; } /* 3-h: 6|4 cols · 3|3 rows (narrow vertical) */ .mosaic-slide--layout-3-h { grid-template-columns: 1fr 1fr; grid-template-rows: 4fr 6fr; } /* 3-i: 5|5 cols · 4|2 rows */ .mosaic-slide--layout-3-i { grid-template-columns: 1fr 1fr; grid-template-rows: 4fr 6fr; } /* 3-j: 5|5 cols · 2|4 rows */ .mosaic-slide--layout-3-j { grid-template-columns: 1fr 1fr; grid-template-rows: 4fr 6fr; } /* 3-k: 6|4 cols · 4|2 rows (narrow vertical) */ .mosaic-slide--layout-3-k { grid-template-columns: 1fr 1fr; grid-template-rows: 4fr 6fr; } /* 3-l: 6|4 cols · 2|4 rows (narrow vertical) */ .mosaic-slide--layout-3-l { grid-template-columns: 1fr 1fr; grid-template-rows: 4fr 6fr; } /* 3-z: 4|6 cols · 3|3 rows (wide vertical) */ .mosaic-slide--layout-3-z { grid-template-columns: 1fr 1fr; grid-template-rows: 4fr 6fr; } @media (min-width: 1024px) { .mosaic-slide--layout-3-g .mosaic-slide__cell--1, .mosaic-slide--layout-3-h .mosaic-slide__cell--1, .mosaic-slide--layout-3-i .mosaic-slide__cell--1, .mosaic-slide--layout-3-j .mosaic-slide__cell--1, .mosaic-slide--layout-3-k .mosaic-slide__cell--1, .mosaic-slide--layout-3-l .mosaic-slide__cell--1, .mosaic-slide--layout-3-z .mosaic-slide__cell--1 { grid-column: 1; grid-row: 1; } .mosaic-slide--layout-3-g .mosaic-slide__cell--2, .mosaic-slide--layout-3-h .mosaic-slide__cell--2, .mosaic-slide--layout-3-i .mosaic-slide__cell--2, .mosaic-slide--layout-3-j .mosaic-slide__cell--2, .mosaic-slide--layout-3-k .mosaic-slide__cell--2, .mosaic-slide--layout-3-l .mosaic-slide__cell--2, .mosaic-slide--layout-3-z .mosaic-slide__cell--2 { grid-column: 2 / span 1; grid-row: 1 / span 2; } .mosaic-slide--layout-3-g .mosaic-slide__cell--3, .mosaic-slide--layout-3-h .mosaic-slide__cell--3, .mosaic-slide--layout-3-i .mosaic-slide__cell--3, .mosaic-slide--layout-3-j .mosaic-slide__cell--3, .mosaic-slide--layout-3-k .mosaic-slide__cell--3, .mosaic-slide--layout-3-l .mosaic-slide__cell--3, .mosaic-slide--layout-3-z .mosaic-slide__cell--3 { grid-column: 1; grid-row: 2; } /* 3-g: 5|5 cols · 3|3 rows */ .mosaic-slide--layout-3-g { grid-template-columns: 5fr 5fr; grid-template-rows: 3fr 3fr; } /* 3-h: 6|4 cols · 3|3 rows (narrow vertical) */ .mosaic-slide--layout-3-h { grid-template-columns: 6fr 4fr; grid-template-rows: 3fr 3fr; } /* 3-i: 5|5 cols · 4|2 rows */ .mosaic-slide--layout-3-i { grid-template-columns: 5fr 5fr; grid-template-rows: 4fr 2fr; } /* 3-j: 5|5 cols · 2|4 rows */ .mosaic-slide--layout-3-j { grid-template-columns: 5fr 5fr; grid-template-rows: 2fr 4fr; } /* 3-k: 6|4 cols · 4|2 rows (narrow vertical) */ .mosaic-slide--layout-3-k { grid-template-columns: 6fr 4fr; grid-template-rows: 4fr 2fr; } /* 3-l: 6|4 cols · 2|4 rows (narrow vertical) */ .mosaic-slide--layout-3-l { grid-template-columns: 6fr 4fr; grid-template-rows: 2fr 4fr; } /* 3-z: 4|6 cols · 3|3 rows (wide vertical) */ .mosaic-slide--layout-3-z { grid-template-columns: 4fr 6fr; grid-template-rows: 3fr 3fr; } } /* —————————————————————————————————————————— 3 X IMAGES — FAMILY C: Horizontal top —————————————————————————————————————————— */ .mosaic-slide--layout-3-m .mosaic-slide__cell--1, .mosaic-slide--layout-3-n .mosaic-slide__cell--1, .mosaic-slide--layout-3-o .mosaic-slide__cell--1 { grid-column: 1 / span 2; grid-row: 1; } .mosaic-slide--layout-3-m .mosaic-slide__cell--2, .mosaic-slide--layout-3-n .mosaic-slide__cell--2, .mosaic-slide--layout-3-o .mosaic-slide__cell--2 { grid-column: 2; grid-row: 2; } .mosaic-slide--layout-3-m .mosaic-slide__cell--3, .mosaic-slide--layout-3-n .mosaic-slide__cell--3, .mosaic-slide--layout-3-o .mosaic-slide__cell--3 { grid-column: 1; grid-row: 2; } .mosaic-slide--layout-3-m { grid-template-columns: 5fr 5fr; grid-template-rows: 3fr 3fr; } .mosaic-slide--layout-3-n { grid-template-columns: 6fr 4fr; grid-template-rows: 3fr 3fr; } .mosaic-slide--layout-3-o { grid-template-columns: 4fr 6fr; grid-template-rows: 3fr 3fr; } /* —————————————————————————————————————————— 3 X IMAGES — FAMILY D: Horizontal bottom —————————————————————————————————————————— */ .mosaic-slide--layout-3-p .mosaic-slide__cell--3, .mosaic-slide--layout-3-q .mosaic-slide__cell--3, .mosaic-slide--layout-3-r .mosaic-slide__cell--3 { grid-row: 2; grid-column: 1 / 3; } .mosaic-slide--layout-3-p { grid-template-columns: 5fr 5fr; grid-template-rows: 3fr 3fr; } .mosaic-slide--layout-3-q { grid-template-columns: 6fr 4fr; grid-template-rows: 3fr 3fr; } .mosaic-slide--layout-3-r { grid-template-columns: 4fr 6fr; grid-template-rows: 3fr 3fr; } /* —————————————————————————————————————————— 3 X IMAGES — FAMILY E: Three columns —————————————————————————————————————————— */ .mosaic-slide--layout-3-s { grid-template-columns: 1fr; grid-template-rows: 3fr 3fr 3fr; } .mosaic-slide--layout-3-t { grid-template-columns: 1fr; grid-template-rows: 3fr 3fr 4fr; } .mosaic-slide--layout-3-u { grid-template-columns: 1fr; grid-template-rows: 4fr 3fr 3fr; } .mosaic-slide--layout-3-v { grid-template-columns: 1fr; grid-template-rows: 3fr 4fr 3fr; } .mosaic-slide--layout-3-w { grid-template-columns: 1fr; grid-template-rows: 2fr 4fr 4fr; } .mosaic-slide--layout-3-x { grid-template-columns: 1fr; grid-template-rows: 4fr 4fr 2fr; } @media (min-width: 1024px) { .mosaic-slide--layout-3-s { grid-template-columns: 3fr 3fr 3fr; grid-template-rows: 1fr; } .mosaic-slide--layout-3-t { grid-template-columns: 3fr 3fr 4fr; grid-template-rows: 1fr; } .mosaic-slide--layout-3-u { grid-template-columns: 4fr 3fr 3fr; grid-template-rows: 1fr; } .mosaic-slide--layout-3-v { grid-template-columns: 3fr 4fr 3fr; grid-template-rows: 1fr; } .mosaic-slide--layout-3-w { grid-template-columns: 2fr 4fr 4fr; grid-template-rows: 1fr; } .mosaic-slide--layout-3-x { grid-template-columns: 4fr 4fr 2fr; grid-template-rows: 1fr; } } /* —————————————————————————————————————————— SPECIAL ADJUSTMENTS SET HEIGHT TO AUTO FOR GALLERY 3 ON HISTORY PAGE TO ACCOMMODATE SINGLE IMAGE DELETE IF NOT NEEDED —————————————————————————————————————————— */ .page-template-tpl-history .ds-mosaic--3 { height: auto; min-height: unset; grid-column: 1 / span 12; } .page-template-tpl-history .ds-mosaic--3 .mosaic-slide { position: relative; height: auto; display: block; } .page-template-tpl-history .ds-mosaic--3 .mosaic-slide__cell { height: auto; overflow: visible; display: block; } .page-template-tpl-history .ds-mosaic--3 .mosaic-slide--single .mosaic-pos--cc img { width: 100%; height: auto; max-height: unset; object-fit: unset; display: block; }