/* KvestZania - блог */

.art__intro{padding-block:14px 4px}
.art__intro h1{margin-bottom:12px}
.art__intro p{color:var(--txt-dim);font-size:17px;line-height:1.55;margin:0;max-width:62ch}

/* карточки статей */
.art__grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.art__card{
  display:flex;flex-direction:column;padding:22px;border-radius:var(--r-lg);
  background:var(--card);border:1px solid var(--line);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s;
}
.art__card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(20,184,119,.35)}
.art__card-ic{
  display:grid;place-items:center;width:44px;height:44px;border-radius:13px;
  background:rgba(20,184,119,.10);color:var(--green);margin-bottom:16px;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.art__card:hover .art__card-ic{transform:rotate(-8deg)}
.art__card b{font-family:var(--font-head);font-size:20px;line-height:1.25;font-weight:800;letter-spacing:-.02em;margin-bottom:10px}
.art__card p{color:var(--txt-dim);font-size:14.5px;line-height:1.5;margin:0 0 14px;flex:1}
.art__card-more{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:600;color:var(--green)}
.art__card:hover .art__card-more svg{transform:translateX(3px)}
.art__card-more svg{transition:transform .2s}

/* статья */
.art{padding-block:clamp(10px,1.6vw,18px) clamp(28px,4vw,48px)}
.art__head{max-width:860px;margin-bottom:clamp(16px,2.2vw,26px)}
.art__head h1{margin-bottom:14px}
.art__lead{font-size:18px;line-height:1.55;color:var(--txt-dim);margin:0;max-width:70ch}
.art__cols{display:grid;grid-template-columns:1fr 300px;gap:clamp(24px,4vw,52px);align-items:start}
.art__body{max-width:74ch}

.art__side{position:sticky;top:92px}
.art__cta{padding:20px;border-radius:var(--r-lg);background:var(--dark);color:#fff}
.art__cta-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.12);color:#fff;margin-bottom:16px}
.art__cta b{display:block;font-family:var(--font-head);font-size:21px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.art__cta p{color:rgba(255,255,255,.75);font-size:14.5px;line-height:1.5;margin-bottom:18px}
.art__cta .btn{margin-bottom:10px}
.art__cta .btn--ghost{border-color:rgba(255,255,255,.3);color:#fff}
.art__cta .btn--ghost:hover{border-color:#fff;color:#fff}

@media (max-width:980px){
  .art__cols{grid-template-columns:1fr}
  .art__side{position:static;max-width:420px}
}