@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg-deep: #0b201f;
  --bg-deep-2: #0f2a28;
  --teal: #143c3a;
  --teal-light: #1e544f;
  --teal-glass: rgba(15, 42, 40, 0.72);
  --teal-glass-light: rgba(30, 84, 79, 0.55);
  --gold: #d9a94f;
  --gold-bright: #f2c86f;
  --gold-deep: #a97a2c;
  --gold-soft: rgba(217, 169, 79, 0.35);
  --parchment: #f5ecd8;
  --ink: #142521;
  --ink-soft: #3d5450;
  --mist: #cfe6e0;
  --sky: #7fc4d6;
  --forest: #6fae5c;
  --white: #ffffff;
  --shadow-soft: 0 18px 44px rgba(4, 16, 15, 0.45);
  --shadow-card: 0 10px 30px rgba(4, 16, 15, 0.35);
  --maxw: 1180px;
  --font-display:'Cinzel', 'Georgia', serif;
  --font-body:'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg-deep);
  color:var(--parchment);
  font-size:18px;
  line-height:1.7;
  overflow-x:hidden;
  overflow-wrap:break-word;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  color:var(--parchment);
  text-wrap:balance;
  overflow-wrap:break-word;
  letter-spacing:0.01em;
}
a{color:inherit;}
img{max-width:100%; display:block;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 28px;}

@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
@keyframes drift{0%,100%{transform:translate(0,0);}50%{transform:translate(6px,-10px);}}
@keyframes twinkle{0%,100%{opacity:0.15; transform:scale(0.85);}50%{opacity:0.9; transform:scale(1.1);}}
@keyframes fadeUp{from{opacity:0; transform:translateY(26px);}to{opacity:1; transform:translateY(0);}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 0 0 var(--gold-soft);}50%{box-shadow:0 0 24px 4px var(--gold-soft);}}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:1000;
  display:flex; align-items:center; gap:22px;
  padding:10px 12px 10px 22px;
  background:var(--teal-glass);
  backdrop-filter:blur(14px);
  border-radius:999px;
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
  border:1px solid var(--gold-soft);
  width:max-content;
  max-width:calc(100% - 24px);
  transition:box-shadow 0.3s ease, background 0.3s ease;
}
.nav.scrolled{background:rgba(11,32,31,0.92); box-shadow:0 12px 34px rgba(0,0,0,0.5);}
.nav .brand{
  font-family:var(--font-display);
  font-size:0.95rem; font-weight:700;
  color:var(--gold-bright);
  display:flex; align-items:center; gap:8px;
  white-space:nowrap; letter-spacing:0.04em;
}
.nav .brand .sigil{font-size:1.2rem; display:inline-block; filter:drop-shadow(0 0 6px var(--gold-soft));}
.nav ul{list-style:none; display:flex; gap:2px; flex-wrap:nowrap; white-space:nowrap;}
.nav ul li a{
  text-decoration:none;
  color:var(--mist);
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.76rem;
  padding:9px 13px;
  border-radius:999px;
  transition:all 0.2s ease;
  display:inline-block;
  letter-spacing:0.02em;
}
.nav ul li a:hover{background:var(--teal-glass-light); color:var(--gold-bright);}
.nav ul li a.active{background:var(--gold); color:var(--ink);}
.nav-toggle{display:none;}

