/*
Theme Name: Vinzamtor
Theme URI: https://vinzamtor.com
Author: Vinzamtor Studio
Description: Officiële thema voor Vinzamtor — de rift is open. Donker, neon, HUD-geïnspireerd. Geen loot-gokkasten, alleen skill.
Version: 1.0.0
Text Domain: vinzamtor
*/

/* ==========================================================================
   1. DESIGN TOKENS — "Rift Signal"
   ========================================================================== */
:root{
  --bg:        #0A0D14;
  --bg-panel:  #10141F;
  --bg-card:   #131826;
  --ink:       #E7ECF5;
  --ink-soft:  #8894A8;
  --border:    #232B3D;

  --neon-green: #39FF9C;
  --neon-cyan:  #22E5FF;
  --neon-pink:  #FF3EC9;
  --neon-amber: #FFB020;
  --rare-blue:  #4C8DFF;
  --rare-purple:#B26CFF;
  --rare-gold:  #FFC93C;

  --shadow: 0 14px 34px rgba(0,0,0,.5);
  --glow-green: 0 0 18px rgba(57,255,156,.45);
  --glow-cyan: 0 0 18px rgba(34,229,255,.4);
  --glow-pink: 0 0 18px rgba(255,62,201,.4);

  --font-display: 'Chakra Petch', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-body: 'Inter', sans-serif;

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --container: 1180px;
}

/* ==========================================================================
   2. RESET / BASE — dark by default, everywhere
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  background-image:
    linear-gradient(rgba(34,229,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,229,255,.035) 1px, transparent 1px);
  background-size:38px 38px;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.02em; margin:0 0 .5em; line-height:1.1; color:#fff; }
h1{ font-size:clamp(2.6rem,5.6vw,4.6rem); }
h2{ font-size:clamp(1.9rem,3.6vw,2.8rem); }
h3{ font-size:1.25rem; }
p{ margin:0 0 1.1em; color:var(--ink-soft); }
.container{ max-width:var(--container); margin:0 auto; padding:0 28px; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--neon-green); background:rgba(57,255,156,.08); border:1px solid rgba(57,255,156,.3);
  padding:6px 14px; border-radius:999px; margin-bottom:18px;
}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:.95rem;
  padding:15px 30px; border-radius:var(--radius-sm); border:2px solid transparent;
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease; clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--neon-green); color:#04150C; box-shadow:var(--glow-green); }
.btn-outline{ background:transparent; border-color:var(--border); color:#fff; }
.btn-outline:hover{ border-color:var(--neon-cyan); color:var(--neon-cyan); }
:focus-visible{ outline:2px solid var(--neon-cyan); outline-offset:2px; }
.section{ padding:88px 0; position:relative; }
.section-alt{ background:var(--bg-panel); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.small{ font-size:.85rem; color:var(--ink-soft); }
.mono{ font-family:var(--font-mono); }
.text-center{ text-align:center; }

/* HUD corner-bracket decoration, reused across cards */
.hud-frame{ position:relative; }
.hud-frame::before, .hud-frame::after{
  content:''; position:absolute; width:16px; height:16px; border:2px solid var(--neon-cyan); opacity:.7;
}
.hud-frame::before{ top:-2px; left:-2px; border-right:0; border-bottom:0; }
.hud-frame::after{ bottom:-2px; right:-2px; border-left:0; border-top:0; }

/* ==========================================================================
   3. HEADER
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,13,20,.88); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; padding:16px 28px; }
.site-logo{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:1.25rem; color:#fff; }
.site-logo svg{ width:34px; height:34px; }
.main-nav ul{ display:flex; gap:28px; align-items:center; }
.main-nav a{ font-family:var(--font-mono); font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); position:relative; }
.main-nav a:hover{ color:var(--neon-cyan); }
.nav-toggle{ display:none; background:none; border:0; font-size:1.6rem; cursor:pointer; color:#fff; }
.header-cta{ display:flex; align-items:center; gap:16px; }
@media (max-width:900px){
  .main-nav{ position:fixed; inset:66px 0 0 0; background:var(--bg); transform:translateY(-120%); transition:transform .3s ease; padding:30px 28px; overflow-y:auto; }
  .main-nav.is-open{ transform:translateY(0); }
  .main-nav ul{ flex-direction:column; align-items:flex-start; gap:22px; }
  .nav-toggle{ display:block; }
}

/* ==========================================================================
   4. HERO — terminal boot sequence + live rift ticker
   ========================================================================== */
