/* Jompom Blog: tilt cards with a 3D toy cover. */
.jp-blog{background:var(--ink);color:#fff;padding:110px 0}
.jp-blog .bl-head{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:end;margin-bottom:56px}
.jp-blog .bl-head .btn{justify-self:end}
.jp-blog .posts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:0;padding:0;list-style:none}
.jp-blog .post{--rx:0deg;--ry:0deg;display:flex;flex-direction:column;background:var(--ink2);border:3px solid #3a3d40;border-radius:28px;padding:14px 14px 24px;transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .7s var(--spring),border-color .3s}
.jp-blog .post.tilting{transition:transform .12s linear,border-color .3s}
.jp-blog .post:hover,.jp-blog .post:focus-within{border-color:var(--blue)}
.jp-blog .cover{position:relative;aspect-ratio:16/10;border-radius:18px;border:3px solid var(--ink);display:grid;place-items:center;perspective:700px;transform-style:preserve-3d}
.jp-blog .cover .toy{width:46%;aspect-ratio:1;transform:translateZ(50px);transform-style:preserve-3d}
.jp-blog .cover .toy .ex{transition:transform 1s var(--spring)}
.jp-blog .post:hover .cover .toy .ex{transform:rotateY(35deg) rotateX(-10deg) scale(1.08)}
.jp-blog .post:nth-child(3n+1) .cover{background:var(--sun)}
.jp-blog .post:nth-child(3n+2) .cover{background:var(--blue)}
.jp-blog .post:nth-child(3n) .cover{background:var(--sky)}
.jp-blog .post h3{font-size:clamp(21px,1.9vw,25px);line-height:1.12;margin:22px 10px 18px}
.jp-blog .post h3 a{color:#fff;text-decoration:none}
.jp-blog .post h3 a::after{content:"";position:absolute;inset:0;border-radius:28px}
.jp-blog .post h3 a:focus-visible{outline:none}
.jp-blog .post:has(a:focus-visible){outline:3px solid var(--sun);outline-offset:4px}
.jp-blog .more-link{margin:auto 10px 0;font-weight:600;color:var(--blue);display:inline-flex;gap:8px;align-items:center}
.jp-blog .more-link svg{width:18px;height:18px;transition:transform .45s var(--spring)}
.jp-blog .post:hover .more-link svg{transform:translateX(6px)}

@media (max-width:980px){
  .jp-blog .bl-head{grid-template-columns:minmax(0,1fr)}
  .jp-blog .bl-head .btn{justify-self:start}
  .jp-blog .posts{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .jp-blog .posts{grid-template-columns:minmax(0,1fr)}
}