@media (max-width:1080px){
  .nav ul{
    position:fixed; top:0; right:-100%; height:100vh; width:78%;
    background:var(--bg-deep-2); flex-direction:column; justify-content:center;
    gap:10px; padding:40px; transition:right 0.4s ease;
    border-radius:0; border-left:1px solid var(--gold-soft);
  }
  .nav ul.open{right:0;}
  .nav ul li a{font-size:1rem; display:block; text-align:center;}
  .nav-toggle{
    display:block; background:var(--gold); border:none; color:var(--ink);
    font-size:1.1rem; padding:8px 14px; cursor:pointer; border-radius:999px; font-weight:700;
  }
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:flex-end; justify-content:center;
  text-align:center;
  overflow:hidden;
  padding:160px 24px 120px;
}
.hero-art{
  position:absolute; inset:0;
  background-image:url('assets/game/backgrounds/team-camp.png');
  background-position:center 38%;
  background-size:cover;
}
.hero-art::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,20,19,0.55) 0%, rgba(8,20,19,0.25) 40%, rgba(6,16,15,0.55) 68%, rgba(6,14,13,0.94) 100%);
}
.hero-particles{position:absolute; inset:0; pointer-events:none; z-index:2;}
.hero-particles span{
  position:absolute; width:5px; height:5px; border-radius:50%;
  background:var(--gold-bright); filter:drop-shadow(0 0 6px var(--gold-bright));
  animation:twinkle 3.4s ease-in-out infinite;
}
.hero-cast{position:absolute; inset:0; pointer-events:none; z-index:2;}
.hero-cast img{
  position:absolute; filter:drop-shadow(0 14px 18px rgba(0,0,0,0.5));
  animation:floaty 5s ease-in-out infinite;
}
.hero-kael{width:min(16vw,190px); left:3%; bottom:0; animation-delay:0.2s;}
.hero-nym-1{width:min(9vw,100px); left:15%; bottom:0; animation-delay:0.6s;}
.hero-nym-2{width:min(9vw,100px); right:15%; bottom:0; animation-delay:1.1s;}
.hero-nym-3{width:min(11vw,120px); right:3%; bottom:0; animation-delay:1.6s;}
@media (max-width:900px){
  .hero-nym-1, .hero-nym-3{display:none;}
  .hero-kael{width:24vw; left:4%;}
  .hero-nym-2{width:18vw; right:4%;}
}
@media (max-width:600px){
  .hero-cast{display:none;}
}
.hero-content{position:relative; z-index:3; width:100%; max-width:820px; margin:0 auto;}
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display);
  font-weight:700;
  background:var(--teal-glass);
  border:1px solid var(--gold-soft);
  color:var(--gold-bright);
  padding:9px 24px;
  border-radius:999px;
  font-size:0.78rem;
  letter-spacing:0.08em;
  margin-bottom:26px;
  animation:fadeUp 0.9s ease both;
}
.hero h1{
  position:relative;
  font-family:var(--font-display);
  font-size:clamp(2rem, 9vw, 5.2rem);
  color:var(--parchment);
  letter-spacing:0.02em;
  text-shadow:0 4px 30px rgba(0,0,0,0.6), 0 2px 0 rgba(0,0,0,0.4);
  line-height:1.08;
  animation:fadeUp 1s ease both;
  animation-delay:0.1s;
}
.hero h1 .pop{color:var(--gold-bright);}
.hero .subtitle{
  font-family:var(--font-body);
  font-weight:500;
  font-size:clamp(1rem, 1.6vw, 1.2rem);
  color:var(--mist);
  margin-top:20px;
  max-width:600px;
  margin-left:auto; margin-right:auto;
  animation:fadeUp 1s ease both;
  animation-delay:0.2s;
}
.hero .cta-row{
  margin-top:40px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
  animation:fadeUp 1s ease both;
  animation-delay:0.3s;
}
.btn{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:0.85rem;
  letter-spacing:0.04em;
  text-decoration:none;
  padding:15px 32px;
  border-radius:12px;
  transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
  cursor:pointer;
  border:none;
}
.btn-primary{
  background:linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
  color:#2c1c05;
  box-shadow:0 10px 24px rgba(169,122,44,0.4), inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(169,122,44,0.5);}
.btn-ghost{
  color:var(--parchment); background:rgba(255,255,255,0.06);
  border:1px solid var(--gold-soft);
}
.btn-ghost:hover{background:rgba(255,255,255,0.12); transform:translateY(-2px);}

.scroll-cue{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  color:var(--gold-bright); font-size:1.4rem; opacity:0.85;
  animation:floaty 2.2s ease-in-out infinite;
  z-index:2;
}

/* ---------- STAT BAND ---------- */
.stat-band{
  background:var(--bg-deep-2);
  padding:50px 0;
  position:relative;
  border-top:1px solid var(--gold-soft);
  border-bottom:1px solid var(--gold-soft);
}
.stat-band-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
  gap:24px; text-align:center;
}
.stat-item .num{
  font-family:var(--font-display); font-weight:800; font-size:clamp(2.2rem,5vw,3.2rem);
  line-height:1;
  color:var(--gold-bright);
  display:block; margin-bottom:8px;
  text-shadow:0 0 20px var(--gold-soft);
}
.stat-item .label{
  font-family:var(--font-body); font-weight:600; font-size:0.88rem; color:var(--mist); letter-spacing:0.03em;
}

