:root{
  --bg:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:rgba(15,23,42,.10);
  --soft:rgba(15,23,42,.04);
  --brand:#408E22;
  --dark:#0b1220;
  --dark2:#101a2f;
  --darkgreen:#122C1F;
  --radius:18px;
  --shadow:0 10px 25px rgba(2,6,23,.06);

  /* Contato: tema verde coerente com --darkgreen */
  --contact-accent:#1f6f4a;
  --contact-accent-soft:rgba(31,111,74,.14);
  --contact-ring:rgba(31,111,74,.18);

  /* Categorias: verde que combina com --darkgreen (legível) */
  --cat-accent: #1f6f4a;
  --cat-accent-soft: rgba(31,111,74,.12);
  --cat-accent-border: rgba(31,111,74,.22);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Calibri Light, system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.65;
  overflow-x:hidden;
}

.lang-fallback-notice{
  background:#fff3cd;
  color:#664d03;
  border-bottom:1px solid #ffecb5;
  padding:10px 14px;
  font-size:14px;
  text-align:center;
}

a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.container{max-width:1100px;margin:0 auto;padding:6px}
.site-main{min-height:70vh}

h1{margin:0 0 8px;font-size:32px;line-height:1.15;text-align:left;}
h2{margin:15px 0 8px 0;font-size:26px;line-height:1.5;text-align:left;}

/* Header */
.site-header{
  position:static;
  z-index:auto;
  background:#fff;
  border-bottom:1px solid var(--line);
  overflow:visible;
}

.topbar{background:var(--darkgreen);color:#e2e8f0}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.topbar-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.social{display:flex;align-items:center;gap:0px}
.icon-link{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;}
.icon-link:hover{background:rgba(255,255,255,.14);text-decoration:none}
.icon{width:19px;height:19px;display:inline-block;position:relative;background-size:contain;background-repeat:no-repeat;background-position:center;}
.icon::before{content:"";position:absolute;inset:0;border-radius:3px;background:rgba(255,255,255,.78)}

/* NÃO deixar o ::before cobrir os ícones reais (redes + stros) */
.icon-ig::before,
.icon-fb::before,
.icon-yt::before,
.icon-tt::before,
.icon-pi::before,
.icon-stros::before{display:none}

/* Ícones reais das redes */
.icon-ig{background-image:url('../img/icon-instagram.png')}
.icon-fb{background-image:url('../img/icon-facebook.png')}
.icon-yt{background-image:url('../img/icon-youtube.png')}
.icon-tt{background-image:url('../img/icon-tiktok.png')}
.icon-pi{background-image:url('../img/icon-pinterest.png')}
.icon-stros{background-image:url('../img/icon-stros.png')}

.icon[class*="icon-flag-"]::before,
.icon.icon-globe::before{display:none}

/* flags */
.icon-flag-pt{background-image:url('/assets/img/flags-br.png')}
.icon-flag-us{background-image:url('/assets/img/flags-us.png')}
.icon-flag-es{background-image:url('/assets/img/flags-es.png')}
.icon-flag-fr{background-image:url('/assets/img/flags-fr.png')}
.icon-flag-it{background-image:url('/assets/img/flags-it.png')}
.icon-flag-de{background-image:url('/assets/img/flags-de.png')}
.icon-globe{background-image:url('/assets/img/flags-globe.png')}

.stros-link{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border-radius:999px;}
.stros-link:hover{text-decoration:none;background:rgba(255,255,255,.14)}
.stros-text{font-size:12px;letter-spacing:.12em}

.lang-switch{display:flex;gap:0px;flex-wrap:wrap}
.lang{
  width:28px;
  height:28px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:3px;
  background:transparent;
}
.lang-flag{
  width:16px;
  height:16px;
  display:block;
  object-fit:cover;
}
.lang:hover{background:rgba(255,255,255,.14);text-decoration:none}
.lang.is-active{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.28)}

.brandbar{
  background:url("../img/bg_topo.jpg") center/cover no-repeat;
  color:#fff;
}

/* topo menor + logo menor (80%) */
.brandbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-logo{
  max-width:280px;
  height:auto;
  border-radius:14px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.0);
  background:rgba(255,255,255,.0);
}

