element. Each layout variant has its own CSS below. ========================================================================== */ /* ---------- Hero layouts ---------- .dh-hero--split (default): text left + stat card right .dh-hero--centered: text centered, no stat card .dh-hero--full-width: text centered, full-width bg image .dh-hero--minimal: text only, no bg image, no card .dh-hero--video: video background instead of image */ .dh-hero--centered .dh-hero-inner { flex-direction: column; align-items: center; text-align: center; } .dh-hero--centered .dh-hero-copy { max-width: 760px; } .dh-hero--centered .dh-hero-actions { justify-content: center; } .dh-hero--centered .dh-hero-card { display: none; } .dh-hero--centered .dh-eyebrow, .dh-hero--centered .dh-hero-title, .dh-hero--centered .dh-hero-sub { margin-left: auto; margin-right: auto; } .dh-hero--full-width { min-height: 100vh; } .dh-hero--full-width .dh-hero-img { opacity: .6; } .dh-hero--full-width .dh-hero-card { display: none; } .dh-hero--full-width .dh-hero-copy { max-width: 800px; margin: 0 auto; text-align: center; } .dh-hero--full-width .dh-hero-actions { justify-content: center; } .dh-hero--minimal { min-height: auto; padding: calc(var(--header-h) + 80px) 0 60px; } .dh-hero--minimal .dh-hero-bg { display: none; } .dh-hero--minimal .dh-hero-card { display: none; } .dh-hero--minimal .dh-hero-copy { max-width: 800px; } .dh-hero--video .dh-hero-img { display: none; } .dh-hero--video .dh-hero-overlay { background: rgba(0,0,0,.4); } .dh-hero--video .dh-hero-copy { color: #fff; } .dh-hero--video .dh-hero-sub { color: rgba(255,255,255,.8); } /* ---------- About layouts ---------- .dh-about--split (default): 2-col grid .dh-about--centered: single column centered .dh-about--cards: 3-col card grid (title + text + stats) */ .dh-about--centered .dh-about-grid { grid-template-columns: 1fr; text-align: center; max-width: 760px; margin: 0 auto; } .dh-about--centered .dh-about-right { padding-top: 0; } .dh-about--centered .dh-lead { margin: 0 auto; } .dh-about--cards .dh-about-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } .dh-about--cards .dh-about-left { grid-column: 1 / -1; text-align: center; margin-bottom: 16px; } .dh-about--cards .dh-about-right { padding-top: 0; } /* ---------- Services layouts ---------- .dh-services--list (default): 2-col rows .dh-services--grid: 3-col card grid .dh-services--cards: 2-col cards with borders */ .dh-services--grid .dh-services-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .dh-services--grid .dh-service-row { display: flex; flex-direction: column; gap: 16px; padding: 28px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); } .dh-services--grid .dh-service-meta { display: contents; } .dh-services--cards .dh-services-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .dh-services--cards .dh-service-row { display: flex; flex-direction: column; gap: 16px; padding: 32px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); box-shadow: 0 10px 30px -15px rgba(0,0,0,.1); } .dh-services--cards .dh-service-meta { display: contents; } /* ---------- Work layouts ---------- .dh-work--grid (default): 2-col grid .dh-work--masonry: CSS columns masonry .dh-work--list: single column full-width cards */ .dh-work--masonry .dh-work-grid { display: block; columns: 2; column-gap: 24px; } .dh-work--masonry .dh-case { break-inside: avoid; margin-bottom: 24px; } .dh-work--list .dh-work-grid { grid-template-columns: 1fr; max-width: 800px; margin: 0 auto; } .dh-work--list .dh-case { display: flex; flex-direction: row; } .dh-work--list .dh-case-image { width: 45%; flex-shrink: 0; aspect-ratio: 16/10; } .dh-work--list .dh-case-body { flex: 1; padding: 28px; } /* ---------- Gallery layouts ---------- .dh-gallery--grid (default): uniform 4/3 grid .dh-gallery--masonry: CSS columns masonry .dh-gallery--slider: horizontal scroll slider */ .dh-gallery--masonry .dh-gallery-grid { display: block; columns: 3; column-gap: 18px; } .dh-gallery--masonry .dh-gallery-item { aspect-ratio: auto; margin-bottom: 18px; } .dh-gallery--slider .dh-gallery-grid { display: flex; overflow-x: auto; gap: 18px; scroll-snap-type: x mandatory; padding-bottom: 12px; } .dh-gallery--slider .dh-gallery-item { flex: 0 0 380px; scroll-snap-align: start; } /* ---------- Testimonials layouts ---------- .dh-testi--grid (default): 2-col card grid + carousel .dh-testi--list: single column stacked .dh-testi--masonry: CSS columns */ .dh-testi--list .dh-testi-grid { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; } .dh-testi--masonry .dh-testi-grid { display: block; columns: 2; column-gap: 22px; } .dh-testi--masonry .dh-testi { break-inside: avoid; margin-bottom: 22px; } /* ---------- Process layouts ---------- .dh-process--timeline (default): 4-col with connector line .dh-process--vertical: vertical timeline .dh-process--cards: 2-col cards */ .dh-process--vertical .dh-process-grid { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; } .dh-process--vertical .dh-process-line { display: none; } .dh-process--vertical .dh-step { display: flex; gap: 20px; align-items: flex-start; padding: 24px 0; border-bottom: 1px solid var(--border); } .dh-process--vertical .dh-step-num { flex-shrink: 0; margin-bottom: 0; } .dh-process--cards .dh-process-grid { grid-template-columns: 1fr 1fr; gap: 20px; } .dh-process--cards .dh-step { padding: 28px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); } .dh-process--cards .dh-process-line { display: none; } /* ---------- FAQ layouts ---------- .dh-faq--sidebar (default): 2-col sidebar + accordion .dh-faq--centered: single column centered .dh-faq--boxed: boxed cards */ .dh-faq--centered .dh-faq-grid { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; } .dh-faq--centered .dh-faq-side { text-align: center; position: static; } .dh-faq--centered .dh-faq-search { max-width: 480px; margin: 22px auto 0; } .dh-faq--boxed .dh-faq-item { border: 1px solid var(--border); border-radius: var(--radius); padding: 0 20px; margin-bottom: 12px; background: var(--bg-card); } .dh-faq--boxed .dh-faq-q { padding: 20px 0; } /* ---------- Contact layouts ---------- .dh-contact--split (default): 2-col info + form .dh-contact--centered: single column centered form .dh-contact--minimal: form only, no info column */ .dh-contact--centered .dh-contact-grid { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; } .dh-contact--centered .dh-contact-left { text-align: center; margin-bottom: 32px; } .dh-contact--centered .dh-contact-links { align-items: center; } .dh-contact--minimal .dh-contact-left { display: none; } .dh-contact--minimal .dh-contact-grid { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; } /* ---------- Responsive ---------- */ @media (max-width: 960px) { .dh-services--grid .dh-services-list, .dh-services--cards .dh-services-list { grid-template-columns: 1fr; } .dh-about--cards .dh-about-grid { grid-template-columns: 1fr; } .dh-work--masonry .dh-work-grid { columns: 1; } .dh-work--list .dh-case { flex-direction: column; } .dh-work--list .dh-case-image { width: 100%; } .dh-gallery--masonry .dh-gallery-grid { columns: 1; } .dh-testi--masonry .dh-testi-grid { columns: 1; } .dh-process--cards .dh-process-grid { grid-template-columns: 1fr; } } /* ========================================================================== v2.3.0 — COMPLETELY NEW multi-layout system for every section. 5 layouts per section, all new designs (replaces old v2.2.0 layouts). Select via Theme Options → each section tab → Layout radio. ========================================================================== */ /* ============ HERO — 5 LAYOUTS ============ */ /* Layout 1: dh-hero--split (default) — text left + glass card right */ /* (already defined above, kept as default) */ /* Layout 2: dh-hero--centered — big centered headline, no card */ .dh-hero--centered .dh-hero-inner { flex-direction: column; align-items: center; text-align: center; } .dh-hero--centered .dh-hero-copy { max-width: 820px; } .dh-hero--centered .dh-hero-actions { justify-content: center; } .dh-hero--centered .dh-hero-card { display: none; } /* Layout 3: dh-hero--fullscreen — full viewport, image prominent */ .dh-hero--fullscreen { min-height: 100vh; } .dh-hero--fullscreen .dh-hero-img { opacity: .55; } .dh-hero--fullscreen .dh-hero-overlay { background: linear-gradient(180deg, transparent 0%, transparent 40%, var(--bg) 95%); } .dh-hero--fullscreen .dh-hero-card { display: none; } .dh-hero--fullscreen .dh-hero-copy { max-width: 800px; margin: 0 auto; text-align: center; } .dh-hero--fullscreen .dh-hero-actions { justify-content: center; } /* Layout 4: dh-hero--minimal — no bg image, clean text only */ .dh-hero--minimal { min-height: auto; padding: calc(var(--header-h) + 100px) 0 80px; background: var(--bg-alt); } .dh-hero--minimal .dh-hero-bg { display: none; } .dh-hero--minimal .dh-hero-card { display: none; } .dh-hero--minimal .dh-hero-copy { max-width: 760px; } /* Layout 5: dh-hero--magazine — text overlaid on image, bottom-left */ .dh-hero--magazine { min-height: 90vh; } .dh-hero--magazine .dh-hero-img { opacity: .65; } .dh-hero--magazine .dh-hero-overlay { background: linear-gradient(135deg, rgba(0,0,0,.5) 0%, transparent 60%); } .dh-hero--magazine .dh-hero-inner { align-items: flex-end; } .dh-hero--magazine .dh-hero-copy { color: #fff; } .dh-hero--magazine .dh-hero-sub { color: rgba(255,255,255,.85); } .dh-hero--magazine .dh-eyebrow { color: var(--amber); } .dh-hero--magazine .dh-hero-card { display: none; } /* ============ ABOUT — 5 LAYOUTS ============ */ /* Layout 1: dh-about--split (default) — 2-col label/title + text */ /* (already defined) */ /* Layout 2: dh-about--centered — single column centered */ .dh-about--centered .dh-about-grid { grid-template-columns: 1fr; text-align: center; max-width: 760px; margin: 0 auto; } .dh-about--centered .dh-about-right { padding-top: 0; } /* Layout 3: dh-about--cards — 3-col card grid */ .dh-about--cards .dh-about-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } .dh-about--cards .dh-about-left { grid-column: 1 / -1; text-align: center; margin-bottom: 16px; } .dh-about--cards .dh-about-right { padding-top: 0; } /* Layout 4: dh-about--banner — full-width accent bg + centered text */ .dh-about--banner { background: var(--accent); color: #fff; } .dh-about--banner .dh-about-grid { grid-template-columns: 1fr; text-align: center; max-width: 800px; margin: 0 auto; } .dh-about--banner .dh-label { color: rgba(255,255,255,.7); } .dh-about--banner .dh-h2 { color: #fff; } .dh-about--banner .dh-lead { color: rgba(255,255,255,.85); } /* Layout 5: dh-about--quote — large italic quote style */ .dh-about--quote .dh-about-grid { grid-template-columns: 1fr; text-align: center; max-width: 820px; margin: 0 auto; } .dh-about--quote .dh-h2 { font-size: clamp(28px, 4vw, 44px); font-style: italic; } .dh-about--quote .dh-lead { font-size: 18px; margin-top: 24px; } /* ============ SERVICES — 5 LAYOUTS ============ */ /* Layout 1: dh-services--list (default) — 2-col rows */ /* (already defined) */ /* Layout 2: dh-services--grid — 3-col card grid */ .dh-services--grid .dh-services-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .dh-services--grid .dh-service-row { display: flex; flex-direction: column; gap: 16px; padding: 32px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .dh-services--grid .dh-service-row:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(0,0,0,.15); border-color: var(--accent); } .dh-services--grid .dh-service-meta { display: contents; } /* Layout 3: dh-services--cards — 2-col cards with shadow */ .dh-services--cards .dh-services-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .dh-services--cards .dh-service-row { display: flex; flex-direction: column; gap: 16px; padding: 36px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); box-shadow: 0 10px 30px -15px rgba(0,0,0,.12); } .dh-services--cards .dh-service-meta { display: contents; } /* Layout 4: dh-services--tabs — horizontal scroll tabs */ .dh-services--tabs .dh-services-list { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x mandatory; } .dh-services--tabs .dh-service-row { flex: 0 0 360px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 16px; padding: 28px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); } .dh-services--tabs .dh-service-meta { display: contents; } /* Layout 5: dh-services--minimal — no borders, just text + number */ .dh-services--minimal .dh-services-list { display: grid; grid-template-columns: 1fr; gap: 0; } .dh-services--minimal .dh-service-row { display: grid; grid-template-columns: 60px 1fr; gap: 32px; padding: 32px 0; border-bottom: 1px solid var(--border); } .dh-services--minimal .dh-service-meta { display: contents; } .dh-services--minimal .dh-features { display: none; } /* ============ WORK — 5 LAYOUTS ============ */ /* Layout 1: dh-work--grid (default) — 2-col grid */ /* (already defined) */ /* Layout 2: dh-work--masonry — CSS columns masonry */ .dh-work--masonry .dh-work-grid { display: block; columns: 2; column-gap: 24px; } .dh-work--masonry .dh-case { break-inside: avoid; margin-bottom: 24px; } /* Layout 3: dh-work--list — horizontal cards (image left, text right) */ .dh-work--list .dh-work-grid { grid-template-columns: 1fr; max-width: 820px; margin: 0 auto; } .dh-work--list .dh-case { display: flex; flex-direction: row; } .dh-work--list .dh-case-image { width: 45%; flex-shrink: 0; aspect-ratio: 16/10; } .dh-work--list .dh-case-body { flex: 1; padding: 28px; } /* Layout 4: dh-work--featured — first card full-width, rest 2-col */ .dh-work--featured .dh-work-grid { grid-template-columns: 1fr; } .dh-work--featured .dh-case:first-child { grid-column: 1 / -1; display: flex; flex-direction: row; } .dh-work--featured .dh-case:first-child .dh-case-image { width: 55%; flex-shrink: 0; } .dh-work--featured .dh-case:first-child .dh-case-body { flex: 1; padding: 40px; } .dh-work--featured .dh-case:not(:first-child) { display: inline-block; width: 48%; vertical-align: top; margin-right: 2%; } /* Layout 5: dh-work--carousel — horizontal scroll snap */ .dh-work--carousel .dh-work-grid { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; } .dh-work--carousel .dh-case { flex: 0 0 460px; scroll-snap-align: start; } /* ============ GALLERY — 5 LAYOUTS ============ */ /* Layout 1: dh-gallery--grid (default) — uniform 4/3 grid */ /* (already defined) */ /* Layout 2: dh-gallery--masonry — CSS columns */ .dh-gallery--masonry .dh-gallery-grid { display: block; columns: 3; column-gap: 18px; } .dh-gallery--masonry .dh-gallery-item { aspect-ratio: auto; margin-bottom: 18px; } /* Layout 3: dh-gallery--slider — horizontal scroll */ .dh-gallery--slider .dh-gallery-grid { display: flex; overflow-x: auto; gap: 18px; scroll-snap-type: x mandatory; padding-bottom: 12px; } .dh-gallery--slider .dh-gallery-item { flex: 0 0 380px; scroll-snap-align: start; } /* Layout 4: dh-gallery--mosaic — varied tile sizes */ .dh-gallery--mosaic .dh-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; gap: 12px; } .dh-gallery--mosaic .dh-gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 2; } .dh-gallery--mosaic .dh-gallery-item:nth-child(4) { grid-column: span 2; } .dh-gallery--mosaic .dh-gallery-item:nth-child(6) { grid-row: span 2; } /* Layout 5: dh-gallery--fullscreen — full-width tiles */ .dh-gallery--fullscreen .dh-gallery-grid { grid-template-columns: 1fr 1fr; gap: 4px; } .dh-gallery--fullscreen .dh-gallery-item { aspect-ratio: 21/9; border-radius: 0; } /* ============ TESTIMONIALS — 5 LAYOUTS ============ */ /* Layout 1: dh-testi--grid (default) — 2-col card grid + carousel */ /* (already defined) */ /* Layout 2: dh-testi--list — single column stacked */ .dh-testi--list .dh-testi-grid { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; } /* Layout 3: dh-testi--masonry — CSS columns */ .dh-testi--masonry .dh-testi-grid { display: block; columns: 2; column-gap: 22px; } .dh-testi--masonry .dh-testi { break-inside: avoid; margin-bottom: 22px; } /* Layout 4: dh-testi--banner — accent bg, centered quotes */ .dh-testi--banner { background: var(--accent); color: #fff; } .dh-testi--banner .dh-label { color: rgba(255,255,255,.7); } .dh-testi--banner .dh-h2 { color: #fff; } .dh-testi--banner .dh-testi { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); } .dh-testi--banner .dh-testi-text { color: #fff; } .dh-testi--banner .dh-testi-author strong { color: #fff; } .dh-testi--banner .dh-testi-author small { color: rgba(255,255,255,.7); } /* Layout 5: dh-testi--minimal — text only, no cards */ .dh-testi--minimal .dh-testi { background: none; border: 0; padding: 0 0 32px; box-shadow: none; } .dh-testi--minimal .dh-testi-text { font-size: clamp(18px, 2.4vw, 26px); } /* ============ PROCESS — 5 LAYOUTS ============ */ /* Layout 1: dh-process--timeline (default) — 4-col with connector */ /* (already defined) */ /* Layout 2: dh-process--vertical — vertical timeline */ .dh-process--vertical .dh-process-grid { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; } .dh-process--vertical .dh-process-line { display: none; } .dh-process--vertical .dh-step { display: flex; gap: 20px; align-items: flex-start; padding: 24px 0; border-bottom: 1px solid var(--border); } .dh-process--vertical .dh-step-num { flex-shrink: 0; margin-bottom: 0; } /* Layout 3: dh-process--cards — 2-col cards */ .dh-process--cards .dh-process-grid { grid-template-columns: 1fr 1fr; gap: 20px; } .dh-process--cards .dh-step { padding: 28px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); } .dh-process--cards .dh-process-line { display: none; } /* Layout 4: dh-process--numbered — big numbers, no circles */ .dh-process--numbered .dh-process-line { display: none; } .dh-process--numbered .dh-step-num { width: auto; height: auto; border: 0; background: none; border-radius: 0; font-size: clamp(48px, 6vw, 72px); opacity: .12; } /* Layout 5: dh-process--steps — horizontal stepper with arrows */ .dh-process--steps .dh-process-grid { grid-template-columns: 1fr; max-width: 800px; margin: 0 auto; } .dh-process--steps .dh-process-line { display: none; } .dh-process--steps .dh-step { display: grid; grid-template-columns: 60px 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--border); align-items: center; } /* ============ FAQ — 5 LAYOUTS ============ */ /* Layout 1: dh-faq--sidebar (default) — 2-col sidebar + accordion */ /* (already defined) */ /* Layout 2: dh-faq--centered — single column centered */ .dh-faq--centered .dh-faq-grid { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; } .dh-faq--centered .dh-faq-side { text-align: center; position: static; } .dh-faq--centered .dh-faq-search { max-width: 480px; margin: 22px auto 0; } /* Layout 3: dh-faq--boxed — boxed cards */ .dh-faq--boxed .dh-faq-item { border: 1px solid var(--border); border-radius: var(--radius); padding: 0 20px; margin-bottom: 12px; background: var(--bg-card); } .dh-faq--boxed .dh-faq-q { padding: 20px 0; } /* Layout 4: dh-faq--grid — 2-col accordion grid */ .dh-faq--grid .dh-faq-grid { grid-template-columns: 1fr; } .dh-faq--grid .dh-faq-side { display: none; } .dh-faq--grid .dh-faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* Layout 5: dh-faq--minimal — no borders, clean text */ .dh-faq--minimal .dh-faq-grid { grid-template-columns: 1fr; max-width: 720px; margin: 0 auto; } .dh-faq--minimal .dh-faq-side { display: none; } .dh-faq--minimal .dh-faq-item { border: 0; border-bottom: 1px solid var(--border); } .dh-faq--minimal .dh-faq-q { padding: 20px 0; } /* ============ CONTACT — 5 LAYOUTS ============ */ /* Layout 1: dh-contact--split (default) — 2-col info + form */ /* (already defined) */ /* Layout 2: dh-contact--centered — single column centered form */ .dh-contact--centered .dh-contact-grid { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; } .dh-contact--centered .dh-contact-left { text-align: center; margin-bottom: 32px; } .dh-contact--centered .dh-contact-links { align-items: center; } /* Layout 3: dh-contact--minimal — form only */ .dh-contact--minimal .dh-contact-left { display: none; } .dh-contact--minimal .dh-contact-grid { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; } /* Layout 4: dh-contact--banner — accent bg, white form */ .dh-contact--banner { background: var(--accent); color: #fff; } .dh-contact--banner .dh-label { color: rgba(255,255,255,.7); } .dh-contact--banner .dh-h2 { color: #fff; } .dh-contact--banner .dh-lead { color: rgba(255,255,255,.85); } .dh-contact--banner .dh-contact-link { color: #fff; border-color: rgba(255,255,255,.2); } .dh-contact--banner .dh-form { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); backdrop-filter: blur(10px); } .dh-contact--banner .dh-form-row label { color: rgba(255,255,255,.7); } .dh-contact--banner .dh-form-row input, .dh-contact--banner .dh-form-row select, .dh-contact--banner .dh-form-row textarea { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.2); color: #fff; } /* Layout 5: dh-contact--split-reverse — form left, info right */ .dh-contact--split-reverse .dh-contact-grid { direction: rtl; } .dh-contact--split-reverse .dh-contact-grid > * { direction: ltr; } /* ============ RESPONSIVE ============ */ @media (max-width: 960px) { .dh-services--grid .dh-services-list, .dh-services--cards .dh-services-list { grid-template-columns: 1fr; } .dh-services--tabs .dh-service-row { flex: 0 0 280px; } .dh-about--cards .dh-about-grid { grid-template-columns: 1fr; } .dh-work--masonry .dh-work-grid { columns: 1; } .dh-work--list .dh-case { flex-direction: column; } .dh-work--list .dh-case-image { width: 100%; } .dh-work--featured .dh-case:first-child { flex-direction: column; } .dh-work--featured .dh-case:first-child .dh-case-image { width: 100%; } .dh-work--carousel .dh-case { flex: 0 0 300px; } .dh-gallery--masonry .dh-gallery-grid { columns: 1; } .dh-gallery--mosaic .dh-gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 140px; } .dh-gallery--mosaic .dh-gallery-item:nth-child(1) { grid-column: span 2; } .dh-testi--masonry .dh-testi-grid { columns: 1; } .dh-process--cards .dh-process-grid { grid-template-columns: 1fr; } .dh-faq--grid .dh-faq-list { grid-template-columns: 1fr; } .dh-contact--split-reverse .dh-contact-grid { direction: ltr; } } /* ========================================================================== v3.0.0 — NEW LAYOUTS (7-8 per section, on top of the existing v2.3.0 5). Each new layout is selectable in the Theme Options panel (per-section tab → Layout radio). The class is output on the

element by the matching template part. ========================================================================== */ /* ============ HERO — 2 NEW LAYOUTS (v3.0.0) ============ */ /* Layout 6: dh-hero--video-bg — video background placeholder. The hero image is replaced by a