body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;
  margin:0;color:#222;
  background:#f6f7f9}
  
header
{
background:#e7c503;
color:#f3ef08;
padding:2rem;
text-align:center
}
.container{
  max-width:1100px;
  margin:1.5rem auto;
  padding:0 1rem
}
h1{
  margin:.2rem 0;
  font-size:2rem;
}
.grid{display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:1rem
}
figure{
  background:#fff;
  border-radius:12px;
  padding:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  overflow:hidden;
}
figure img{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:8px;
}

figcaption{
  font-size:.9rem;
padding-top:.6rem
}
.info{background:#fff;
border-radius:12px;
padding:1rem;
margin-bottom:1rem;
box-shadow:0 6px 18px rgba(0,0,0,.04)
  
}
ul{
  margin:0;
  padding-left:1.2rem
}
footer{text-align:center;
color:#666;padding:1.2rem;
font-size:.9rem
}
.source{
  font-size:.8rem;
color:rgb(248, 224, 3);
display:block;
margin-top:.5rem
}

.note{
  font-style:italic;
  color:#555;
  margin-top:.6rem
}


.img{
  transition: transform 0.3s ease;
}

.img:hover {
  transform: scale(1.2);
  cursor: pointer;
}

a {
  display: flex;
  margin-top:1px;
}
button {
  background-color: yellow;
  color: black;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}

button:hover {
  background-color: #165bb1;
}