/* ---------- 1.  Root & reset ---------- */
:root {
  --gap: 1rem;
  --radius: 8px;
  --shadow: 0 4px 8px rgba(0,0,0,.15);
  --font: system-ui, -apple-system, Arial, sans-serif;
  --bg-start: #fafafa;
  --bg-end:   #c7c7c7;
}

* { box-sizing: border-box; }

/* ---------- 2.  Global layout ---------- */
body {
  margin: 0;
  padding: 2rem;
  font-family: var(--font);
  background: linear-gradient(to bottom, var(--bg-start), var(--bg-end)) fixed;
  min-height: 100vh;
  color: #222;
}

h1 {
  text-align: center;
  margin: 0 0 2rem;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
}

/* ---------- 3.  Gallery ---------- */
#photos {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  max-width: 1200px;
  margin: 0 auto;
}

img.two {
  width: 100%;
  aspect-ratio: 4 / 3;          /* keeps proportions instead of fixed height */
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .3s ease, box-shadow .3s ease;
  cursor: pointer;
}

img.two:hover,
img.two:focus-visible {
  transform: scale(1.03);
  box-shadow: 0 6px 16px rgba(0,0,0,.3);
}

/* ---------- 4.  Keywords ---------- */
.keywords {
  text-align: center;
  margin: 0 auto 2rem;
  max-width: 720px;
  padding: .75rem 1rem;
  background: #fff;
  border-radius: var(--radius);
  font-style: italic;
  color: #444;
  box-shadow: var(--shadow);
}

/* ---------- 5.  Footer ---------- */
footer {
  text-align: center;
  margin-top: 3rem;
  color: #555;
}

/* ---------- 6.  Responsive ---------- */
@media (max-width: 768px) {
  #photos { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

@media (max-width: 480px) {
  :root { --gap: .75rem; }
  body { padding: 1rem; }
  #photos { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ---------- 7.  Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  img.two { transition: none; }
}