.btn{
  display:inline-block;
  padding:12px 18px;
  border-radius:14px;

  background-image: url("images/dark_wood_2.webp");
  color:var(--text2);
  text-decoration:none;
  font-weight:700;
  border:none;
  cursor:pointer;
  transition: transform .2s ease, filter .2s ease;
}
.btn:hover{ transform: translateY(-2px); filter:brightness(1.05); }

.btn-ghost{
  background:transparent;
  color:var(--text2);
  border:1px solid rgba(255,255,255,.18);
}
.btn-ghost:hover{ filter: brightness(1.08); }

.grid{
  margin-top:22px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
}

.card{
  background:rgba(74,55,40,.9);
  background-image:
    linear-gradient(rgba(11,15,23,.75), rgba(11,15,23,.75)),
    url("images/dark_wood_2.webp");
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:26px;
  min-height:120px;
  display:grid;
  place-items:center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover{
  transform: translateY(-4px) scale(1.01);
  box-shadow:0 16px 40px rgba(0,0,0,.35);
}

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