/* ---- gallery grid + cards ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px;padding:30px 24px 40px}

.card{background:rgba(255,255,255,.045);border:1px solid rgba(255,243,220,.12);
      border-radius:20px;overflow:hidden;
      transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, border-color .35s ease;
      animation:fadeUp .6s ease both}
.card:hover{transform:translateY(-5px);border-color:rgba(255,243,220,.3);
            box-shadow:0 26px 60px rgba(0,0,0,.55)}
.ph{aspect-ratio:150/170;overflow:hidden;background:#09172b}
.ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.card:hover .ph img{transform:scale(1.03)}

figcaption{display:flex;align-items:center;gap:12px;padding:14px 16px 16px}
.num{font:700 12px/1 Helvetica,Arial,sans-serif;letter-spacing:.14em;
     color:rgba(255,243,220,.45);padding-top:2px}
.meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.meta b{font-size:15px;font-weight:700}
.meta small{font-size:10.5px;letter-spacing:.2em;color:rgba(255,243,220,.55);
            font-family:Helvetica,Arial,sans-serif}
.meta em{font-style:normal;font-size:11px;color:var(--lime);margin-top:2px}
.sw{width:12px;height:12px;border-radius:4px;margin-inline-start:auto;
    box-shadow:0 0 0 3px rgba(255,243,220,.09)}

.ft{border-top:1px solid rgba(255,243,220,.1);padding:26px 0 10px}
.ft p{font-size:12px;line-height:1.9;color:rgba(255,243,220,.5);max-width:70ch}

@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

@media(max-width:560px){
  .bar-in{gap:12px;padding:12px 16px}
  .titles h1{font-size:15px}
  .titles p{display:none}
  .btn{display:none}
  .hero{padding-top:38px}
  .lead{font-size:14.5px}
  .grid{grid-template-columns:1fr;gap:20px}
}