/* Mobile alignment and an independently scrolling Meme Card viewer. */
@media (max-width:800px){
  .card,
  .card:nth-child(even){
    height:auto;
    min-height:0;
    aspect-ratio:auto;
    align-items:end;
  }

  .art-frame{
    align-items:end;
    justify-items:center;
  }

  .label{
    align-self:end;
  }

  dialog{
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
  }

  dialog[open]{
    display:block!important;
  }

  dialog .detail{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    height:auto!important;
    min-height:100%!important;
    padding:54px 14px 24px!important;
    gap:0!important;
    overflow:visible!important;
  }

  dialog .detail figure{
    flex:0 0 auto!important;
    width:100%!important;
    height:min(58svh,620px)!important;
    min-height:340px!important;
    margin:0!important;
    padding:0 34px 16px!important;
    overflow:hidden!important;
  }

  dialog .detail figure>img,
  dialog figure>img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
  }

  dialog .copy{
    flex:0 0 auto!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    max-height:none!important;
    padding:12px 34px 28px!important;
    overflow:visible!important;
  }

  dialog .copy h2{
    font-size:clamp(2.35rem,11vw,3.6rem)!important;
    line-height:.94!important;
    margin:.18em 0 .25em!important;
  }

  dialog .description{
    margin:1rem 0!important;
    font-size:.9rem!important;
    line-height:1.55!important;
  }

  dialog .mint{
    margin:1rem 0 1.25rem!important;
  }

  dialog .links{
    display:flex!important;
    align-items:center!important;
    flex-wrap:wrap!important;
    gap:.7rem!important;
    padding-bottom:max(.5rem,env(safe-area-inset-bottom));
  }

  dialog .opensea{
    min-height:42px;
    display:inline-flex;
    align-items:center;
  }

  dialog .logo-link{
    width:42px!important;
    height:42px!important;
    flex:0 0 42px!important;
  }

  dialog .close{
    position:absolute!important;
  }

  dialog .prev,
  dialog .next{
    position:absolute!important;
    top:calc(54px + min(29svh,310px))!important;
  }
}

@media (max-width:420px){
  .card,
  .card:nth-child(even){
    grid-template-columns:minmax(0,1fr) 110px;
    gap:.8rem;
    padding:.9rem;
  }

  .label strong{font-size:1.5rem}
  dialog .detail figure{padding-inline:30px}
  dialog .copy{padding-inline:28px!important}
}