.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:14px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);font-weight:800}
.brand-name{font-size:20px;font-weight:800;letter-spacing:.02em}
.header-ad{flex:1;max-width:520px}
.ad-slot{border:1px dashed rgba(255,255,255,.35);border-radius:14px;padding:14px;text-align:center;color:rgba(255,255,255,.86);background:rgba(255,255,255,.06)}
.ad-slot-header{min-height:70px;display:flex;align-items:center;justify-content:center}

/* Menu */
.menubar{
  position:sticky;
  top:0;
  z-index:9999;
  background:#fff;
  border-top:1px solid rgba(255,255,255,.0);
  border-bottom:1px solid var(--line);
}
.menubar-inner{display:flex;align-items:center;gap:12px}

/* menu toggle hamburger */
.menu-toggle{
  display:none;
  border:1px solid var(--line);
  background:#fff;
  border-radius:12px;
  cursor:pointer;

  width:44px;
  height:44px;
  padding:0;
  align-items:center;
  justify-content:center;

  font-size:0;
  color:transparent;
  line-height:0;

  position:relative;
}
.menu-toggle:hover{background:var(--soft)}
.menu-toggle::before{
  content:"";
  display:block;
  width:18px;
  height:2px;
  background:var(--text);
  border-radius:2px;
  box-shadow:
    0 6px 0 var(--text),
    0 12px 0 var(--text);
}

.menu{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.menu-link{
  padding:10px 12px;
  border-radius:12px;
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:.08em;
  color:var(--text);
  border:1px solid transparent;
}
.menu-link:hover{text-decoration:none;background:var(--soft);border-color:var(--line)}
.menu-link.is-active{background:rgba(14,165,233,.10);border-color:rgba(14,165,233,.25)}

.menu-dropdown{position:relative}
.menu-dropbtn{cursor:pointer}
.menu-drop{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  min-width:220px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:8px;
  z-index:60;
}
.menu-dropdown:hover .menu-drop{display:block}
.menu-drop a{display:block;padding:10px 10px;border-radius:10px;color:var(--text);text-decoration:none}
.menu-drop a:hover{background:var(--soft)}
.menu-drop-sep{height:1px;background:var(--line);margin:8px 6px}

.menu-search{margin-left:auto;display:flex;align-items:center;gap:8px}
.menu-search input{
  width:min(340px,34vw);
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
}
.menu-search button{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
}
.menu-search button:hover{background:var(--soft)}
.menubar-search-mobile{display:none}

/* Layout */
.page-title{margin:18px 0 10px}
.page-title h1{margin:0;font-size:28px}
.page-title p{margin:6px 0 0;color:var(--muted)}

.layout-2col{display:flex;align-items:flex-start;gap:24px}
.main-left{flex:0 0 68%}
.main-right{flex:0 0 32%}

.post-list{display:flex;flex-direction:column;gap:30px}
.post-row{
  display:grid;
  grid-template-columns:190px 1fr;
  gap:14px;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 1px 0 rgba(2,6,23,.02);
}
.post-row:hover{box-shadow:var(--shadow)}
.post-row-media{display:block;background:var(--soft)}
.post-row-media img{width:100%;height:100%;min-height:140px;object-fit:cover}
.post-row-body{padding:14px}
.post-row-title{margin:0 0 6px;font-size:18px;line-height:1.25;text-transform:uppercase}
.post-row-meta{margin:0 0 8px;color:var(--muted);font-size:13px}
.post-row-excerpt{margin:0 0 10px;color:var(--text)}
.read-more{display:inline-flex;align-items:center;gap:8px;color:var(--brand);font-weight:700}
.read-more:hover{text-decoration:none;opacity:.9}

/* Categorias */
.cats-grid,
.cats{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  margin:8px 0 20px;
}
.cat-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:0 1px 0 rgba(2,6,23,.02);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  min-height:140px;
}
.cat-card:hover{
  text-decoration:none;
  box-shadow:var(--shadow);
  transform:translateY(-1px);
  border-color:var(--cat-accent-border);
}
.cat-card-title{
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:14px;
  color:var(--text);
}
.cat-card-desc{color:var(--muted);font-size:13px;line-height:1.55}
.cat-card-cta{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  color:var(--cat-accent);
}
.cat-card:hover .cat-card-cta{text-decoration:none;filter:saturate(1.05)}

