.sprzet-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:30px; margin-top:40px; } .sprzet-card{ width:250px; background:#ffffff; border-radius:12px; padding:20px; text-align:center; box-shadow:0 10px 25px rgba(0,0,0,0.08); transition:transform .2s ease, box-shadow .2s ease; cursor:pointer; } .sprzet-card:hover, .sprzet-card:focus-visible{ transform:translateY(-6px); box-shadow:0 20px 40px rgba(0,0,0,0.14); } .sprzet-card img{ width:100%; object-fit:cover; border-radius:8px; } .sprzet-card h2, .sprzet-card h3{ margin-top:14px; font-size:1.15rem; } .sprzet-card p{ margin-top:8px; } .more{ color:#2a7de1; font-weight:700; display:block; margin-top:6px; } .lightbox{ position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.9); display:none; align-items:center; justify-content:center; z-index:9999; } .lightbox img{ max-width:90%; max-height:90%; } .lightbox.active{ display:flex; } .modal{ display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); align-items:center; justify-content:center; z-index:2000; padding:20px; } .modal-content{ background:white; padding:30px; border-radius:12px; max-width:520px; width:90%; box-shadow:0 25px 50px rgba(0,0,0,.3); margin-top:80px; animation:modalOpen .25s ease; } .close{ cursor:pointer; font-size:26px; float:right; background:none; border:0; } #m_img{ border-radius:8px; } #m_params{ list-style:none; padding-left:0; margin-top:16px; display:grid; grid-template-columns:repeat(2,1fr); gap:10px; } #m_params li{ background:#f5f7fb; padding:10px 12px; border-radius:8px; font-size:14px; display:flex; align-items:center; gap:8px; } @keyframes modalOpen{ from{ opacity:0; transform:translateY(20px) scale(.97); } to{ opacity:1; transform:translateY(0) scale(1); } } @media (max-width:640px){ .modal-content{ margin-top:40px; padding:22px; } #m_params{ grid-template-columns:1fr; } }