/* ---------- FLOATING CTA ---------- */
.floating-cta{
  position:fixed; right:26px; bottom:26px; z-index:900;
  display:flex; align-items:center; gap:10px;
  padding:15px 26px;
  font-family:var(--font-display); font-weight:700; font-size:0.82rem;
  color:#2c1c05;
  background:linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
  border-radius:999px;
  box-shadow:0 10px 26px rgba(0,0,0,0.4);
  text-decoration:none;
  border:none; cursor:pointer;
  opacity:0; transform:translateY(30px) scale(0.8); pointer-events:none;
  transition:opacity 0.35s ease, transform 0.35s cubic-bezier(.34,1.56,.64,1);
}
.floating-cta.show{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
.floating-cta:hover{transform:translateY(-4px) scale(1.04);}
@media (max-width:600px){.floating-cta{right:14px; bottom:14px; padding:13px 20px; font-size:0.76rem;}}

/* ---------- SECTIONS ---------- */
section{position:relative; padding:110px 0 90px;}
.section-a{background:var(--bg-deep);}
.section-b{background:var(--bg-deep-2);}
.section-art{position:relative; background-size:cover; background-position:center; isolation:isolate;}
.section-art::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(8,20,19,0.92) 0%, rgba(8,20,19,0.85) 20%, rgba(9,24,23,0.9) 80%, rgba(8,20,19,0.96) 100%);
}
.section-dawnreach{background-image:url('assets/game/backgrounds/dawnreach-map.png');}
.section-camp{background-image:url('assets/game/backgrounds/team-camp.png');}
.section-forge{background-image:url('assets/game/backgrounds/blacksmith-forge.png');}
.section-shop{background-image:url('assets/game/backgrounds/local-shop.png');}
.section-guild{background-image:url('assets/game/backgrounds/online-guild.png');}
.section-gate{background-image:url('assets/game/backgrounds/aethergate.png');}

.kicker{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:0.72rem;
  letter-spacing:0.12em;
  background:var(--teal-glass);
  color:var(--gold-bright);
  padding:8px 20px;
  border-radius:999px;
  margin-bottom:18px;
  border:1px solid var(--gold-soft);
  text-transform:uppercase;
}
.kicker-wrap{text-align:center;}
.section-title{
  text-align:center;
  font-size:clamp(1.9rem, 4vw, 2.7rem);
  margin-bottom:18px;
}
.section-lede{
  text-align:center;
  max-width:700px;
  margin:0 auto 60px;
  font-size:1.05rem;
  font-weight:400;
  color:var(--mist);
}

.fade-in{
  opacity:0; transform:translateY(24px);
  transition:opacity 0.7s cubic-bezier(.22,1,.36,1), transform 0.7s cubic-bezier(.22,1,.36,1);
}
.fade-in.visible{opacity:1; transform:translateY(0);}

/* ---------- GLASS PANEL (shared) ---------- */
.glass-card{
  background:var(--teal-glass);
  backdrop-filter:blur(10px);
  border:1px solid var(--gold-soft);
  border-radius:20px;
  box-shadow:var(--shadow-card);
  transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.glass-card:hover{transform:translateY(-6px); border-color:var(--gold); box-shadow:0 16px 36px rgba(0,0,0,0.4);}

/* ---------- PILLARS ---------- */
.pillars-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr));
  gap:22px; margin-top:20px;
}
.pillar{padding:32px 24px; text-align:center;}
.pillar .icon{font-size:2.2rem; margin-bottom:14px; display:block; filter:drop-shadow(0 0 10px var(--gold-soft));}
.pillar h3{font-size:1.05rem; margin-bottom:10px; color:var(--gold-bright);}
.pillar p{font-size:0.92rem; color:var(--mist);}

/* ---------- WORLD / LEAD BLOCKS ---------- */
.world-grid{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;
}
@media (max-width:900px){.world-grid{grid-template-columns:1fr;} }
.art-frame{
  position:relative; border-radius:18px; overflow:hidden;
  border:1px solid var(--gold-soft); box-shadow:var(--shadow-soft);
  cursor:zoom-in;
}
.art-frame img{width:100%; height:100%; object-fit:cover;}
.art-caption{
  font-family:var(--font-body); font-weight:600; font-size:0.82rem;
  color:var(--mist); margin-top:14px; text-align:center;
}

.lead-block h3{font-size:1.5rem; margin-bottom:16px; color:var(--gold-bright);}
.lead-block p{margin-bottom:16px; color:var(--mist); font-size:1rem;}
.pull-quote{
  font-family:var(--font-display); font-weight:600; font-size:1.1rem;
  background:var(--teal-glass); border-radius:14px; padding:18px 22px; margin:24px 0;
  color:var(--parchment); border-left:3px solid var(--gold);
}