.hero{ padding:70px 0 60px; overflow:hidden; position:relative; }
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center; }
.hero-copy .lede{ font-size:1.12rem; max-width:520px; }
.hero-actions{ display:flex; gap:16px; margin-top:32px; flex-wrap:wrap; }

.rift-ticker{
  margin-top:36px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:16px 20px; font-family:var(--font-mono); font-size:.86rem;
}
.rift-ticker .row{ display:flex; justify-content:space-between; padding:5px 0; }
.rift-ticker .lbl{ color:var(--ink-soft); }
.rift-ticker .val{ color:var(--neon-green); }
.rift-ticker .val.warn{ color:var(--neon-amber); }

.hero-visual{ position:relative; aspect-ratio:1/1; }
.hero-visual .frame{ position:absolute; inset:0; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); }
.hero-visual .frame img{ width:100%!important; height:100%!important; object-fit:cover!important; }
.hero-visual .scan-overlay{
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(34,229,255,.05) 0 2px, transparent 2px 4px);
  mix-blend-mode:overlay;
}
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } .hero-visual{ order:-1; max-width:420px; margin:0 auto; } }

/* ==========================================================================
   5. LORE — terminal transcript style
   ========================================================================== */
.terminal{
  background:#050708; border:1px solid var(--border); border-radius:var(--radius-md);
  padding:28px 30px; font-family:var(--font-mono); font-size:.92rem; max-width:820px; margin:0 auto;
  box-shadow:inset 0 0 40px rgba(34,229,255,.04);
}
.terminal .bar{ display:flex; gap:6px; margin-bottom:18px; }
.terminal .bar span{ width:11px; height:11px; border-radius:50%; background:var(--border); }
.terminal .line{ margin-bottom:10px; }
.terminal .prompt{ color:var(--neon-green); }
.terminal .out{ color:var(--ink-soft); }
.cursor-blink{ display:inline-block; width:8px; height:1em; background:var(--neon-green); vertical-align:middle; animation:blink 1s step-end infinite; margin-left:2px; }
@keyframes blink{ 50%{ opacity:0; } }

.lore-facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:40px; max-width:820px; margin-left:auto; margin-right:auto; }
.lore-fact{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); padding:20px; text-align:center; }
.lore-fact b{ display:block; font-family:var(--font-display); font-size:1.7rem; color:var(--neon-cyan); }
.lore-fact span{ font-size:.78rem; color:var(--ink-soft); font-family:var(--font-mono); text-transform:uppercase; }
@media (max-width:640px){ .lore-facts{ grid-template-columns:1fr; } }

/* ==========================================================================
   6. RUNNERKLASSEN — angular hex cards
   ========================================================================== */
