.grid{
  display:grid;
  gap: calc(var(--space)*3);
}

.grid--4{ grid-template-columns: repeat(4, 1fr); }

.card{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius: var(--radius);
  padding: calc(var(--space)*4);
  text-decoration:none;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:170px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.card:hover{
  transform: translateY(-2px);
  border-color:#0000001a;
  box-shadow: 0 14px 40px #00000012;
}

.card__title{ font-weight:800; font-size:18px; }
.card__desc{ color:var(--c-muted); margin-top: calc(var(--space)*2); }
.card__meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top: calc(var(--space)*4);
  color:var(--c-muted);
  font-size:13px;
}


@media (max-width: 1100px){ .grid--4{ grid-template-columns: repeat(3, 1fr);} }
@media (max-width: 900px){ .grid--4{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 560px){ .grid--4{ grid-template-columns: 1fr;} }

.card{
  position: relative;
  overflow: hidden;
}

.card__content{
  position: relative;
  z-index: 2;
}

.card__bg-icon{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  opacity: 0.18;
  pointer-events:none;
}
}