:root{
  --bg: #000000;
  --gap-x: clamp(10px, 2vw, 18px);
  --gap-y: clamp(8px, 1.5vw, 14px);
  --radius: 16px;
  --shadow: 0 10px 22px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.15);
}
*{ box-sizing:border-box; }
html, body{ height:auto; }
body{ margin:0; background:var(--bg); font:16px/1.45 system-ui, -apple-system, Segoe UI, Inter, Roboto, Arial; color:#0b0b0c; }
.wrap{ padding: var(--gap-y) var(--gap-x); }

.news-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-y) var(--gap-x);
  background: var(--bg);
  overflow: visible;
}

.card{
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  background: var(--bg);
  aspect-ratio: 1 / 1;
  position: relative;
}

.card.hero{ grid-column: 1 / -1; }
.card a{ display:grid; place-items:center; width:100%; height:100%; text-decoration:none; color:inherit; }
.card img{ width:100%; height:100%; object-fit:contain; -webkit-user-drag:none; user-select:none; transition: transform .22s ease; }
.card:hover img{ transform: scale(1.02); }

@media (max-width: 640px){
  .news-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card.hero{ grid-column: 1 / -1; }
}



.card.hero img{object-fit:contain;margin:auto;}

.card.banner{
  grid-column: 1 / -1;
  aspect-ratio: auto;
  margin-bottom: calc(-1 * var(--gap-y));
}
.card.banner img{
  object-fit: contain;
}