:root{
  --bg:#f7f7f7;
  --accent:#2d6a4f;
  --text:#333;
  --card:#fff;
}

*{
    box-sizing:border-box;
    font-family:system-ui,Arial,sans-serif;
    margin:0;
    padding:0;
}

body{
    background:var(--bg);
    color:var(--text);
    line-height:1.4;
}

header{
    background:var(--accent);
    color:#fff;
    padding:12px;
}

header h1 {
    font-size:18px;
}

nav{
    margin-top:8px;
}

nav a {
    color:#d3d3d3;
    margin-right:10px;
    text-decoration:none;
    font-weight:600;
}

main{
    max-width:900px;
    margin:18px auto;
    padding:12px;
}

section, article, .facts, .conservation {
    background:var(--card);
    padding:12px;
    border-radius:6px;
    margin-bottom:12px;
}

.hero{
    display:flex;
    gap:12px;
    align-items:center;
}

.hero img {
    width:180px;
    height:120px;
    object-fit:cover;
    border-radius:6px;
}

.image-about,
.behaviour-image{
  width:100%;
  max-width:420px;
  height:auto;
  overflow:hidden;
  border-radius:6px;
  background:#eee;
  display:block;
  margin:8px 0;
}

.image-about img,
.behaviour-image img { 
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:10px;
}

figure {
    background:var(--card);
    padding:8px;
    border-radius:6px;
    text-align:center;
}

figure img {
    width:100%;
    height:120px;
    object-fit:cover;
    border-radius:4px;
}

footer {
    text-align:center;
    color:#666;
    padding:12px;
    font-size:14px;
}