:root {
  color: #f8f5ed;
  background: #0b1829;
  font-family: "Segoe UI", Arial, sans-serif;
}

body { margin: 0; }
.gallery-width { width: min(100% - 40px, 1180px); margin-inline: auto; }
.gallery-header { border-bottom: 1px solid #354456; }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; padding-block: 20px; }
.header-inner img { width: 164px; height: auto; }
.header-inner a, .gallery-back a { color: #e2c487; font-weight: 600; text-underline-offset: 4px; }
main.gallery-width { padding-block: clamp(42px, 8vw, 88px); }
.gallery-kicker { margin: 0 0 12px; color: #e2c487; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(2.2rem, 5vw, 4.1rem); line-height: 1.05; font-weight: 400; }
.gallery-intro { max-width: 56ch; margin: 16px 0 32px; color: #d3dce5; font-size: 1.06rem; line-height: 1.55; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 275px), 1fr)); gap: 20px; }
.gallery-grid article { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #43536a; border-radius: 15px; background: #102139; }
.gallery-grid img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: contain; }
.gallery-grid h2 { margin: 18px 18px 0; font-size: 1.18rem; }
.gallery-grid p { margin: 10px 18px 16px; color: #d3dce5; line-height: 1.5; }
.gallery-grid a { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; margin: auto 18px 18px; color: #e2c487; font-weight: 600; text-underline-offset: 4px; }
.gallery-back { margin: 28px 0 0; }
.gallery-width a:focus-visible { outline: 3px solid #f4cd81; outline-offset: 4px; }