#gradients{display:grid;grid-template-rows:1fr 1fr 1fr;grid-template-areas:"input input" "output output" "dark light"}@media(min-width:576px){#gradients{grid-template-columns:min-content auto min-content;grid-template-rows:1fr 1fr;grid-template-areas:". input ." "dark output light";gap:0 .5rem}}#input-gradient{grid-area:input;background:linear-gradient(to right,#000,#fff)}#output-gradient{grid-area:output;background:linear-gradient(to right,var(--color1),var(--color2))}#color1{grid-area:dark;justify-self:start}#color2{grid-area:light;justify-self:end}#preview{display:block;max-width:100%;max-height:100vh;height:auto}#drop-target{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0003;border:10px dashed currentColor}