:root {
  --brand: #2f5d3a;
  --accent: #3f7a4c;
}
body {
  margin: 0;
  font-family: "IBM Plex Sans", "Georgia", serif;
  background: #f3f7f2;
  color: #142;
}
header { display: flex; justify-content: space-between; padding: 1rem 1.5rem; background: #2f5d3a; color: #fff; }
header a { color: #fff; margin-left: 1rem; }
.brand { margin: 0; font-weight: 700; letter-spacing: 0.06em; display: flex; align-items: center; gap: 0.6rem; }
.brand img { width: 2.2rem; height: 2.2rem; border-radius: 0.35rem; object-fit: cover; }
main { padding: 2rem 1.5rem; max-width: 52rem; }
.cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 1rem; }
.cards li { background: #fff; border: 1px solid #d3e2d6; padding: 0.6rem; }
.cards img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.cards span { display: block; margin-top: 0.45rem; font-size: 0.9rem; }
h1 { color: #2f5d3a; }
button, .btn {
  background: #2f5d3a;
  color: #fff;
  border: 0;
  padding: 0.6rem 1rem;
}