.sidebar{display:flex;flex-direction:column;gap:14px}
.widget{
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:0 1px 0 rgba(2,6,23,.02);
  overflow:hidden;
}
.widget h3{margin:0;padding:12px 14px;border-bottom:1px solid var(--line);font-size:14px;text-transform:uppercase;letter-spacing:.10em}
.widget-body{padding:12px 14px}
.popular-list{display:flex;flex-direction:column;gap:10px}
.popular-item{display:grid;grid-template-columns:56px 1fr;gap:10px;align-items:center}
.popular-item img{width:56px;height:56px;border-radius:12px;object-fit:cover;border:1px solid var(--line)}
.popular-item a{font-weight:700;line-height:1.25}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;padding:8px 10px;border:1px solid var(--line);border-radius:999px;font-size:12px}
.chip:hover{text-decoration:none;background:var(--soft)}
.widget-ad{min-height:240px;display:flex;align-items:center;justify-content:center;border:1px dashed var(--line);border-radius:14px;color:var(--muted)}
.projects{display:flex;flex-direction:column;gap:10px}
.project-item{display:grid;grid-template-columns:56px 1fr;gap:10px;align-items:center}
.project-item img{width:56px;height:56px;border-radius:12px;object-fit:cover;border:1px solid var(--line)}
.project-item a{font-weight:700}

