/* Templates page "from template to your website": head, controls and steps on the left, the split view on the right
   (controls and split view come from digotech/template-showcase in split mode; its wrapper lets them join this grid). */
.gd-mk__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:1fr auto auto auto 1fr;grid-template-areas:". split" "head split" "ctl split" "steps split" ". split";gap:var(--s-6) var(--gap-col)}
.gd-mk__in > *{margin:0}
.gd-mk__head{grid-area:head;display:grid;gap:var(--gap-text);max-width:var(--measure)}
.gd-mk__head > *{margin:0}
.gd-mk__head h2{font-size:var(--t-2xl)}
.gd-mk__head h2 strong{font-weight:inherit;color:var(--accent)}
.gd-mk__head p{font-size:var(--t-m);color:var(--ink-2)}
.gd-mk .gd-mk__ctl{grid-area:ctl}
.gd-mk .gd-mk__cap{grid-area:ctl;justify-self:start;display:inline-flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-3);border:1px dashed var(--rule);border-radius:var(--r);font-size:var(--t-s);color:var(--ink-2)} /* compare mode has no controls: its caption, a hint to drag, takes their place */
.gd-mk .gd-mk__cap::before{content:"";flex:none;width:var(--icon-s);height:var(--icon-s);background:var(--accent);-webkit-mask:url(../../../icons/arrows-h.svg?ver=1606846f) center / contain no-repeat;mask:url(../../../icons/arrows-h.svg?ver=1606846f) center / contain no-repeat}
.gd-mk .gd-split{grid-area:split;align-self:center}
/* compare: as tall as the left column (the screenshots show more of each page); before on the left, after (accent) on the right */
.gd-mk .gd-split--img{align-self:stretch;min-height:calc(var(--s-9) * 5)}
.gd-mk .gd-split--img > .gd-split__a{aspect-ratio:auto;height:100%}
.gd-mk .is-compare .gd-split__tag--b{background:var(--ink);color:var(--paper)}
.gd-mk .is-compare .gd-split__tag--a{background:var(--accent-fill);color:var(--on-accent)}
/* steps: a timeline — numbered dots joined by a dashed line; the dot fills with the accent on hover */
.gd-mk .gd-steps{--gd-dot:var(--ctl);grid-area:steps;display:grid;padding:0;list-style:none;counter-reset:gd-step}
.gd-steps li{position:relative;display:grid;grid-template-columns:var(--gd-dot) minmax(0,1fr);column-gap:var(--s-4);row-gap:var(--s-1);margin:0;padding:0 0 var(--s-5);counter-increment:gd-step;font-size:var(--t-s);color:var(--ink-2)}
.gd-steps li:last-child{padding-bottom:0}
.gd-steps li::before{content:counter(gd-step, decimal-leading-zero);grid-row:1 / span 2;display:grid;place-items:center;width:var(--gd-dot);height:var(--gd-dot);border:1px solid var(--rule);border-radius:50%;background:var(--card);font:600 var(--t-s)/1 var(--font-mono);color:var(--accent);transition:background-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out)}
.gd-steps li::after{content:"";position:absolute;top:var(--gd-dot);bottom:0;left:calc(var(--gd-dot) / 2);border-left:1px dashed var(--rule)}
.gd-steps li:last-child::after{display:none}
.gd-steps li:hover::before{border-color:var(--accent-fill);background:var(--accent-fill);color:var(--on-accent)}
.gd-steps strong{align-self:center;min-height:var(--gd-dot);display:flex;align-items:center;font:700 var(--t-l)/1.25 var(--font-display);color:var(--ink)}

@media (max-width: 991px){
  .gd-mk__in{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"head" "ctl" "steps" "split";column-gap:0}
  .gd-mk .gd-split--img{min-height:0}
  .gd-mk .gd-split--img > .gd-split__a{aspect-ratio:4 / 5;height:auto}
}