/* ---------- HUB / SYSTEM CARD GRID (Guild systems, districts, etc.) ---------- */
.system-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr));
  gap:18px;
}
.system-card{
  text-align:center; padding:26px 16px;
}
.system-card .icon{font-size:1.7rem; margin-bottom:10px; display:block;}
.system-card h3{font-size:0.95rem; color:var(--parchment);}

/* ---------- STORY TIMELINE ---------- */
.timeline{
  position:relative; max-width:780px; margin:0 auto;
  padding-left:36px;
}
.timeline::before{
  content:""; position:absolute; left:9px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(180deg, var(--gold), transparent);
}
.timeline-item{position:relative; padding-bottom:44px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{
  content:""; position:absolute; left:-36px; top:4px; width:18px; height:18px;
  border-radius:50%; background:var(--gold-bright); box-shadow:0 0 12px var(--gold-soft);
  border:3px solid var(--bg-deep);
}
.timeline-item .chapter{
  font-family:var(--font-display); font-weight:700; font-size:0.72rem;
  color:var(--gold-bright); letter-spacing:0.08em; text-transform:uppercase;
  display:inline-block; margin-bottom:8px;
}
.timeline-item h3{font-size:1.25rem; margin-bottom:10px; color:var(--parchment);}
.timeline-item p{color:var(--mist); font-size:0.98rem;}
.timeline-item p + p{margin-top:10px;}

.char-cards{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:18px;
  margin-top:56px;
}
.char-card{padding:26px 22px; text-align:center;}
.char-card .glyph{font-size:1.8rem; margin-bottom:10px;}
.char-card h3{font-size:1.02rem; margin-bottom:8px; color:var(--gold-bright);}
.char-card p{font-size:0.88rem; color:var(--mist);}

/* ---------- KAEL ---------- */
.kael-grid{display:grid; grid-template-columns:0.8fr 1.2fr; gap:56px; align-items:center;}
@media (max-width:900px){.kael-grid{grid-template-columns:1fr;}}
.kael-portrait-frame{
  width:min(340px,80%); margin:0 auto;
  border-radius:50%; overflow:hidden; border:3px solid var(--gold);
  box-shadow:0 0 0 8px var(--teal-glass), var(--shadow-soft);
  animation:glowPulse 4s ease-in-out infinite;
}
.kael-idle-wrap{display:flex; justify-content:center; margin-top:28px;}
.kael-idle-wrap img{width:150px; animation:floaty 4.5s ease-in-out infinite; filter:drop-shadow(0 12px 14px rgba(0,0,0,0.5));}
.aether-quote{
  font-family:var(--font-display); font-weight:600; font-size:1.15rem; color:var(--gold-bright);
  text-align:center; margin:44px auto 0; max-width:640px;
  padding:22px 30px;
}

/* ---------- NYM COLLECTION ---------- */
.rarity-tabs{
  display:flex; justify-content:center; gap:10px; margin-bottom:44px; flex-wrap:wrap;
}
.rarity-tab{
  font-family:var(--font-display); font-weight:700; font-size:0.76rem;
  letter-spacing:0.04em;
  padding:10px 22px; border:1px solid var(--gold-soft); border-radius:999px; cursor:pointer;
  background:var(--teal-glass); color:var(--mist);
  transition:all 0.2s ease;
}
.rarity-tab.active, .rarity-tab:hover{
  background:var(--gold); color:var(--ink); border-color:var(--gold);
}
.bestiary-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:20px;
}
.creature-card{
  overflow:hidden; cursor:pointer;
  border-radius:18px;
  background:var(--teal-glass);
  border:1px solid var(--gold-soft);
  box-shadow:var(--shadow-card);
  transition:transform 0.25s cubic-bezier(.34,1.56,.64,1), border-color 0.25s ease;
}
.creature-card:hover{transform:translateY(-8px); border-color:var(--gold); z-index:2; position:relative;}
.creature-card .thumb{
  aspect-ratio:1/1; overflow:hidden; position:relative;
  background:radial-gradient(circle at 50% 30%, var(--teal-light), var(--teal) 70%);
}
.creature-card .thumb img.main-shot{width:100%; height:100%; object-fit:contain; padding:14px; transition:transform 0.35s ease;}
.creature-card:hover .thumb img.main-shot{transform:scale(1.08) translateY(-4px);}
.creature-card .rarity-pill{
  position:absolute; top:8px; right:8px; background:rgba(11,32,31,0.85);
  border:1px solid var(--gold-soft);
  border-radius:999px; padding:3px 10px; font-size:0.62rem; font-family:var(--font-display);
  font-weight:700; letter-spacing:0.04em; color:var(--gold-bright);
}
.creature-card .mini-icon{
  position:absolute; bottom:8px; left:8px; width:38px; height:38px;
  border-radius:50%; box-shadow:0 3px 10px rgba(0,0,0,0.5), 0 0 0 2px var(--gold);
  object-fit:cover;
}
.creature-name{
  text-align:center; padding:10px 8px 14px; font-family:var(--font-display);
  font-size:0.82rem; font-weight:700; color:var(--parchment);
}
.bestiary-hidden{display:none !important;}