/* Article */
.article{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.article-head{padding:18px 18px 6px}
.article-head h1{margin:0 0 8px;font-size:32px;line-height:1.15}
.article-meta{margin:0;color:var(--muted);font-size:18px}
.article-media img{width:100%;max-height:440px;object-fit:cover}
.article-body{padding:30px;font-size:18px;text-align:justify}
.article-body p{margin:0 0 1em}
.article-body a{color:var(--brand);text-decoration:underline}
.article-readalso{padding:14px 18px;border-top:1px solid var(--line);background:rgba(15,23,42,.02)}
.comments-box{border:1px dashed var(--line);border-radius:14px;padding:16px;color:var(--muted);text-align:center;background:#fff}

/* Figuras */
.cg-figure{margin:18px 0}
.cg-figure img{
  width:100%;
  height:auto;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--soft);
}
.cg-figure figcaption{
  margin-top:10px;
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
  text-align:center;
}
.cg-figure.cg-2col{display:grid;grid-template-columns:repeat(2, 1fr);gap:12px;align-items:start}
.cg-figure.cg-2col figcaption{grid-column:1 / -1;margin-top:2px}
.cg-figure.cg-3col{display:grid;grid-template-columns:repeat(3, 1fr);gap:12px;align-items:start}
.cg-figure.cg-3col figcaption{grid-column:1 / -1;margin-top:2px}
@media (max-width:980px){.cg-figure.cg-3col{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:720px){
  .cg-figure.cg-2col,
  .cg-figure.cg-3col{grid-template-columns:1fr}
}

/* Pagination */
.pagination{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}
.pagination a,.pagination span{padding:10px 12px;border-radius:12px;border:1px solid var(--line);text-decoration:none}
.pagination a:hover{background:var(--soft)}
.pagination .is-current{background:rgba(14,165,233,.10);border-color:rgba(14,165,233,.25)}

/* Footer */
.site-footer{background:var(--darkgreen);color:#e2e8f0;margin-top:26px}
.footer-inner{display:grid;grid-template-columns:1.8fr 1.8fr 1.2fr;gap:18px;padding:22px 6px}
.footer-col{padding:20px 30px;}
.footer-col h4{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.10em;color:#fff}
.footer-muted{margin:0;color:rgba(226,232,240,.82);font-size:14px}
.footer-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.footer-links a{color:#e2e8f0}
.footer-brand{display:flex;gap:14px;align-items:flex-start}
.footer-logo{width:120px;height:auto;background:transparent;border:none;border-radius:0;box-shadow:none;object-fit:contain;}
.footer-site h4{font-size:1.3em;margin-top:2px;margin-bottom:0;}
.footer-site p{margin-top:0px;}
.footer-copy{margin-top:20px;font-size:12px;color:rgba(226,232,240,.72)}
.footer-social{display:flex;gap:0px;flex-wrap:wrap;margin-bottom:10px}
.footer-lang{display:flex;gap:0px;flex-wrap:wrap}

/* Form de Contato */
.hero-contact{padding:18px 6px 6px;}
.hero-contact-inner{
  border:1px solid var(--line);
  background:linear-gradient(180deg, var(--contact-accent-soft), rgba(15,23,42,.02));
  border-radius:16px;
  padding:18px;
  box-shadow:0 1px 0 rgba(2,6,23,.02);
}
.hero-contact h1{margin:0 0 6px;font-size:30px;line-height:1.15}
.hero-contact p{margin:0;color:var(--muted)}

.contact-wrap{padding:10px 6px 26px;}
.contact-card{
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.contact-card-head{
  padding:16px 18px;
  border-bottom:1px solid var(--line);
  background:rgba(15,23,42,.02);
}
.contact-card-head h2{margin:0;font-size:18px;text-transform:uppercase;letter-spacing:.08em}

.contact-form{padding:18px;}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-row label{
  display:block;
  font-size:13px;
  letter-spacing:.04em;
  color:var(--muted);
  margin:0 0 6px;
  text-transform:uppercase;
}
.form-row input,
.form-row textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 12px;
  background:#fff;
  outline:none;
  transition:box-shadow .15s ease, border-color .15s ease;
  font-size:18px;
}
.form-row textarea{resize:vertical;min-height:160px;}
.form-row input:focus,
.form-row textarea:focus{
  border-color:rgba(31,111,74,.55);
  box-shadow:0 0 0 4px var(--contact-ring);
}
.form-row-full{grid-column:1 / -1;}

.radio-row{display:flex;gap:10px;flex-wrap:wrap}
.radio-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  background:#fff;
}
.radio-pill:hover{background:var(--soft)}
.radio-pill input{accent-color:var(--contact-accent);transform:scale(.95)}

.contact-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:14px;
  flex-wrap:wrap;
}
.btn.btn-primary{
  background:var(--contact-accent);
  border:1px solid rgba(31,111,74,.55);
  color:#fff;
  padding:12px 16px;
  border-radius:14px;
  cursor:pointer;
  font-weight:800;
  letter-spacing:.02em;
}
.btn.btn-primary:hover{opacity:.95}

.contact-privacy{color:var(--muted);font-size:13px}
.contact-privacy a{color:var(--contact-accent);text-decoration:underline}
.contact-privacy a:hover{opacity:.9}

.notice{margin:14px 18px 0;border-radius:14px;padding:12px 14px;border:1px solid var(--line);}
.notice.is-success{background:rgba(31,111,74,.10);border-color:rgba(31,111,74,.25)}
.notice.is-error{background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.25)}

/* Rádio do contato */
.radio-inline-label{margin:0 0 6px;}
.radio-inline{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.radio-inline-item{display:inline-flex;align-items:center;gap:8px;padding:0;border:none;background:transparent;cursor:pointer;color:var(--text)}
.radio-inline-item input{accent-color:var(--contact-accent);transform:scale(.95)}
.radio-inline-item span{font-size:15px;color:var(--text)}
@media (max-width:720px){.radio-inline{gap:14px}}

/* honeypot hidden */
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
@media (max-width:720px){.contact-grid{grid-template-columns:1fr}}

/* ===========================
   RESPONSIVO (consolidado)
   =========================== */
@media (max-width:980px){
  .layout-2col{flex-direction:column;}
  .main-left,.main-right{flex:1 1 auto;width:100%;}

  /* topo */
  .brandbar-inner{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:12px 10px;
    gap:10px;
  }
  .brand{justify-content:center;width:100%}
  .brand-logo{
    max-width:160px;
    max-height:160px;
    margin:0 auto;
  }

  /* menubar: | menu | busca | (e menu abre abaixo) */
  .menubar-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
  }
  .menu-toggle{display:inline-flex;flex:0 0 auto;}
  .menubar-search-mobile{display:block;flex:1 1 auto;min-width:0;}
  .menu-search{display:none;} /* some a busca desktop no mobile */

  .menu-search.is-mobile{
    display:flex;
    gap:8px;
    margin:0;
    width:auto;
    align-items:center;
  }
  .menu-search.is-mobile input{flex:1 1 auto;min-width:0;width:auto;}
  .menu-search.is-mobile button{flex:0 0 auto;white-space:nowrap;}

  .menu{
    width:100%;
    flex-basis:100%;
    display:none;
    padding:10px 0 0;
  }
  .menu.is-open{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
  }

  .header-ad{max-width:100%}
  .post-row{grid-template-columns:1fr}
  .post-row-media img{min-height:180px}

  .footer-inner{grid-template-columns:1fr}
  .cats-grid,.cats{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:720px){
  /* Pagination: manter tudo em 1 linha no mobile */
  .pagination{
    flex-wrap: nowrap;            /* não quebra linha */
    align-items: center;
    overflow-x: auto;             /* se não couber, rola pro lado */
    -webkit-overflow-scrolling: touch;
    gap: 10px;
  }

  .pagination a,
  .pagination span{
    white-space: nowrap;          /* impede quebra dentro do botão/texto */
    flex: 0 0 auto;               /* cada item mantém seu tamanho */
    padding: 8px 10px;            /* um pouco menor no mobile */
    font-size: 13px;
  }

  .cats-grid,.cats{grid-template-columns:1fr}

  /* ===== FOOTER MOBILE: logo -> slogan -> privacidade -> direitos ===== */
  .footer-brand{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:10px;
  }
  .footer-logo{
    width:110px;
    height:auto;
    margin:0 auto;
  }
  .footer-brand-text{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
  }
  /* esconde o nome no mobile para ficar logo -> slogan */
  .footer-site h4{display:none;}
  .footer-site .footer-muted{margin:0 0 10px;}
  .footer-site p{margin:0;}
  .footer-site p a{display:inline-block;margin-top:2px;}
  .footer-copy{margin-top:10px;}

  .grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
  .related-grid{grid-template-columns:1fr}
}

@media (max-width:480px){
  .grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .post-title{font-size:1.6rem}
}

/* Lightbox */
.lightbox{position:fixed;inset:0;display:none;z-index:20000}
.lightbox[aria-hidden="false"]{display:block}
.lightbox-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.72)}
.lightbox-dialog{
  position:relative;
  max-width:min(1000px,92vw);
  margin:6vh auto 0;
  background:#fff;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.14);
  overflow:hidden;
  box-shadow:0 18px 45px rgba(0,0,0,.35);
}
.lightbox-figure{margin:0}
#lightboxImg{
  width:100%;
  height:auto;
  display:block;
  max-height:78vh;
  object-fit:contain;
  background:#000;
}
#lightboxCap{
  padding:10px 12px;
  color:rgba(226,232,240,.86);
  border-top:1px solid rgba(255,255,255,.12);
  min-height:44px;
  background:rgba(2,6,23,.86);
  font-size:13px;
  letter-spacing:.02em;
}