.class-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:44px; }
.class-card{
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md);
  overflow:hidden; transition:border-color .2s ease, transform .2s ease; cursor:default;
}
.class-card:hover{ border-color:var(--neon-cyan); transform:translateY(-4px); }
.class-card .portrait{ aspect-ratio:4/5; overflow:hidden; position:relative; }
.class-card .portrait img{ width:100%!important; height:100%!important; object-fit:cover!important; }
.class-card .portrait::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(10,13,20,.9),transparent 55%); }
.class-card .class-tag{ position:absolute; bottom:12px; left:12px; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius:999px; }
.tag-striker{ background:rgba(255,62,201,.16); color:var(--neon-pink); border:1px solid var(--neon-pink); }
.tag-phantom{ background:rgba(178,108,255,.16); color:var(--rare-purple); border:1px solid var(--rare-purple); }
.tag-anchor{ background:rgba(34,229,255,.16); color:var(--neon-cyan); border:1px solid var(--neon-cyan); }
.tag-weaver{ background:rgba(57,255,156,.16); color:var(--neon-green); border:1px solid var(--neon-green); }
.class-card .info{ padding:16px 18px 20px; }
.class-card .stat-bars{ margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.class-card .stat-line{ display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:.72rem; color:var(--ink-soft); }
.class-card .stat-track{ flex:1; height:5px; background:var(--border); border-radius:999px; overflow:hidden; }
.class-card .stat-fill{ display:block; height:100%; }
@media (max-width:960px){ .class-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .class-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   7. LOADOUT BUILDER widget
   ========================================================================== */
.loadout-panel{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:46px; }
.loadout-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:26px; margin-top:34px; }
.loadout-col h4{ font-family:var(--font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft); margin-bottom:14px; }
.loadout-option{
  display:flex; justify-content:space-between; align-items:center; width:100%; text-align:left;
  background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:12px 14px; margin-bottom:8px; cursor:pointer; font-family:var(--font-body); font-size:.88rem; color:var(--ink);
}
.loadout-option:hover{ border-color:var(--neon-cyan); }
.loadout-option.active{ border-color:var(--neon-green); background:rgba(57,255,156,.06); color:#fff; }
.loadout-option .tick{ opacity:0; color:var(--neon-green); }
.loadout-option.active .tick{ opacity:1; }
.loadout-stats{ margin-top:36px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.loadout-stat .stat-label{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:.78rem; color:var(--ink-soft); margin-bottom:6px; text-transform:uppercase; }
.loadout-bar{ height:8px; background:var(--border); border-radius:999px; overflow:hidden; }
.loadout-bar span{ display:block; height:100%; transition:width .25s ease; }
.bar-schade span{ background:var(--neon-pink); }
.bar-snelheid span{ background:var(--neon-cyan); }
.bar-overleving span{ background:var(--neon-green); }
@media (max-width:820px){ .loadout-grid, .loadout-stats{ grid-template-columns:1fr; } }

/* ==========================================================================
   8. RIFT SCANNER widget — loot roll
   ========================================================================== */
.scanner-panel{ background:linear-gradient(160deg,#0F1420,#070A10); border:1px solid var(--border); border-radius:var(--radius-lg); padding:46px; text-align:center; }
.scanner-core{
  width:180px; height:180px; margin:30px auto; border-radius:50%; position:relative;
  border:2px solid var(--neon-cyan); display:flex; align-items:center; justify-content:center;
  box-shadow:var(--glow-cyan);
}
.scanner-core::before{ content:''; position:absolute; inset:14px; border:1px dashed rgba(34,229,255,.4); border-radius:50%; animation:spin 6s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.scanner-core .icon{ font-size:2.4rem; }
.scanner-core.is-scanning{ animation:pulse-scan .5s ease-in-out infinite alternate; }
@keyframes pulse-scan{ from{ box-shadow:0 0 18px rgba(34,229,255,.4); } to{ box-shadow:0 0 40px rgba(34,229,255,.85); } }

.loot-result{ min-height:70px; margin-top:10px; }
.loot-item{ display:inline-flex; flex-direction:column; align-items:center; gap:6px; padding:14px 26px; border-radius:var(--radius-md); border:1px solid; }
.rarity-common{ border-color:#8894A8; color:#C3CBDA; }
.rarity-rare{ border-color:var(--rare-blue); color:var(--rare-blue); box-shadow:0 0 16px rgba(76,141,255,.35); }
.rarity-epic{ border-color:var(--rare-purple); color:var(--rare-purple); box-shadow:0 0 16px rgba(178,108,255,.35); }
.rarity-legendary{ border-color:var(--rare-gold); color:var(--rare-gold); box-shadow:0 0 20px rgba(255,201,60,.45); }
.scan-btn{ margin-top:20px; }
.scan-log{ margin-top:24px; font-family:var(--font-mono); font-size:.78rem; color:var(--ink-soft); text-align:left; max-width:420px; margin-left:auto; margin-right:auto; }
.scan-log li{ padding:4px 0; border-bottom:1px dashed var(--border); }

/* ==========================================================================
   9. RANGLIJST — leaderboard widget with tabs
   ========================================================================== */
.leaderboard-tabs{ display:flex; gap:10px; margin:34px 0 20px; flex-wrap:wrap; }
.lb-tab{
  font-family:var(--font-mono); font-size:.8rem; text-transform:uppercase; letter-spacing:.05em;
  padding:9px 18px; border-radius:999px; border:1px solid var(--border); background:var(--bg-card); color:var(--ink-soft); cursor:pointer;
}
.lb-tab.active{ border-color:var(--neon-green); color:var(--neon-green); }
.lb-table{ width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:.9rem; }
.lb-table th{ text-align:left; padding:12px 14px; color:var(--ink-soft); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid var(--border); }
.lb-table td{ padding:13px 14px; border-bottom:1px solid var(--border); }
.lb-rank{ font-weight:700; color:var(--neon-cyan); }
.lb-rank.top1{ color:var(--rare-gold); }
.lb-rank.top2{ color:#C3CBDA; }
.lb-rank.top3{ color:#CE8946; }

/* ==========================================================================
   10. RUNNERVERSLAGEN — arcade high-score style reviews
   ========================================================================== */
.report-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
.report-card{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); padding:22px; position:relative; }
.report-card .score-tag{ font-family:var(--font-mono); font-size:.72rem; color:var(--neon-green); text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; display:block; }
.report-card blockquote{ margin:0 0 14px; font-size:.98rem; color:var(--ink); font-style:normal; }
.report-card .author{ font-family:var(--font-mono); font-size:.8rem; color:var(--ink-soft); }
.report-card .author b{ color:#fff; }
@media (max-width:960px){ .report-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .report-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   11. TRANSMISSIES — blog as terminal log list
   ========================================================================== */
.transmission-item{ display:grid; grid-template-columns:200px 1fr; gap:28px; padding:30px 0; border-bottom:1px solid var(--border); }
.transmission-item .thumb{ border-radius:var(--radius-md); overflow:hidden; aspect-ratio:4/3; border:1px solid var(--border); }
.transmission-item .thumb img{ width:100%!important; height:100%!important; object-fit:cover!important; aspect-ratio:4/3!important; }
.transmission-item .tag{ font-family:var(--font-mono); font-size:.72rem; color:var(--neon-cyan); text-transform:uppercase; letter-spacing:.08em; }
@media (max-width:720px){ .transmission-item{ grid-template-columns:1fr; } }

/* ==========================================================================
   12. CTA / PLATFORMS
   ========================================================================== */
.cta-band{
  background:linear-gradient(120deg,#0F1420,#050708); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:60px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
}
.cta-band::before{ content:''; position:absolute; inset:0; box-shadow:inset 0 0 80px rgba(57,255,156,.06); pointer-events:none; }
.cta-band h2{ margin-bottom:8px; }
.badge{ display:flex; align-items:center; gap:8px; background:var(--bg-card); border:1px solid var(--border); padding:9px 16px; border-radius:999px; font-family:var(--font-mono); font-size:.8rem; }
.platform-icons{ display:flex; gap:14px; }

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.site-footer{ background:#050708; border-top:1px solid var(--border); padding:70px 0 26px; margin-top:60px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
.footer-grid h4{ color:#fff; font-family:var(--font-mono); font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; }
.footer-grid a{ color:var(--ink-soft); font-size:.9rem; line-height:2.1; }
.footer-grid a:hover{ color:var(--neon-cyan); }
.footer-logo{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; color:#fff; font-size:1.3rem; margin-bottom:14px; }
.footer-bottom{ border-top:1px solid var(--border); margin-top:50px; padding-top:22px; display:flex; justify-content:space-between; font-size:.8rem; color:var(--ink-soft); font-family:var(--font-mono); flex-wrap:wrap; gap:10px; }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }

/* ==========================================================================
   14. GENERIC PAGE
   ========================================================================== */
.page-hero{ padding:64px 0 20px; text-align:center; }
.page-hero p{ max-width:640px; margin:0 auto; font-size:1.05rem; }
.prose{ max-width:760px; margin:0 auto; }
.prose h2{ margin-top:1.4em; color:#fff; }
.prose p{ color:var(--ink-soft); }
.prose blockquote{ border-left:3px solid var(--neon-green); padding:6px 0 6px 22px; margin:28px 0; color:#fff; font-size:1.1rem; }
.timeline-year{ display:flex; gap:24px; margin:34px 0; align-items:flex-start; }
.timeline-year .yr{ font-family:var(--font-mono); color:var(--neon-cyan); font-size:1.1rem; min-width:100px; }
.tier-table{ width:100%; border-collapse:collapse; margin:30px 0; background:var(--bg-card); border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border); }
.tier-table th,.tier-table td{ padding:14px 16px; text-align:left; border-bottom:1px solid var(--border); font-size:.92rem; }
.tier-table th{ background:var(--bg-panel); font-family:var(--font-mono); font-size:.76rem; text-transform:uppercase; letter-spacing:.05em; color:var(--neon-cyan); }
.faq-item{ border-bottom:1px solid var(--border); padding:18px 0; }
.faq-item summary{ cursor:pointer; font-weight:700; font-family:var(--font-display); text-transform:uppercase; font-size:.98rem; color:#fff; }
.faq-item p{ margin-top:12px; }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:flex-start; }
.form-field{ margin-bottom:18px; }
.form-field label{ display:block; font-family:var(--font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; color:var(--ink-soft); }
.form-field input,.form-field textarea,.form-field select{
  width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-sm);
  font-family:var(--font-body); font-size:.95rem; background:var(--bg-card); color:var(--ink);
}
.form-field input:focus,.form-field textarea:focus{ border-color:var(--neon-cyan); outline:none; }
.hp-field{ position:absolute; left:-9999px; top:-9999px; }
.form-note{ font-size:.8rem; color:var(--ink-soft); margin-top:6px; }
.notice{ padding:14px 18px; border-radius:var(--radius-sm); margin-bottom:20px; font-family:var(--font-mono); font-size:.85rem; border:1px solid; }
.notice-success{ background:rgba(57,255,156,.08); border-color:var(--neon-green); color:var(--neon-green); }
.notice-error{ background:rgba(255,62,201,.08); border-color:var(--neon-pink); color:var(--neon-pink); }
.review-form-block{ background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius-lg); padding:38px; margin-top:50px; }

/* ==========================================================================
   15. COOKIE BANNER
   ========================================================================== */
.cookie-banner{ position:fixed; left:0; right:0; bottom:0; z-index:200; background:#050708; border-top:1px solid var(--neon-green); padding:18px 0; transform:translateY(120%); transition:transform .4s ease; }
.cookie-banner.is-visible{ transform:translateY(0); }
.cookie-banner .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.cookie-banner p{ margin:0; font-family:var(--font-mono); font-size:.85rem; max-width:640px; }
.cookie-actions{ display:flex; gap:12px; flex-shrink:0; }

/* ==========================================================================
   16. SINGLE / BLOG INDEX
   ========================================================================== */
.entry-content{ max-width:760px; margin:0 auto; }
.entry-content h2{ margin-top:1.4em; }
.entry-content p{ color:var(--ink-soft); }
.entry-meta{ display:flex; gap:14px; align-items:center; color:var(--ink-soft); font-family:var(--font-mono); font-size:.82rem; margin-bottom:28px; }
.post-list-item{ display:grid; grid-template-columns:220px 1fr; gap:26px; padding:28px 0; border-bottom:1px solid var(--border); }
.post-list-item .thumb{ border-radius:var(--radius-md); overflow:hidden; aspect-ratio:4/3; border:1px solid var(--border); }
.post-list-item .thumb img{ width:100%!important; height:100%!important; object-fit:cover!important; aspect-ratio:4/3!important; }
@media (max-width:640px){ .post-list-item{ grid-template-columns:1fr; } }