/* Video to GIF — the result panel */

.gif-result{
  display:grid;
  grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:18px 22px;
  align-items:center;
  padding:18px 20px;
  border-top:1px solid var(--rule);
  background:var(--accent-soft);
}
.gif-result img{
  max-width:100%;max-height:220px;display:block;
  border-radius:var(--radius-sm);
  /* The checkerboard is how you can tell a transparent GIF from a white one. */
  background-image:
    linear-gradient(45deg,rgba(128,128,128,.22) 25%,transparent 25%),
    linear-gradient(-45deg,rgba(128,128,128,.22) 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,rgba(128,128,128,.22) 75%),
    linear-gradient(-45deg,transparent 75%,rgba(128,128,128,.22) 75%);
  background-size:16px 16px;
  background-position:0 0,0 8px,8px -8px,-8px 0;
}
.gif-result .result-figs{display:flex;gap:22px;flex-wrap:wrap;}
.gif-result .btn{grid-column:2;justify-self:start;}

@media (max-width:620px){
  .gif-result{grid-template-columns:1fr;}
  .gif-result .btn{grid-column:1;}
}