Эта галерея состоит из сетки карточек и модального окна, которое открывается по клику. Внутри попапа можно листать изображения стрелками. Чтобы адаптировать галерею под свой сайт, нужно изменить всего несколько участков кода.

Настроить карточки (контент)

Все данные хранятся в массиве cards. Добавьте свои изображения, заголовки и описания:

const cards = [
  {
    title: "Ваш заголовок",
    desc: "Ваше описание",
    img: "images/your-image.jpg",
  },
];

• замените img на путь к вашим картинкам;
• обновите текст в title и desc;
• добавьте или удалите карточки по необходимости.

Поменять размеры и внешний вид карточек

Основные настройки в блоке .gallery__card:

.gallery__card {
  height: 340px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

• height — делает карточки выше/ниже;
• border-radius — меняет скругление углов;
• box-shadow — регулирует глубину тени.

Изменить сетку галереи

Ширина карточек управляется тут:

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

• значение 300px — минимальная ширина одной карточки;
• увеличьте, если хотите более крупные фото;
• уменьшите, если нужно больше карточек в ряд.

Настроить попап (модальное окно)

При клике на карточку открывается модальное окно. Изменить фон можно так:

.gallery__popup {
  background-color: rgba(10,10,10,0.75);
}

• сделайте темнее/светлее, меняя прозрачность;
• замените на градиент, если хотите более современный стиль.

Размер изображения задаётся автоматически, но можно изменить отступ:

.gallery__popup-image {
  margin-top: 48px;
}

Встроить галерею на сайт

• скопируйте HTML-секцию;
• скопируйте CSS (либо вставьте в свой файл стилей);
• вставьте блок JS перед </body>;
• обновите массив cards под свой контент;
• удостоверьтесь, что подключены jQuery, Bootstrap, OwlCarousel и Fancybox.