.comics-main{
  max-width:760px;
}

.comics-title{
  font-family:'Anton',sans-serif;
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(42px,8vw,72px);
  letter-spacing:.01em;
  margin:0 0 10px;
  color:var(--paper);
  line-height:.95;
}

.comic-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:16px;
  width:100%;
  margin:8px 0 30px;
}

.comic-btn{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  padding:22px 20px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(244,241,233,.03);
  text-decoration:none;
  text-align:left;
  overflow:hidden;
  transition:border-color .2s ease, transform .18s ease, background .2s ease, box-shadow .2s ease;
  animation:card-in .5s ease backwards;
  animation-delay:calc(var(--i, 0) * .07s);
}

.comic-btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 20% 0%, rgba(79,224,232,.14), transparent 60%);
  opacity:0;
  transition:opacity .25s ease;
}

.comic-btn:hover,
.comic-btn:focus-visible{
  border-color:var(--cyan);
  background:rgba(79,224,232,.05);
  transform:translateY(-3px) scale(1.015);
  box-shadow:0 10px 26px -10px rgba(79,224,232,.35);
}
.comic-btn:hover::before{
  opacity:1;
}
.comic-btn:active{
  transform:translateY(-1px) scale(.99);
}

.comic-btn__name{
  position:relative;
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:20px;
  letter-spacing:.02em;
  color:var(--paper);
}

.comic-btn__creator{
  position:relative;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:.04em;
  color:var(--paper-dim);
}

.comic-btn__arrow{
  position:relative;
  align-self:flex-end;
  margin-top:6px;
  color:var(--cyan);
  display:flex;
  transition:transform .2s ease;
}
.comic-btn:hover .comic-btn__arrow{
  transform:translateX(4px);
}

@keyframes card-in{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}

@media (max-width:520px){
  .comic-grid{
    grid-template-columns:1fr;
    gap:12px;
  }
  .comic-btn{padding:18px 16px;}
}

@media (prefers-reduced-motion:reduce){
  .comic-btn{animation:none;}
  .comic-btn:hover{transform:none;}
}