.modal{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 999;
}
.modal[aria-hidden="true"]{ display:none; }

.modal__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.45);
}

.modal__panel{
  position: relative;
  width: min(820px, calc(100% - 24px));
  background: var(--paper);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
  z-index: 2;
}

.modal__close{
  position:absolute; top:10px; right:10px;
  width:36px; height:36px; border-radius:999px;
  border:1px solid rgba(31,41,55,.12);
  background:#fff; cursor:pointer;
  font-size:20px; line-height:0;
}

.modal__media{ background:#f2f2f2; }
/* .modal__img{ width:100%; height:280px; object-fit: cover; } */

.modal__body{ padding: 14px 16px 16px; }
.modal__title{ margin:0 0 6px; }
.modal__desc{ margin:0 0 12px; color:var(--muted); }

.modal__actions{ display:flex; gap:10px; flex-wrap:wrap; }
@media (max-width: 520px){ .modal__actions .btn{ width:100%; } }


.modal_img {
    width: 100%;
    height: auto; /* Pozwala na proporcjonalne dopasowanie wysokości do szerokości */
    object-fit: contain; /* Zapewnia, że zdjęcie będzie zachować swoje proporcje i nie zostanie obcięte */
}