.mdiy-how-hero{background:var(--mdiy-white);color:var(--mdiy-ink)}.mdiy-how-hero__grid{display:grid;min-height:clamp(660px,82vh,900px);grid-template-columns:minmax(0,.88fr) minmax(520px,1.12fr);align-items:center;gap:clamp(42px,7vw,108px);padding-block:clamp(72px,8vw,120px)}.mdiy-how-hero__content{display:grid;align-content:center;gap:28px}.mdiy-how-hero h1{max-width:760px;margin:0;font-size:clamp(52px,6.4vw,98px);font-weight:700;line-height:.92;letter-spacing:-.06em}.mdiy-how-hero .mdiy-copy{max-width:700px}.mdiy-how-hero__facts{display:grid;margin:22px 0 0;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--mdiy-gray-300);border-bottom:1px solid var(--mdiy-gray-300)}.mdiy-how-hero__facts>div{padding:19px 16px 19px 0}.mdiy-how-hero__facts>div+div{padding-left:16px;border-left:1px solid var(--mdiy-gray-300)}.mdiy-how-hero__facts dt{margin-bottom:8px;color:var(--mdiy-gray-600);font-size:9px;font-weight:700;letter-spacing:.15em}.mdiy-how-hero__facts dd{margin:0;font-size:clamp(14px,1.25vw,18px);font-weight:700;letter-spacing:.02em}.mdiy-how-hero__visual{padding:clamp(20px,3vw,40px);background:var(--mdiy-gray-100);border:1px solid var(--mdiy-gray-300)}.mdiy-how-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:10px}.mdiy-how-flow__stage{display:grid;gap:10px}.mdiy-how-flow__index{color:var(--mdiy-gray-600);font-size:9px;font-weight:700;letter-spacing:.14em}.mdiy-how-flow__graphic{display:grid;aspect-ratio:1 / 1;grid-template-columns:repeat(5,1fr);gap:1px;padding:10%;background:var(--mdiy-white);border:1px solid var(--mdiy-gray-300)}.mdiy-how-flow__graphic i{display:block;background:#d9dde0}.mdiy-how-flow__stage--1 .mdiy-how-flow__graphic i:nth-child(3n),.mdiy-how-flow__stage--1 .mdiy-how-flow__graphic i:nth-child(7n){background:var(--mdiy-red)}.mdiy-how-flow__stage--2 .mdiy-how-flow__graphic{padding:0}.mdiy-how-flow__stage--2 .mdiy-how-flow__graphic i{background:var(--mdiy-white);outline:1px solid #d7dadd}.mdiy-how-flow__stage--2 .mdiy-how-flow__graphic i:nth-child(4n){background:var(--mdiy-blue)}.mdiy-how-flow__stage--3 .mdiy-how-flow__graphic{padding:6%;background:var(--mdiy-black)}.mdiy-how-flow__stage--3 .mdiy-how-flow__graphic i{background:#f0f1f2}.mdiy-how-flow__stage--3 .mdiy-how-flow__graphic i:nth-child(6n){background:var(--mdiy-yellow)}.mdiy-how-flow__stage--4 .mdiy-how-flow__graphic i:nth-child(-n+12){background:var(--mdiy-black)}.mdiy-how-flow__stage--4 .mdiy-how-flow__graphic i:nth-child(4n){background:var(--mdiy-green)}.mdiy-how-flow__stage--5 .mdiy-how-flow__graphic{padding:3%;background:var(--mdiy-black)}.mdiy-how-flow__stage--5 .mdiy-how-flow__graphic i:nth-child(3n){background:var(--mdiy-violet)}.mdiy-how-flow__stage--5 .mdiy-how-flow__graphic i:nth-child(5n){background:var(--mdiy-red)}.mdiy-how-flow__stage strong{font-size:clamp(9px,.8vw,12px);letter-spacing:.1em}.mdiy-how-flow__arrow{color:var(--mdiy-gray-600);font-size:16px}.mdiy-how-hero__visual-label{margin:clamp(28px,4vw,52px) 0 0;padding-top:16px;border-top:1px solid var(--mdiy-gray-300);font-size:9px;font-weight:700;letter-spacing:.15em}.mdiy-how-stages{background:var(--mdiy-white)}.mdiy-how-stages__list{border-top:1px solid var(--mdiy-gray-300)}.mdiy-how-stage{display:grid;grid-template-columns:minmax(320px,.76fr) minmax(0,1.24fr);gap:clamp(38px,7vw,110px);align-items:center;padding-block:clamp(48px,6.5vw,96px);border-bottom:1px solid var(--mdiy-gray-300)}.mdiy-how-stage:nth-child(2n) .mdiy-how-stage__visual{order:2}.mdiy-how-stage__visual{position:relative;width:min(100%,540px)}.mdiy-how-stage__number{position:absolute;z-index:2;top:14px;left:14px;padding:8px 9px;background:var(--mdiy-black);color:var(--mdiy-white);font-size:9px;font-weight:700;letter-spacing:.14em}.mdiy-how-stage__pixels{display:grid;aspect-ratio:1 / .78;grid-template-columns:repeat(8,1fr);gap:1px;padding:8%;background:var(--mdiy-gray-100)}.mdiy-how-stage__pixels i{display:block;background:#d9dde0}.mdiy-how-stage--image .mdiy-how-stage__pixels i:nth-child(3n),.mdiy-how-stage--image .mdiy-how-stage__pixels i:nth-child(7n){background:var(--mdiy-red)}.mdiy-how-stage--image .mdiy-how-stage__pixels i:nth-child(11n){background:var(--mdiy-yellow)}.mdiy-how-stage--grid .mdiy-how-stage__pixels{padding:0}.mdiy-how-stage--grid .mdiy-how-stage__pixels i{background:var(--mdiy-white);outline:1px solid #d5d9dc}.mdiy-how-stage--grid .mdiy-how-stage__pixels i:nth-child(5n){background:var(--mdiy-blue)}.mdiy-how-stage--module .mdiy-how-stage__pixels{grid-template-columns:repeat(4,1fr);gap:5px;padding:5%;background:var(--mdiy-black)}.mdiy-how-stage--module .mdiy-how-stage__pixels i{background:#f2f3f3}.mdiy-how-stage--module .mdiy-how-stage__pixels i:nth-child(5n){background:var(--mdiy-yellow)}.mdiy-how-stage--build .mdiy-how-stage__pixels i:nth-child(-n+36){background:var(--mdiy-black)}.mdiy-how-stage--build .mdiy-how-stage__pixels i:nth-child(6n){background:var(--mdiy-green)}.mdiy-how-stage--art .mdiy-how-stage__pixels{padding:3%;background:var(--mdiy-black)}.mdiy-how-stage--art .mdiy-how-stage__pixels i:nth-child(3n){background:var(--mdiy-violet)}.mdiy-how-stage--art .mdiy-how-stage__pixels i:nth-child(5n){background:var(--mdiy-red)}.mdiy-how-stage--art .mdiy-how-stage__pixels i:nth-child(7n){background:var(--mdiy-yellow)}.mdiy-how-stage__content{display:grid;gap:20px;max-width:760px}.mdiy-how-stage__code{margin:0;color:var(--mdiy-gray-600);font-size:10px;font-weight:700;letter-spacing:.16em}.mdiy-how-stage h3{margin:0;font-size:clamp(34px,4vw,62px);line-height:1;letter-spacing:-.04em}.mdiy-how-stage__io{display:grid;margin:14px 0 0;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--mdiy-gray-300);border-bottom:1px solid var(--mdiy-gray-300)}.mdiy-how-stage__io>div{padding:18px 18px 18px 0}.mdiy-how-stage__io>div+div{padding-left:18px;border-left:1px solid var(--mdiy-gray-300)}.mdiy-how-stage__io dt{margin-bottom:7px;color:var(--mdiy-gray-600);font-size:9px;font-weight:700;letter-spacing:.14em}.mdiy-how-stage__io dd{margin:0;font-size:12px;font-weight:700;letter-spacing:.04em}.mdiy-how-data{background:var(--mdiy-gray-100)}.mdiy-how-data__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr);gap:clamp(46px,8vw,130px);align-items:start}.mdiy-how-data__intro{display:grid;gap:24px;position:sticky;top:120px}.mdiy-how-data h2{margin:0;font-size:clamp(40px,5vw,72px);line-height:.98;letter-spacing:-.045em}.mdiy-how-data__equation{display:flex;align-items:center;flex-wrap:wrap;gap:11px;margin-top:16px;padding:22px 0;border-top:1px solid #cbd0d3;border-bottom:1px solid #cbd0d3;font-size:clamp(12px,1.2vw,16px);font-weight:700;letter-spacing:.08em}.mdiy-how-data__equation b{color:var(--mdiy-gray-600);font-weight:400}.mdiy-how-data__panel{padding:clamp(28px,4vw,52px);background:var(--mdiy-black);color:var(--mdiy-white)}.mdiy-how-data__panel-label{margin:0 0 28px;color:#aeb4b8;font-size:9px;font-weight:700;letter-spacing:.16em}.mdiy-how-data__panel dl{margin:0;border-top:1px solid #414141}.mdiy-how-data__panel dl>div{display:grid;grid-template-columns:minmax(120px,.7fr) minmax(110px,.75fr) minmax(0,1.4fr);gap:16px;align-items:center;padding:22px 0;border-bottom:1px solid #414141}.mdiy-how-data__panel dt{color:#9ca2a6;font-size:9px;font-weight:700;letter-spacing:.14em}.mdiy-how-data__panel dd{margin:0;font-size:clamp(16px,1.5vw,22px);font-weight:700}.mdiy-how-data__panel dl p{margin:0;color:#aeb4b8;font-size:12px;line-height:1.45}.mdiy-how-data__note{margin-top:24px;color:#aeb4b8;font-size:12px;line-height:1.55}.mdiy-how-data__note p{margin:0}.mdiy-how-routes{background:var(--mdiy-white)}.mdiy-how-routes__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.mdiy-how-route{display:grid;min-height:560px;grid-template-rows:auto auto auto 1fr auto;gap:20px;padding:clamp(24px,3vw,38px);border:1px solid var(--mdiy-gray-300);transition:transform .2s ease,border-color .2s ease}.mdiy-how-route:hover{transform:translateY(-4px);border-color:var(--mdiy-black)}.mdiy-how-route__top{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-bottom:22px;border-bottom:1px solid var(--mdiy-gray-300)}.mdiy-how-route__top span,.mdiy-how-route__top p{margin:0;font-size:9px;font-weight:700;letter-spacing:.14em}.mdiy-how-route__top p{color:var(--mdiy-gray-600)}.mdiy-how-route h3{margin:18px 0 0;font-size:clamp(28px,2.7vw,42px);line-height:1.02;letter-spacing:-.035em}.mdiy-how-route dl{align-self:end;margin:10px 0 0;border-top:1px solid var(--mdiy-gray-300)}.mdiy-how-route dl>div{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--mdiy-gray-300)}.mdiy-how-route dt{color:var(--mdiy-gray-600);font-size:8px;font-weight:700;letter-spacing:.13em}.mdiy-how-route dd{margin:0;font-size:11px;font-weight:700;letter-spacing:.035em}.mdiy-how-route--designs{box-shadow:inset 0 4px 0 var(--mdiy-blue)}.mdiy-how-route--custom{box-shadow:inset 0 4px 0 var(--mdiy-red)}.mdiy-how-route--mural{box-shadow:inset 0 4px 0 var(--mdiy-green)}.mdiy-how-principles{background:var(--mdiy-black);color:var(--mdiy-white)}.mdiy-how-principles__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #414141}.mdiy-how-principles__grid article{min-height:300px;padding:24px 24px 24px 0;border-bottom:1px solid #414141}.mdiy-how-principles__grid article+article{padding-left:24px;border-left:1px solid #414141}.mdiy-how-principles__index{color:#898f93;font-size:9px;font-weight:700;letter-spacing:.14em}.mdiy-how-principles h3{margin:76px 0 16px;font-size:clamp(22px,2.2vw,34px)}.mdiy-how-principles .mdiy-copy{color:#aeb4b8;font-size:14px}.mdiy-how-cta{padding-block:clamp(70px,9vw,128px);background:var(--mdiy-black);color:var(--mdiy-white);border-top:1px solid #414141}.mdiy-how-cta__inner{display:grid;grid-template-columns:minmax(0,1.25fr) auto;gap:44px;align-items:end}.mdiy-how-cta h2{max-width:920px;margin:0 0 20px;font-size:clamp(42px,5vw,76px);line-height:.97;letter-spacing:-.045em}.mdiy-how-cta .mdiy-copy{max-width:720px;color:#aeb4b8}.mdiy-how-cta .mdiy-text-link{color:var(--mdiy-white)}@media(max-width:1100px){.mdiy-how-hero__grid,.mdiy-how-data__grid{grid-template-columns:1fr}.mdiy-how-hero__visual{width:min(100%,860px)}.mdiy-how-data__intro{position:static}.mdiy-how-routes__grid{grid-template-columns:1fr}.mdiy-how-route{min-height:0}.mdiy-how-principles__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mdiy-how-principles__grid article:nth-child(3){padding-left:0;border-left:0}.mdiy-how-cta__inner{grid-template-columns:1fr;align-items:start}}@media(max-width:760px){.mdiy-how-hero__grid{min-height:0;padding-block:54px 68px}.mdiy-how-hero h1{font-size:clamp(48px,15vw,68px)}.mdiy-how-hero__facts{grid-template-columns:1fr}.mdiy-how-hero__facts>div+div{padding-left:0;border-top:1px solid var(--mdiy-gray-300);border-left:0}.mdiy-how-flow{grid-template-columns:1fr}.mdiy-how-flow__stage{grid-template-columns:30px 74px 1fr;align-items:center}.mdiy-how-flow__graphic{width:74px}.mdiy-how-flow__arrow{display:none}.mdiy-how-stage,.mdiy-how-stage:nth-child(2n){grid-template-columns:1fr;gap:28px}.mdiy-how-stage:nth-child(2n) .mdiy-how-stage__visual{order:initial}.mdiy-how-stage__visual{width:100%}.mdiy-how-stage__io{grid-template-columns:1fr}.mdiy-how-stage__io>div+div{padding-left:0;border-top:1px solid var(--mdiy-gray-300);border-left:0}.mdiy-how-data__panel dl>div{grid-template-columns:1fr 1fr}.mdiy-how-data__panel dl p{grid-column:1 / -1}.mdiy-how-principles__grid{grid-template-columns:1fr}.mdiy-how-principles__grid article,.mdiy-how-principles__grid article+article,.mdiy-how-principles__grid article:nth-child(3){min-height:0;padding:24px 0;border-left:0}.mdiy-how-principles h3{margin-top:44px}.mdiy-how-route dl>div{grid-template-columns:90px 1fr}.mdiy-how-cta .mdiy-actions,.mdiy-how-cta .mdiy-button{width:100%}}
/*# sourceMappingURL=/cdn/shop/t/25/assets/mosaicdiy-how.css.map */