.lightbox-close,.lightbox-prev,.lightbox-next{
  position:absolute;
  top:14px;
  width:44px;
  height:44px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(15,23,42,.42);
  color:#fff;
  cursor:pointer;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 25px rgba(0,0,0,.28);
  transition:transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover{
  background:rgba(15,23,42,.62);
  border-color:rgba(255,255,255,.32);
  transform:translateY(-1px);
}
.lightbox-close:active,
.lightbox-prev:active,
.lightbox-next:active{transform:translateY(0);opacity:.92}

.lightbox-prev{left:14px}
.lightbox-close{right:14px}
.lightbox-next{right:64px}

.lightbox-prev,.lightbox-next{font-size:22px;font-weight:900;line-height:1}
.lightbox-close{font-size:18px;font-weight:900;line-height:1}

.lightbox-close:focus,
.lightbox-prev:focus,
.lightbox-next:focus{
  outline:none;
  box-shadow:
    0 10px 25px rgba(0,0,0,.28),
    0 0 0 4px rgba(64,142,34,.25);
}

@media (max-width:720px){
  .lightbox-close,.lightbox-prev,.lightbox-next{
    width:48px;
    height:48px;
    top:10px;
  }
  .lightbox-prev{left:10px}
  .lightbox-close{right:10px}
  .lightbox-next{right:62px}
}

@media (max-width:980px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .gallery-grid{grid-template-columns:repeat(4,1fr)}
}