*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f7f7f7;color:#111}
.page{max-width:1120px;margin:0 auto 50px;padding:10px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 12px}
.card{display:block;color:#111;text-decoration:none;background:#fff;border:1px solid #d8d8d8;border-radius:5px;box-shadow:0 2px 7px rgba(0,0,0,.18);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;overflow:hidden;-webkit-tap-highlight-color:rgba(0,0,0,.06)}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.19);border-color:#c8c8c8}
.card:hover .title,.card:active .title,.card:focus .title,.card:focus-visible .title,.card.is-pressed .title{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:2px}
.card:focus-visible{outline:2px solid #444;outline-offset:2px}
.img-wrap{aspect-ratio:3/2;background:#eee;overflow:hidden}
.img-wrap img{width:100%;height:100%;display:block;object-fit:cover}
.content{padding:10px 12px 13px}
.title{font-weight:800;font-size:18px;line-height:1.2;margin:0 0 10px;text-decoration:none}
.meta{font-size:13px;color:#8d8d8d}
.empty{text-align:center;padding:70px;color:#777}
@media(max-width:760px){
  body{background:#fff}
  .page{padding:0 16px 24px}
  .grid{grid-template-columns:1fr;gap:16px}
  .card{border:1px solid #d1d1d1;border-radius:5px;box-shadow:0 2px 7px rgba(0,0,0,.22)}
  .title{font-size:20px;line-height:1.2}
  .content{padding:11px 13px 14px}
  .meta{font-size:13px}
}