/* ---------- COMBAT / TEAM ---------- */
.combat-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:20px;
}
.combat-card{padding:26px 22px;}
.combat-card h3{font-size:1.02rem; margin-bottom:10px; color:var(--gold-bright);}
.combat-card p{font-size:0.9rem; color:var(--mist);}

.resonance-banner{
  margin-top:60px; text-align:center; padding:50px 30px;
  border-radius:24px;
}
.resonance-banner h3{font-size:1.5rem; margin-bottom:14px; color:var(--gold-bright);}
.resonance-banner p{max-width:620px; margin:0 auto; color:var(--mist);}

/* ---------- GALLERY ---------- */
.gallery-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:20px;
}
.gallery-shot{
  border-radius:16px; overflow:hidden; cursor:zoom-in;
  position:relative;
}
.gallery-shot img{width:100%; display:block; aspect-ratio:16/9; object-fit:cover; transition:transform 0.4s ease;}
.gallery-shot:hover img{transform:scale(1.05);}
.gallery-shot .cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px 16px 12px;
  background:linear-gradient(0deg, rgba(6,15,14,0.92), transparent);
  font-family:var(--font-display); font-weight:700; font-size:0.82rem; color:var(--parchment);
}

/* ---------- FOOTER ---------- */
footer{
  background:var(--bg-deep-2); color:var(--parchment); text-align:center; padding:70px 24px 40px;
  border-top:1px solid var(--gold-soft);
}
footer .brand{
  font-family:var(--font-display); color:var(--gold-bright); font-size:1.2rem; margin-bottom:14px; letter-spacing:0.04em;
}
footer .foot-quote{font-weight:500; max-width:520px; margin:0 auto 24px; color:var(--mist);}
footer .small{font-size:0.8rem; opacity:0.6;}

/* ---------- LIGHTBOX ---------- */
.lightbox{
  position:fixed; inset:0; background:rgba(6,14,13,0.92); z-index:3000;
  display:none; align-items:center; justify-content:center; padding:40px;
  backdrop-filter:blur(6px);
}
.lightbox.open{display:flex;}
.lightbox img{max-width:min(90vw,900px); max-height:85vh; border-radius:16px; border:1px solid var(--gold-soft); box-shadow:0 30px 80px rgba(0,0,0,0.6);}
.lightbox .lb-caption{
  position:absolute; bottom:28px; left:0; right:0; text-align:center;
  font-family:var(--font-display); font-weight:700; color:var(--gold-bright); font-size:1rem;
}
.lightbox .lb-close{
  position:absolute; top:24px; right:32px; font-size:1.3rem; color:var(--ink);
  cursor:pointer; background:var(--gold); border:none; width:42px; height:42px; border-radius:50%;
}

::selection{background:var(--gold); color:#2c1c05;}

/* ---------- FOCUS VISIBILITY ---------- */
a:focus-visible,
button:focus-visible,
.nav ul li a:focus-visible,
.rarity-tab:focus-visible,
.btn:focus-visible,
.creature-card:focus-visible,
.gallery-shot:focus-visible,
.lb-close:focus-visible,
.nav-toggle:focus-visible{
  outline:3px solid var(--gold-bright);
  outline-offset:3px;
}
.floating-cta:focus-visible{
  outline:3px solid var(--parchment);
  outline-offset:4px;
}

/* ---------- NARROW-SCREEN GRID SAFETY ----------
   auto-fit/minmax() grids can't shrink a track below its px minimum, so on very
   narrow viewports they overflow instead of reflowing. Force safe column counts. */
@media (max-width:560px){
  .stat-band-grid,
  .pillars-grid,
  .system-grid,
  .combat-grid,
  .gallery-grid{
    grid-template-columns:1fr;
  }
  .bestiary-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}