/* Контейнер галереї */
.gallery {
  display: flex;
  flex-wrap: wrap;              /* дозволяє переносити елементи */
  justify-content: space-between; /* рівномірний розподіл по рядку */
  width: 1128px;                /* ширина ряду */
  margin: 0 auto;               /* центрування */
  padding: 16px 0;              /* відступи зверху і знизу */
  gap: 16px;                    /* відступи між картинками */
  list-style: none;
}

/* Зображення */
.gallery img {
  width: 360px;
  height: 200px;
  object-fit: cover;
  transition: all 0.3s ease;
  cursor: pointer;
}

/* Ефект при наведенні */
.gallery img:hover {
  transform: scale(1.044); /* приблизно до 376x208 */
}

/* Модальне вікно */
.modal {
  display: none; /* приховане за замовчуванням */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(128, 128, 128, 0.8); /* сірий фон */
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* Велике зображення в модальному вікні */
.modal img {
  width: 1112px;
  height: 640px;
  object-fit: cover;
}

/* Активний стан модального вікна */
.modal.active {
  display: flex;
}