/* style.css */

/* Общие стили */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  text-align: center;
}

header {
  padding: 20px;
  background-color: #333;
  color: #fff;
}

h1 {
  margin: 0;
}

/* Галерея */
.gallery {
  display: flex;
  flex-wrap: wrap;      /* фото переходят на новую строку */
  justify-content: center;
  gap: 10px;            /* расстояние между фото */
  padding: 10px;
}

.gallery img {
  max-width: 50%;      /* фото не выходят за предел блока */
  height: auto;         /* сохраняем пропорции */
  flex: 1 1 300px;      /* минимальная ширина 300px, растягиваем при необходимости */
  object-fit: cover;    /* фото масштабируется без искажений */
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.3s;
}

.gallery img:hover {
  transform: scale(1.05);  /* легкое увеличение при наведении */
}

/* Лайтбокс */
#lightbox {
  display: none;
  position: fixed;
  z-index: 1000;
  padding-top: 60px;
  left: 0;
  top: 0;
  width: 50%;
  height: 50%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
}

.lightbox-content {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 80vh;
}

.close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: #fff;
  font-weight: bold;
  font-size: 40px;
  user-select: none;
}

.prev { left: 0; }
.next { right: 0; }

/* Футер */
footer {
  padding: 20px;
  background-color: #333;
  color: #fff;
}

/* Адаптив */
@media screen and (max-width: 768px) {
  .gallery img {
    flex: 1 1 45%;  /* две фото в ряд на планшетах */
  }
}

@media screen and (max-width: 480px) {
  .gallery img {
    flex: 1 1 90%;  /* одна фото в ряд на телефонах */
  }
}