index.html

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blanchard - художественная галерея</title>
  <link rel="stylesheet" href="css/libs/normalize.css">
  <link rel="stylesheet" href="css/libs/simplebar.css">
  <link rel="stylesheet" href="css/libs/swiper-bundle.css">
  <link rel="stylesheet" href="css/libs/choises.min.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="shortcut icon" href="favicon.svg" type="image/xml+svg">
</head>

<body>
  <h1 class="visually-hidden">Blanchard - художественная галерея</h1>
  <header class="header">
    <div class="header__top-container">
      <div class="container header__container">
        <div class="header__content header__content_top">
          <div class="burger header__burger">
            <button class="burger__opener" aria-label="Открыть меню">
              <div class="burger__opener-top"></div>
              <div class="burger__opener-mid"></div>
              <div class="burger__opener-bot"></div>
            </button>
          </div>

          <div class="header__menu">
            <button class="burger-closer" aria-label="Закрыть меню">
              <span class="burger-closer-l"></span>
              <span class="burger-closer-r"></span>
            </button>

            <nav class="nav header__nav">
              <ul class="ul nav__list">
                <li class="nav__item">
                  <a class="link nav__link" href="#about">О нас</a>
                </li>
                <li class="nav__item">
                  <a class="link nav__link" href="#gallery">Галерея</a>
                </li>
                <li class="nav__item">
                  <a class="link nav__link" href="#catalogue">Каталог</a>
                </li>
                <li class="nav__item">
                  <a class="link nav__link" href="#events">События</a>
                </li>
                <li class="nav__item">
                  <a class="link nav__link" href="#books">Издания</a>
                </li>
                <li class="nav__item">
                  <a class="link nav__link" href="#projects">Проекты</a>
                </li>
                <li class="nav__item">
                  <a class="link nav__link" href="#contacts">Контакты</a>
                </li>
              </ul>
            </nav>

            <div class="nav__actions-wrapper">
              <a class="link header__log" href="">
                <svg class="log-svg" width="13" height="13" viewbox="0 0 13 13" fill="none"
                  xmlns="http://www.w3.org/2000/svg">
                  <path class="log-path"
                    d="M5.12056 9.09278L6.13889 10.1111L9.75 6.5L6.13889 2.88889L5.12056 3.90722L6.98389 5.77778H0V7.22222H6.98389L5.12056 9.09278ZM11.5556 0H1.44444C0.642778 0 0 0.65 0 1.44444V4.33333H1.44444V1.44444H11.5556V11.5556H1.44444V8.66667H0V11.5556C0 12.35 0.642778 13 1.44444 13H11.5556C12.35 13 13 12.35 13 11.5556V1.44444C13 0.65 12.35 0 11.5556 0Z"
                    fill="white" />
                </svg>
                Войти
              </a>

              <div class="nav__lang-wrapper">
                <a class="link nav__link nav__link-lang" href="./index-en.html">EN</a>
                /
                <a class="link nav__link nav__link-lang is-active" href="./index.html">RU</a>
              </div>
            </div>

          </div>

          <a class="link header__logo-link">
            <img class="logo header__logo" src="img/logo.svg" loading="lazy" alt="Blanchard logo">
          </a>

          <button class="header__search-clicker" aria-label="Поиск"></button>
          <form class="search header__search header__search-top" action="https://postman-echo.com/post" target="_blank"
            method="post">
            <input class="search__input" type="search" name="search" id="search-top" placeholder="Поиск по сайту">
            <button class="btn search__btn" type="submit" aria-label="Поиск"></button>
            <button class="btn search__cancel" type="reset" aria-label="Закрыть"></button>
          </form>

        </div>
      </div>
    </div>

    <div class="header__bottom-container">
      <div class="container header__container">
        <div class="header__content header__content_bottom">
          <ul class="ul header__dropdown-wrapper">
            <li class="dropdown header__dropdown">
              <button class="btn dropdown__btn">Реализм</button>
              <div class="dropdown__block">
                <ul class="ul dropdown__list" data-simplebar data-simplebar-aria-label="художники реализма">
                  <li class="dropdown__item"><a class="link dropdown__link" href="">Тинторетто</a></li>
                  <li class="dropdown__item"><a class="link dropdown__link" href="">Фридрих</a></li>
                  <li class="dropdown__item"><a class="link dropdown__link" href="">Леонардо</a></li>
                  <li class="dropdown__item"><a class="link dropdown__link" href="">Верроккьо</a></li>
                  <li class="dropdown__item"><a class="link dropdown__link" href="">Кандинский</a></li>
                  <li class="dropdown__item"><a class="link dropdown__link" href="">Маринетти</a></li>
                  <li class="dropdown__item"><a class="link dropdown__link" href="">Малевич</a></li>
                  <li class="dropdown__item"><a class="link dropdown__link" href="">Пикассо</a></li>
                </ul>
              </div>
            </li>
            <li class="dropdown header__dropdown">
              <button class="btn dropdown__btn">Импрессионизм</button>
              <div class="dropdown__block">
                <ul class="ul dropdown__list" data-simplebar data-simplebar-aria-label="художники импрессионизма">
                  <li class="dropdown__item"><a class="link dropdown__link" href="">Моне</a></li>
                  <li class="dropdown__item"><a class="link dropdown__link" href="">Сислей</a></li>
                  <li class="dropdown__item"><a class="link dropdown__link" href="">Мане</a></li>
                  <li class="dropdown__item"><a class="link dropdown__link" href="">Ренуар</a></li>
                  <li class="dropdown__item"><a class="link dropdown__link" href="">Кандинский</a></li>
                  <li class="dropdown__item"><a class="link dropdown__link" href="">Маринетти</a></li>
                  <li class="dropdown__item"><a class="link dropdown__link" href="">Малевич</a></li>
                  <li class="dropdown__item"><a class="link dropdown__link" href="">Пикассо</a></li>
                  <li class="dropdown__item"><a class="link dropdown__link" href="">Карра</a></li>
                  <li class="dropdown__item"><a class="link dropdown__link" href="">Прателла</a></li>
                  <li class="dropdown__item"><a class="link dropdown__link" href="">Северини</a></li>
                  <li class="dropdown__item"><a class="link dropdown__link" href="">Балла</a></li>
                </ul>
              </div>
            </li>
            <li class="dropdown header__dropdown">
              <button class="btn dropdown__btn">Постимпрессионизм</button>
              <div class="dropdown__block">
                <ul class="ul dropdown__list" data-simplebar data-simplebar-aria-label="художники постимпрессионизма">
                  <li class="dropdown__item"><a class="link dropdown__link" href="">Ван Гог</a></li>
                  <li class="dropdown__item"><a class="link dropdown__link" href="">Сезанн</a></li>
                  <li class="dropdown__item"><a class="link dropdown__link" href="">Гоген</a></li>
                  <li class="dropdown__item"><a class="link dropdown__link" href="">Сёра</a></li>
                </ul>
              </div>
            </li>
            <li class="dropdown header__dropdown">
              <button class="btn dropdown__btn">Авангард</button>
              <div class="dropdown__block">
                <ul class="ul dropdown__list" data-simplebar data-simplebar-aria-label="художники авангарда">
                  <li class="dropdown__item"><a class="link dropdown__link" href="">Кандинский</a></li>
                  <li class="dropdown__item"><a class="link dropdown__link" href="">Маринетти</a></li>
                  <li class="dropdown__item"><a class="link dropdown__link" href="">Малевич</a></li>
                  <li class="dropdown__item"><a class="link dropdown__link" href="">Пикассо</a></li>
                </ul>
              </div>
            </li>
            <li class="dropdown header__dropdown">
              <button class="btn dropdown__btn">Футуризм</button>
              <div class="dropdown__block">
                <ul class="ul dropdown__list" data-simplebar data-simplebar-aria-label="художники футуризма">
                  <li class="dropdown__item"><a class="link dropdown__link" href="">Карра</a></li>
                  <li class="dropdown__item"><a class="link dropdown__link" href="">Прателла</a></li>
                  <li class="dropdown__item"><a class="link dropdown__link" href="">Северини</a></li>
                  <li class="dropdown__item"><a class="link dropdown__link" href="">Балла</a></li>
                </ul>
              </div>
            </li>
          </ul>

          <form class="search header__search" action="https://postman-echo.com/post" target="_blank" method="post">
            <input class="search__input" type="search" name="search" id="search-bot" placeholder="Поиск по сайту">
            <button class="btn search__btn" type="submit" aria-label="Поиск"></button>
          </form>
        </div>
      </div>
    </div>
  </header>

  <main class="main">
    <section class="hero">
      <div class="container hero__container">
        <div class="hero__content">
          <h2 class="heading hero__heading">Прикоснитесь к&nbsp;прекрасному</h2>
          <p class="text hero__descr">Мы вынуждены отталкиваться от&nbsp;того, что реализация намеченных плановых
            заданий создаёт предпосылки для&nbsp;новых предложений.</p>
          <a class="btn hero__btn" href="#contacts">Подписаться на&nbsp;рассылку</a>
        </div>
      </div>
      <div class="hero__swiper swiper" aria-hidden="true">
        <div class="swiper-wrapper" >
          <div class="swiper-slide">
            <div class="swiper-bg swiper-bg_1">1</div>
          </div>
          <div class="swiper-slide">
            <div class="swiper-bg swiper-bg_2">2</div>
          </div>
          <div class="swiper-slide">
            <div class="swiper-bg swiper-bg_3">3</div>
          </div>
        </div>
      </div>
    </section>

    <section class="about" id="about">
      <div class="container about__container">
        <div class="about__content">
          <h2 class="heading about__heading">О&nbsp;нас</h2>
          <p class="text about__descr">Ясность нашей позиции очевидна: семантический разбор внешних противодействий
            однозначно определяет каждого участника как&nbsp;способного принимать собственные решения касаемо
            распределения внутренних резервов и&nbsp;ресурсов. Не&nbsp;следует, однако, забывать,
            что&nbsp;высококачественный прототип будущего проекта влечет за&nbsp;собой процесс внедрения
            и&nbsp;модернизации модели развития. Повседневная практика показывает, что высокое качество позиционных
            исследований создаёт необходимость включения в&nbsp;производственный план целого ряда внеочередных
            мероприятий с&nbsp;учётом комплекса распределения внутренних резервов и&nbsp;ресурсов. В&nbsp;рамках
            спецификации современных стандартов, действия представителей оппозиции набирают популярность среди
            определенных слоев населения, а&nbsp;значит, должны быть разоблачены.</p>
        </div>
      </div>
    </section>

    <section class="gallery" id="gallery">
      <div class="container gallery__container">
        <div class="gallery__content">
          <h2 class="heading gallery__heading">Галерея</h2>
          <label class="gallery__filter">
            <span class="gallery__filter-text">Фильтр</span>
            <select class="gallery__select" name="gallery__select" id="gallery__select">
              <option value="all">Все</option>
              <option value="1">Живопись</option>
              <option value="2">Рисунок</option>
              <option value="3">Скульптура</option>
            </select>
          </label>
          <p class="text gallery__text">Вам предоставляется 10&nbsp;бесплатных скачиваний. Для увеличения количества скачиваний
            <a class="gallery__link" href="#" rel="noopener noreferrer">авторизуйтесь</a>
            , либо воспользуйтесь лицензией.
          </p>
          <div class="gallery__swiper-container">
            <div class="swiper gallery__swiper">
              <div class="swiper-navigation">
                <!-- Navigation buttons -->
                <div class="gallery-pagination swiper-pagination"></div>
                <div class="gallery-button-prev swiper-button-prev"></div>
                <div class="gallery-button-next swiper-button-next"></div>
              </div>
              <div class="swiper-wrapper gallery__swiper-wrapper">
                <button class="swiper-slide gallery__slide" data-set="1" data-filter="1">
                  <picture>
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/1.webp" type="image/webp">
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/1.jpg">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/1.webp" type="image/webp">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/1.jpg">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/1.webp" type="image/webp">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/1.jpg">
                    <source srcset="./img/gallery/320/1.webp" type="image/webp">
                    <img class="gallery__image" src="./img/gallery/320/1.jpg" loading="lazy" alt="Картина 1">
                  </picture>
                </button>
                <button class="swiper-slide gallery__slide" data-set="2" data-filter="1">
                  <picture>
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/2.webp" type="image/webp">
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/2.jpg">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/2.webp" type="image/webp">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/2.jpg">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/2.webp" type="image/webp">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/2.jpg">
                    <source srcset="./img/gallery/320/2.webp" type="image/webp">
                    <img class="gallery__image" src="./img/gallery/320/2.jpg" loading="lazy" alt="Картина 2">
                  </picture>
                </button>
                <button class="swiper-slide gallery__slide" data-set="3" data-filter="1">
                  <picture>
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/3.webp" type="image/webp">
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/3.jpg">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/3.webp" type="image/webp">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/3.jpg">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/3.webp" type="image/webp">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/3.jpg">
                    <source srcset="./img/gallery/320/3.webp" type="image/webp">
                    <img class="gallery__image" src="./img/gallery/320/3.jpg" loading="lazy" alt="Картина 3">
                  </picture>
                </button>
                <button class="swiper-slide gallery__slide" data-set="4" data-filter="1">
                  <picture>
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/4.webp" type="image/webp">
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/4.jpg">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/4.webp" type="image/webp">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/4.jpg">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/4.webp" type="image/webp">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/4.jpg">
                    <source srcset="./img/gallery/320/4.webp" type="image/webp">
                    <img class="gallery__image" src="./img/gallery/320/4.jpg" loading="lazy" alt="Картина 4">
                  </picture>
                </button>
                <button class="swiper-slide gallery__slide" data-set="5" data-filter="1">
                  <picture>
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/5.webp" type="image/webp">
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/5.jpg">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/5.webp" type="image/webp">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/5.jpg">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/5.webp" type="image/webp">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/5.jpg">
                    <source srcset="./img/gallery/320/5.webp" type="image/webp">
                    <img class="gallery__image" src="./img/gallery/320/5.jpg" loading="lazy" alt="Картина 5">
                  </picture>
                </button>
                <button class="swiper-slide gallery__slide" data-set="6" data-filter="1">
                  <picture>
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/6.webp" type="image/webp">
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/6.jpg">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/6.webp" type="image/webp">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/6.jpg">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/6.webp" type="image/webp">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/6.jpg">
                    <source srcset="./img/gallery/320/6.webp" type="image/webp">
                    <img class="gallery__image" src="./img/gallery/320/6.jpg" loading="lazy" alt="Картина 6">
                  </picture>
                </button>
                <button class="swiper-slide gallery__slide" data-set="7" data-filter="1">
                  <picture>
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/7.webp" type="image/webp">
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/7.jpg">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/7.webp" type="image/webp">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/7.jpg">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/7.webp" type="image/webp">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/7.jpg">
                    <source srcset="./img/gallery/320/7.webp" type="image/webp">
                    <img class="gallery__image" src="./img/gallery/320/7.jpg" loading="lazy" alt="Картина 7">
                  </picture>
                </button>
                <button class="swiper-slide gallery__slide" data-set="8" data-filter="1">
                  <picture>
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/8.webp" type="image/webp">
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/8.jpg">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/8.webp" type="image/webp">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/8.jpg">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/8.webp" type="image/webp">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/8.jpg">
                    <source srcset="./img/gallery/320/8.webp" type="image/webp">
                    <img class="gallery__image" src="./img/gallery/320/8.jpg" loading="lazy" alt="Картина 8">
                  </picture>
                </button>
                <button class="swiper-slide gallery__slide" data-set="9" data-filter="1">
                  <picture>
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/9.webp" type="image/webp">
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/9.jpg">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/9.webp" type="image/webp">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/9.jpg">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/9.webp" type="image/webp">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/9.jpg">
                    <source srcset="./img/gallery/320/9.webp" type="image/webp">
                    <img class="gallery__image" src="./img/gallery/320/9.jpg" loading="lazy" alt="Картина 9">
                  </picture>
                </button>
                <button class="swiper-slide gallery__slide" data-set="10" data-filter="1">
                  <picture>
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/10.webp" type="image/webp">
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/10.jpg">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/10.webp" type="image/webp">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/10.jpg">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/10.webp" type="image/webp">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/10.jpg">
                    <source srcset="./img/gallery/320/10.webp" type="image/webp">
                    <img class="gallery__image" src="./img/gallery/320/10.jpg" loading="lazy" alt="Картина 10">
                  </picture>
                </button>
                <button class="swiper-slide gallery__slide" data-set="11" data-filter="1">
                  <picture>
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/11.webp" type="image/webp">
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/11.jpg">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/11.webp" type="image/webp">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/11.jpg">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/11.webp" type="image/webp">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/11.jpg">
                    <source srcset="./img/gallery/320/11.webp" type="image/webp">
                    <img class="gallery__image" src="./img/gallery/320/11.jpg" loading="lazy" alt="Картина 11">
                  </picture>
                </button>
                <button class="swiper-slide gallery__slide" data-set="12" data-filter="1">
                  <picture>
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/12.webp" type="image/webp">
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/12.jpg">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/12.webp" type="image/webp">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/12.jpg">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/12.webp" type="image/webp">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/12.jpg">
                    <source srcset="./img/gallery/320/12.webp" type="image/webp">
                    <img class="gallery__image" src="./img/gallery/320/12.jpg" loading="lazy" alt="Картина 12">
                  </picture>
                </button>
                <button class="swiper-slide gallery__slide" data-set="13" data-filter="2">
                  <picture>
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/13.webp" type="image/webp">
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/13.jpg">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/13.webp" type="image/webp">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/13.jpg">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/13.webp" type="image/webp">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/13.jpg">
                    <source srcset="./img/gallery/320/13.webp" type="image/webp">
                    <img class="gallery__image" src="./img/gallery/320/13.jpg" loading="lazy" alt="Картина 13">
                  </picture>
                </button>
                <button class="swiper-slide gallery__slide" data-set="14" data-filter="2">
                  <picture>
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/14.webp" type="image/webp">
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/14.jpg">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/14.webp" type="image/webp">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/14.jpg">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/14.webp" type="image/webp">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/14.jpg">
                    <source srcset="./img/gallery/320/14.webp" type="image/webp">
                    <img class="gallery__image" src="./img/gallery/320/14.jpg" loading="lazy" alt="Картина 14">
                  </picture>
                </button>
                <button class="swiper-slide gallery__slide" data-set="15" data-filter="2">
                  <picture>
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/15.webp" type="image/webp">
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/15.jpg">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/15.webp" type="image/webp">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/15.jpg">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/15.webp" type="image/webp">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/15.jpg">
                    <source srcset="./img/gallery/320/15.webp" type="image/webp">
                    <img class="gallery__image" src="./img/gallery/320/15.jpg" loading="lazy" alt="Картина 15">
                  </picture>
                </button>
                <button class="swiper-slide gallery__slide" data-set="16" data-filter="2">
                  <picture>
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/16.webp" type="image/webp">
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/16.jpg">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/16.webp" type="image/webp">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/16.jpg">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/16.webp" type="image/webp">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/16.jpg">
                    <source srcset="./img/gallery/320/16.webp" type="image/webp">
                    <img class="gallery__image" src="./img/gallery/320/16.jpg" loading="lazy" alt="Картина 16">
                  </picture>
                </button>
                <button class="swiper-slide gallery__slide" data-set="17" data-filter="2">
                  <picture>
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/17.webp" type="image/webp">
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/17.jpg">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/17.webp" type="image/webp">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/17.jpg">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/17.webp" type="image/webp">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/17.jpg">
                    <source srcset="./img/gallery/320/17.webp" type="image/webp">
                    <img class="gallery__image" src="./img/gallery/320/17.jpg" loading="lazy" alt="Картина 17">
                  </picture>
                </button>
                <button class="swiper-slide gallery__slide" data-set="18" data-filter="2">
                  <picture>
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/18.webp" type="image/webp">
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/18.jpg">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/18.webp" type="image/webp">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/18.jpg">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/18.webp" type="image/webp">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/18.jpg">
                    <source srcset="./img/gallery/320/18.webp" type="image/webp">
                    <img class="gallery__image" src="./img/gallery/320/18.jpg" loading="lazy" alt="Картина 18">
                  </picture>
                </button>
                <button class="swiper-slide gallery__slide" data-set="19" data-filter="3">
                  <picture>
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/19.webp" type="image/webp">
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/19.jpg">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/19.webp" type="image/webp">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/19.jpg">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/19.webp" type="image/webp">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/19.jpg">
                    <source srcset="./img/gallery/320/19.webp" type="image/webp">
                    <img class="gallery__image" src="./img/gallery/320/19.jpg" loading="lazy" alt="Картина 19">
                  </picture>
                </button>
                <button class="swiper-slide gallery__slide" data-set="20" data-filter="3">
                  <picture>
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/20.webp" type="image/webp">
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/20.jpg">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/20.webp" type="image/webp">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/20.jpg">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/20.webp" type="image/webp">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/20.jpg">
                    <source srcset="./img/gallery/320/20.webp" type="image/webp">
                    <img class="gallery__image" src="./img/gallery/320/20.jpg" loading="lazy" alt="Картина 20">
                  </picture>
                </button>
                <button class="swiper-slide gallery__slide" data-set="21" data-filter="3">
                  <picture>
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/21.webp" type="image/webp">
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/21.jpg">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/21.webp" type="image/webp">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/21.jpg">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/21.webp" type="image/webp">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/21.jpg">
                    <source srcset="./img/gallery/320/21.webp" type="image/webp">
                    <img class="gallery__image" src="./img/gallery/320/21.jpg" loading="lazy" alt="Картина 21">
                  </picture>
                </button>
                <button class="swiper-slide gallery__slide" data-set="22" data-filter="3">
                  <picture>
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/22.webp" type="image/webp">
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/22.jpg">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/22.webp" type="image/webp">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/22.jpg">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/22.webp" type="image/webp">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/22.jpg">
                    <source srcset="./img/gallery/320/22.webp" type="image/webp">
                    <img class="gallery__image" src="./img/gallery/320/22.jpg" loading="lazy" alt="Картина 22">
                  </picture>
                </button>
                <button class="swiper-slide gallery__slide" data-set="23" data-filter="3">
                  <picture>
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/23.webp" type="image/webp">
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/23.jpg">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/23.webp" type="image/webp">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/23.jpg">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/23.webp" type="image/webp">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/23.jpg">
                    <source srcset="./img/gallery/320/23.webp" type="image/webp">
                    <img class="gallery__image" src="./img/gallery/320/23.jpg" loading="lazy" alt="Картина 23">
                  </picture>
                </button>
                <button class="swiper-slide gallery__slide" data-set="24" data-filter="3">
                  <picture>
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/24.webp" type="image/webp">
                    <source media="(min-width: 1025px)" srcset="./img/gallery/1920/24.jpg">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/24.webp" type="image/webp">
                    <source media="(min-width: 769px)" srcset="./img/gallery/1024/24.jpg">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/24.webp" type="image/webp">
                    <source media="(min-width: 441px)" srcset="./img/gallery/768/24.jpg">
                    <source srcset="./img/gallery/320/24.webp" type="image/webp">
                    <img class="gallery__image" src="./img/gallery/320/24.jpg" loading="lazy" alt="Картина 24">
                  </picture>
                </button>
              </div>
            </div>
            <div class="modal gallery__modal">
              <div class="modal__window window" data-target="1">
                <img class="window__image" src="./img/gallery/320/1.jpg" loading="lazy" alt="Картина 1">
                <div class="window__content">
                  <span class="window__title">Казимир Малевич</span>
                  <span class="window__caption">&laquo;Женщина с&nbsp;граблями&raquo;</span>
                  <span class="window__date">1931-1932</span>
                  <p class="text window__descr">Картина из&nbsp;второй серии крестьянского цикла работ Казимира Малевича. Художник принялся за&nbsp;её&nbsp;создание в&nbsp;1930-1931&nbsp;годах, после того, как первый цикл был утерян после Берлинской и&nbsp;Варшавской выставок в&nbsp;1927&nbsp;году.</p>
                </div>
                <button class="window__close"></button>
              </div>
              <div class="modal__window window" data-target="2">
                <img class="window__image" src="./img/gallery/320/2.jpg" loading="lazy" alt="Картина 2">
                <div class="window__content">
                  <span class="window__title">Казимир Малевич</span>
                  <span class="window__caption">&laquo;Женщина с&nbsp;граблями&raquo;</span>
                  <span class="window__date">1931-1932</span>
                  <p class="text window__descr">Картина из&nbsp;второй серии крестьянского цикла работ Казимира Малевича. Художник принялся за&nbsp;её&nbsp;создание в&nbsp;1930-1931&nbsp;годах, после того, как первый цикл был утерян после Берлинской и&nbsp;Варшавской выставок в&nbsp;1927&nbsp;году.</p>
                </div>
                <button class="window__close"></button>
              </div>
              <div class="modal__window window" data-target="3">
                <img class="window__image" src="./img/gallery/320/3.jpg" loading="lazy" alt="Картина 3">
                <div class="window__content">
                  <span class="window__title">Казимир Малевич</span>
                  <span class="window__caption">&laquo;Женщина с&nbsp;граблями&raquo;</span>
                  <span class="window__date">1931-1932</span>
                  <p class="text window__descr">Картина из&nbsp;второй серии крестьянского цикла работ Казимира Малевича. Художник принялся за&nbsp;её&nbsp;создание в&nbsp;1930-1931&nbsp;годах, после того, как первый цикл был утерян после Берлинской и&nbsp;Варшавской выставок в&nbsp;1927&nbsp;году.</p>
                </div>
                <button class="window__close"></button>
              </div>
              <div class="modal__window window" data-target="4">
                <img class="window__image" src="./img/gallery/320/4.jpg" loading="lazy" alt="Картина 4">
                <div class="window__content">
                  <span class="window__title">Казимир Малевич</span>
                  <span class="window__caption">&laquo;Женщина с&nbsp;граблями&raquo;</span>
                  <span class="window__date">1931-1932</span>
                  <p class="text window__descr">Картина из&nbsp;второй серии крестьянского цикла работ Казимира Малевича. Художник принялся за&nbsp;её&nbsp;создание в&nbsp;1930-1931&nbsp;годах, после того, как первый цикл был утерян после Берлинской и&nbsp;Варшавской выставок в&nbsp;1927&nbsp;году.</p>
                </div>
                <button class="window__close"></button>
              </div>
              <div class="modal__window window" data-target="5">
                <img class="window__image" src="./img/gallery/320/5.jpg" loading="lazy" alt="Картина 5">
                <div class="window__content">
                  <span class="window__title">Казимир Малевич</span>
                  <span class="window__caption">&laquo;Женщина с&nbsp;граблями&raquo;</span>
                  <span class="window__date">1931-1932</span>
                  <p class="text window__descr">Картина из&nbsp;второй серии крестьянского цикла работ Казимира Малевича. Художник принялся за&nbsp;её&nbsp;создание в&nbsp;1930-1931&nbsp;годах, после того, как первый цикл был утерян после Берлинской и&nbsp;Варшавской выставок в&nbsp;1927&nbsp;году.</p>
                </div>
                <button class="window__close"></button>
              </div>
              <div class="modal__window window" data-target="6">
                <img class="window__image" src="./img/gallery/320/6.jpg" loading="lazy" alt="Картина 6">
                <div class="window__content">
                  <span class="window__title">Казимир Малевич</span>
                  <span class="window__caption">&laquo;Женщина с&nbsp;граблями&raquo;</span>
                  <span class="window__date">1931-1932</span>
                  <p class="text window__descr">Картина из&nbsp;второй серии крестьянского цикла работ Казимира Малевича. Художник принялся за&nbsp;её&nbsp;создание в&nbsp;1930-1931&nbsp;годах, после того, как первый цикл был утерян после Берлинской и&nbsp;Варшавской выставок в&nbsp;1927&nbsp;году.</p>
                </div>
                <button class="window__close"></button>
              </div>
              <div class="modal__window window" data-target="7">
                <img class="window__image" src="./img/gallery/320/7.jpg" loading="lazy" alt="Картина 7">
                <div class="window__content">
                  <span class="window__title">Казимир Малевич</span>
                  <span class="window__caption">&laquo;Женщина с&nbsp;граблями&raquo;</span>
                  <span class="window__date">1931-1932</span>
                  <p class="text window__descr">Картина из&nbsp;второй серии крестьянского цикла работ Казимира Малевича. Художник принялся за&nbsp;её&nbsp;создание в&nbsp;1930-1931&nbsp;годах, после того, как первый цикл был утерян после Берлинской и&nbsp;Варшавской выставок в&nbsp;1927&nbsp;году.</p>
                </div>
                <button class="window__close"></button>
              </div>
              <div class="modal__window window" data-target="8">
                <img class="window__image" src="./img/gallery/320/8.jpg" loading="lazy" alt="Картина 8">
                <div class="window__content">
                  <span class="window__title">Казимир Малевич</span>
                  <span class="window__caption">&laquo;Женщина с&nbsp;граблями&raquo;</span>
                  <span class="window__date">1931-1932</span>
                  <p class="text window__descr">Картина из&nbsp;второй серии крестьянского цикла работ Казимира Малевича. Художник принялся за&nbsp;её&nbsp;создание в&nbsp;1930-1931&nbsp;годах, после того, как первый цикл был утерян после Берлинской и&nbsp;Варшавской выставок в&nbsp;1927&nbsp;году.</p>
                </div>
                <button class="window__close"></button>
              </div>
              <div class="modal__window window" data-target="9">
                <img class="window__image" src="./img/gallery/320/9.jpg" loading="lazy" alt="Картина 9">
                <div class="window__content">
                  <span class="window__title">Казимир Малевич</span>
                  <span class="window__caption">&laquo;Женщина с&nbsp;граблями&raquo;</span>
                  <span class="window__date">1931-1932</span>
                  <p class="text window__descr">Картина из&nbsp;второй серии крестьянского цикла работ Казимира Малевича. Художник принялся за&nbsp;её&nbsp;создание в&nbsp;1930-1931&nbsp;годах, после того, как первый цикл был утерян после Берлинской и&nbsp;Варшавской выставок в&nbsp;1927&nbsp;году.</p>
                </div>
                <button class="window__close"></button>
              </div>
              <div class="modal__window window" data-target="10">
                <img class="window__image" src="./img/gallery/320/10.jpg" loading="lazy" alt="Картина 10">
                <div class="window__content">
                  <span class="window__title">Казимир Малевич</span>
                  <span class="window__caption">&laquo;Женщина с&nbsp;граблями&raquo;</span>
                  <span class="window__date">1931-1932</span>
                  <p class="text window__descr">Картина из&nbsp;второй серии крестьянского цикла работ Казимира Малевича. Художник принялся за&nbsp;её&nbsp;создание в&nbsp;1930-1931&nbsp;годах, после того, как первый цикл был утерян после Берлинской и&nbsp;Варшавской выставок в&nbsp;1927&nbsp;году.</p>
                </div>
                <button class="window__close"></button>
              </div>
              <div class="modal__window window" data-target="11">
                <img class="window__image" src="./img/gallery/320/11.jpg" loading="lazy" alt="Картина 11">
                <div class="window__content">
                  <span class="window__title">Казимир Малевич</span>
                  <span class="window__caption">&laquo;Женщина с&nbsp;граблями&raquo;</span>
                  <span class="window__date">1931-1932</span>
                  <p class="text window__descr">Картина из&nbsp;второй серии крестьянского цикла работ Казимира Малевича. Художник принялся за&nbsp;её&nbsp;создание в&nbsp;1930-1931&nbsp;годах, после того, как первый цикл был утерян после Берлинской и&nbsp;Варшавской выставок в&nbsp;1927&nbsp;году.</p>
                </div>
                <button class="window__close"></button>
              </div>
              <div class="modal__window window" data-target="12">
                <img class="window__image" src="./img/gallery/320/12.jpg" loading="lazy" alt="Картина 12">
                <div class="window__content">
                  <span class="window__title">Казимир Малевич</span>
                  <span class="window__caption">&laquo;Женщина с&nbsp;граблями&raquo;</span>
                  <span class="window__date">1931-1932</span>
                  <p class="text window__descr">Картина из&nbsp;второй серии крестьянского цикла работ Казимира Малевича. Художник принялся за&nbsp;её&nbsp;создание в&nbsp;1930-1931&nbsp;годах, после того, как первый цикл был утерян после Берлинской и&nbsp;Варшавской выставок в&nbsp;1927&nbsp;году.</p>
                </div>
                <button class="window__close"></button>
              </div>
              <div class="modal__window window" data-target="13">
                <img class="window__image" src="./img/gallery/320/13.jpg" loading="lazy" alt="Картина 13">
                <div class="window__content">
                  <span class="window__title">Казимир Малевич</span>
                  <span class="window__caption">&laquo;Женщина с&nbsp;граблями&raquo;</span>
                  <span class="window__date">1931-1932</span>
                  <p class="text window__descr">Картина из&nbsp;второй серии крестьянского цикла работ Казимира Малевича. Художник принялся за&nbsp;её&nbsp;создание в&nbsp;1930-1931&nbsp;годах, после того, как первый цикл был утерян после Берлинской и&nbsp;Варшавской выставок в&nbsp;1927&nbsp;году.</p>
                </div>
                <button class="window__close"></button>
              </div>
              <div class="modal__window window" data-target="14">
                <img class="window__image" src="./img/gallery/320/14.jpg" loading="lazy" alt="Картина 14">
                <div class="window__content">
                  <span class="window__title">Казимир Малевич</span>
                  <span class="window__caption">&laquo;Женщина с&nbsp;граблями&raquo;</span>
                  <span class="window__date">1931-1932</span>
                  <p class="text window__descr">Картина из&nbsp;второй серии крестьянского цикла работ Казимира Малевича. Художник принялся за&nbsp;её&nbsp;создание в&nbsp;1930-1931&nbsp;годах, после того, как первый цикл был утерян после Берлинской и&nbsp;Варшавской выставок в&nbsp;1927&nbsp;году.</p>
                </div>
                <button class="window__close"></button>
              </div>
              <div class="modal__window window" data-target="15">
                <img class="window__image" src="./img/gallery/320/15.jpg" loading="lazy" alt="Картина 15">
                <div class="window__content">
                  <span class="window__title">Казимир Малевич</span>
                  <span class="window__caption">&laquo;Женщина с&nbsp;граблями&raquo;</span>
                  <span class="window__date">1931-1932</span>
                  <p class="text window__descr">Картина из&nbsp;второй серии крестьянского цикла работ Казимира Малевича. Художник принялся за&nbsp;её&nbsp;создание в&nbsp;1930-1931&nbsp;годах, после того, как первый цикл был утерян после Берлинской и&nbsp;Варшавской выставок в&nbsp;1927&nbsp;году.</p>
                </div>
                <button class="window__close"></button>
              </div>
              <div class="modal__window window" data-target="16">
                <img class="window__image" src="./img/gallery/320/16.jpg" loading="lazy" alt="Картина 16">
                <div class="window__content">
                  <span class="window__title">Казимир Малевич</span>
                  <span class="window__caption">&laquo;Женщина с&nbsp;граблями&raquo;</span>
                  <span class="window__date">1931-1932</span>
                  <p class="text window__descr">Картина из&nbsp;второй серии крестьянского цикла работ Казимира Малевича. Художник принялся за&nbsp;её&nbsp;создание в&nbsp;1930-1931&nbsp;годах, после того, как первый цикл был утерян после Берлинской и&nbsp;Варшавской выставок в&nbsp;1927&nbsp;году.</p>
                </div>
                <button class="window__close"></button>
              </div>
              <div class="modal__window window" data-target="17">
                <img class="window__image" src="./img/gallery/320/17.jpg" loading="lazy" alt="Картина 17">
                <div class="window__content">
                  <span class="window__title">Казимир Малевич</span>
                  <span class="window__caption">&laquo;Женщина с&nbsp;граблями&raquo;</span>
                  <span class="window__date">1931-1932</span>
                  <p class="text window__descr">Картина из&nbsp;второй серии крестьянского цикла работ Казимира Малевича. Художник принялся за&nbsp;её&nbsp;создание в&nbsp;1930-1931&nbsp;годах, после того, как первый цикл был утерян после Берлинской и&nbsp;Варшавской выставок в&nbsp;1927&nbsp;году.</p>
                </div>
                <button class="window__close"></button>
              </div>
              <div class="modal__window window" data-target="18">
                <img class="window__image" src="./img/gallery/320/18.jpg" loading="lazy" alt="Картина 18">
                <div class="window__content">
                  <span class="window__title">Казимир Малевич</span>
                  <span class="window__caption">&laquo;Женщина с&nbsp;граблями&raquo;</span>
                  <span class="window__date">1931-1932</span>
                  <p class="text window__descr">Картина из&nbsp;второй серии крестьянского цикла работ Казимира Малевича. Художник принялся за&nbsp;её&nbsp;создание в&nbsp;1930-1931&nbsp;годах, после того, как первый цикл был утерян после Берлинской и&nbsp;Варшавской выставок в&nbsp;1927&nbsp;году.</p>
                </div>
                <button class="window__close"></button>
              </div>
              <div class="modal__window window" data-target="19">
                <img class="window__image" src="./img/gallery/320/19.jpg" loading="lazy" alt="Картина 19">
                <div class="window__content">
                  <span class="window__title">Казимир Малевич</span>
                  <span class="window__caption">&laquo;Женщина с&nbsp;граблями&raquo;</span>
                  <span class="window__date">1931-1932</span>
                  <p class="text window__descr">Картина из&nbsp;второй серии крестьянского цикла работ Казимира Малевича. Художник принялся за&nbsp;её&nbsp;создание в&nbsp;1930-1931&nbsp;годах, после того, как первый цикл был утерян после Берлинской и&nbsp;Варшавской выставок в&nbsp;1927&nbsp;году.</p>
                </div>
                <button class="window__close"></button>
              </div>
              <div class="modal__window window" data-target="20">
                <img class="window__image" src="./img/gallery/320/20.jpg" loading="lazy" alt="Картина 20">
                <div class="window__content">
                  <span class="window__title">Казимир Малевич</span>
                  <span class="window__caption">&laquo;Женщина с&nbsp;граблями&raquo;</span>
                  <span class="window__date">1931-1932</span>
                  <p class="text window__descr">Картина из&nbsp;второй серии крестьянского цикла работ Казимира Малевича. Художник принялся за&nbsp;её&nbsp;создание в&nbsp;1930-1931&nbsp;годах, после того, как первый цикл был утерян после Берлинской и&nbsp;Варшавской выставок в&nbsp;1927&nbsp;году.</p>
                </div>
                <button class="window__close"></button>
              </div>
              <div class="modal__window window" data-target="21">
                <img class="window__image" src="./img/gallery/320/21.jpg" loading="lazy" alt="Картина 21">
                <div class="window__content">
                  <span class="window__title">Казимир Малевич</span>
                  <span class="window__caption">&laquo;Женщина с&nbsp;граблями&raquo;</span>
                  <span class="window__date">1931-1932</span>
                  <p class="text window__descr">Картина из&nbsp;второй серии крестьянского цикла работ Казимира Малевича. Художник принялся за&nbsp;её&nbsp;создание в&nbsp;1930-1931&nbsp;годах, после того, как первый цикл был утерян после Берлинской и&nbsp;Варшавской выставок в&nbsp;1927&nbsp;году.</p>
                </div>
                <button class="window__close"></button>
              </div>
              <div class="modal__window window" data-target="22">
                <img class="window__image" src="./img/gallery/320/22.jpg" loading="lazy" alt="Картина 22">
                <div class="window__content">
                  <span class="window__title">Казимир Малевич</span>
                  <span class="window__caption">&laquo;Женщина с&nbsp;граблями&raquo;</span>
                  <span class="window__date">1931-1932</span>
                  <p class="text window__descr">Картина из&nbsp;второй серии крестьянского цикла работ Казимира Малевича. Художник принялся за&nbsp;её&nbsp;создание в&nbsp;1930-1931&nbsp;годах, после того, как первый цикл был утерян после Берлинской и&nbsp;Варшавской выставок в&nbsp;1927&nbsp;году.</p>
                </div>
                <button class="window__close"></button>
              </div>
              <div class="modal__window window" data-target="23">
                <img class="window__image" src="./img/gallery/320/23.jpg" loading="lazy" alt="Картина 23">
                <div class="window__content">
                  <span class="window__title">Казимир Малевич</span>
                  <span class="window__caption">&laquo;Женщина с&nbsp;граблями&raquo;</span>
                  <span class="window__date">1931-1932</span>
                  <p class="text window__descr">Картина из&nbsp;второй серии крестьянского цикла работ Казимира Малевича. Художник принялся за&nbsp;её&nbsp;создание в&nbsp;1930-1931&nbsp;годах, после того, как первый цикл был утерян после Берлинской и&nbsp;Варшавской выставок в&nbsp;1927&nbsp;году.</p>
                </div>
                <button class="window__close"></button>
              </div>
              <div class="modal__window window" data-target="24">
                <img class="window__image" src="./img/gallery/320/24.jpg" loading="lazy" alt="Картина 24">
                <div class="window__content">
                  <span class="window__title">Казимир Малевич</span>
                  <span class="window__caption">&laquo;Женщина с&nbsp;граблями&raquo;</span>
                  <span class="window__date">1931-1932</span>
                  <p class="text window__descr">Картина из&nbsp;второй серии крестьянского цикла работ Казимира Малевича. Художник принялся за&nbsp;её&nbsp;создание в&nbsp;1930-1931&nbsp;годах, после того, как первый цикл был утерян после Берлинской и&nbsp;Варшавской выставок в&nbsp;1927&nbsp;году.</p>
                </div>
                <button class="window__close"></button>
              </div>
            </div>
          </div>

        </div>
      </div>
    </section>

    <section class="catalogue" id="catalogue">
      <div class="container catalogue__container">
        <div class="content catalogue__content">
          <div class="catalogue__heading-content">
            <h2 class="heading catalogue__heading">Каталог</h2>
            <div class="flags-wrapper">
              <button class="flag flag_fr" data-set="fr" data-num="0" aria-label="Франция"></button>
              <button class="flag flag_de" data-set="de" data-num="1" aria-label="Германия"></button>
              <button class="flag flag_it is-active" data-set="it" data-num="2" aria-label="Италия"></button>
              <button class="flag flag_ru" data-set="ru" data-num="3" aria-label="Россия"></button>
              <button class="flag flag_be" data-set="be" data-num="4" aria-label="Бельгия"></button>
            </div>
          </div>
          <div class="catalogue__tabs-container">
            <div class="tab catalogue__tab" data-target="fr">
              <p class="text catalogue__descr">
                Французские художники. Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я. Я так счастлив, мой друг, так упоен ощущением покоя, что искусство мое страдает от этого. Ни одного штриха не мог бы я сделать, а никогда не был таким большим художником, как в эти минуты.
              </p>
              <div class="card tab__card" id="tab__card-fr">
                <img class="card__pic" loading="lazy" src="./img/catalogue/catalogue-france.jpg" 
                  alt="Бартелеми д&rsquo;Эйк">
                  <!--return loading="lazy" -->
                <h3 class="card__title">Бартелеми д&rsquo;Эйк</h3>
                <span class="card__date">ок.&nbsp;1420&nbsp;&mdash; после 1470.</span>
                <p class="card__text">
                  Имя Бартелеми д&rsquo;Эйка давно известно по&nbsp;историческим документам. Он&nbsp;был придворным художником короля Рене Доброго и&nbsp;имел высокую репутацию как выдающийся мастер, о&nbsp;чём свидетельствуют отзывы современников. Исследователи отмечали, что миниатюры, которые приписываются кисти Мастера короля Рене, на&nbsp;удивление однородны по&nbsp;своим высоким качествам, а&nbsp;стиль их&nbsp;сугубо индивидуален.
                </p>
              </div>
              <ul class="ul accordion tab__accordion is-active" >
                <li class="accordion__wrap is-active">
                  <button class="accordion__btn"><span>C&nbsp;1400 по&nbsp;1499&nbsp;гг.</span></button>
                  <div class="panel accordion__panel">
                    <ul class="ul panel__list">
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-fr">Бартелеми д&rsquo;Эйк</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-fr">Домбе, Гийом</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-fr">Иверни, Жак</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-fr">Лиферинкс, Йос</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-fr">Перреаль, Жан</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-fr">Фроман, Никола</a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li class="accordion__wrap">
                  <button class="accordion__btn"><span>C&nbsp;1500 по&nbsp;1599&nbsp;гг.</span></button>
                  <div class="panel accordion__panel">
                    <div class="panel-placeholder">
                      <div class="pic-placeholder"></div>
                      <div class="text-placeholder">
                        <p class="caption-placeholder">Здесь пока пусто</p>
                        <p class="descr-placeholder">А&nbsp;в&nbsp;галерее вы&nbsp;всегда можете найти что-то интересное для себя</p>
                        <a class="link-placeholder" href="#gallery">В&nbsp;галерею</a>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="accordion__wrap">
                  <button class="accordion__btn"><span>C&nbsp;1600 по&nbsp;1699&nbsp;гг.</span></button>
                  <div class="panel accordion__panel">
                    <div class="panel-placeholder">
                      <div class="pic-placeholder"></div>
                      <div class="text-placeholder">
                        <p class="caption-placeholder">Здесь пока пусто</p>
                        <p class="descr-placeholder">А&nbsp;в&nbsp;галерее вы&nbsp;всегда можете найти что-то интересное для себя</p>
                        <a class="link-placeholder" href="#gallery">В&nbsp;галерею</a>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="accordion__wrap">
                  <button class="accordion__btn"><span>C&nbsp;1700 по&nbsp;1799&nbsp;гг.</span></button>
                  <div class="panel accordion__panel">
                    <div class="panel-placeholder">
                      <div class="pic-placeholder"></div>
                      <div class="text-placeholder">
                        <p class="caption-placeholder">Здесь пока пусто</p>
                        <p class="descr-placeholder">А&nbsp;в&nbsp;галерее вы&nbsp;всегда можете найти что-то интересное для себя</p>
                        <a class="link-placeholder" href="#gallery">В&nbsp;галерею</a>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="accordion__wrap">
                  <button class="accordion__btn"><span>C&nbsp;1800 по&nbsp;1899&nbsp;гг.</span></button>
                  <div class="panel accordion__panel">
                    <div class="panel-placeholder">
                      <div class="pic-placeholder"></div>
                      <div class="text-placeholder">
                        <p class="caption-placeholder">Здесь пока пусто</p>
                        <p class="descr-placeholder">А&nbsp;в&nbsp;галерее вы&nbsp;всегда можете найти что-то интересное для себя</p>
                        <a class="link-placeholder" href="#gallery">В&nbsp;галерею</a>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="accordion__wrap">
                  <button class="accordion__btn"><span>C&nbsp;1900 по&nbsp;1999&nbsp;гг.</span></button>
                  <div class="panel accordion__panel">
                    <div class="panel-placeholder">
                      <div class="pic-placeholder"></div>
                      <div class="text-placeholder">
                        <p class="caption-placeholder">Здесь пока пусто</p>
                        <p class="descr-placeholder">А&nbsp;в&nbsp;галерее вы&nbsp;всегда можете найти что-то интересное для себя</p>
                        <a class="link-placeholder" href="#gallery">В&nbsp;галерею</a>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="accordion__wrap">
                  <button class="accordion__btn"><span>C 2000 г.</span></button>
                  <div class="panel accordion__panel">
                    <div class="panel-placeholder">
                      <div class="pic-placeholder"></div>
                      <div class="text-placeholder">
                        <p class="caption-placeholder">Здесь пока пусто</p>
                        <p class="descr-placeholder">А&nbsp;в&nbsp;галерее вы&nbsp;всегда можете найти что-то интересное для себя</p>
                        <a class="link-placeholder" href="#gallery">В&nbsp;галерею</a>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="tab catalogue__tab" data-target="de">
              <p class="text catalogue__descr">
                Немецкие художники. Я так счастлив, мой друг, так упоен ощущением покоя, что искусство мое страдает от этого. Ни одного штриха не мог бы я сделать, а никогда не был таким большим художником, как в эти минуты. Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я.
              </p>
              <div class="card tab__card" id="tab__card-de">
                <img class="card__pic" loading="lazy" src="./img/catalogue/catalogue-germany.jpg" 
                  alt="Плейденвурф, Ганс">
                  <!--return loading="lazy" -->
                <h3 class="card__title">Плейденвурф, Ганс</h3>
                <span class="card__date">ок.&nbsp;1420&nbsp;&mdash; 9&nbsp;января 1472.</span>
                <p class="card__text">
                  С&nbsp;1457&nbsp;г. Ганс Плейденвурф обосновался в&nbsp;Нюрнберге и&nbsp;ввёл новый реалистичный стиль в&nbsp;местной живописи, проникнутый влиянием голландской живописи. Предположительно Плейденвурф был учителем Михаэля Вольгемута. Его сын Вильгельм Плейденвурф вместе с&nbsp;Михаэлем Вольгемутом выполнил ксилографии для Хроники Гартмана Шеделя. Другой сын Ганса Плейденвурфа Себальд переехал в&nbsp;Айслебен, о&nbsp;его профессии ничего не&nbsp;известно.
                </p>
              </div>
              <ul class="ul accordion tab__accordion is-active" >
                <li class="accordion__wrap is-active">
                  <button class="accordion__btn"><span>C&nbsp;1400 по&nbsp;1499&nbsp;гг.</span></button>
                  <div class="panel accordion__panel">
                    <ul class="ul panel__list">
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-de">Бургкмайр, Ханс</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-de">Вольгемут, Михаэль</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-de">Катцхаймер, Вольфганг</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-de">Нотке, Бернт</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-de">Плейденвурф, Ганс</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-de">Шонгауэр, Мартин</a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li class="accordion__wrap">
                  <button class="accordion__btn"><span>C&nbsp;1500 по&nbsp;1599&nbsp;гг.</span></button>
                  <div class="panel accordion__panel">
                    <div class="panel-placeholder">
                      <div class="pic-placeholder"></div>
                      <div class="text-placeholder">
                        <p class="caption-placeholder">Здесь пока пусто</p>
                        <p class="descr-placeholder">А&nbsp;в&nbsp;галерее вы&nbsp;всегда можете найти что-то интересное для себя</p>
                        <a class="link-placeholder" href="#gallery">В&nbsp;галерею</a>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="accordion__wrap">
                  <button class="accordion__btn"><span>C&nbsp;1600 по&nbsp;1699&nbsp;гг.</span></button>
                  <div class="panel accordion__panel">
                    <div class="panel-placeholder">
                      <div class="pic-placeholder"></div>
                      <div class="text-placeholder">
                        <p class="caption-placeholder">Здесь пока пусто</p>
                        <p class="descr-placeholder">А&nbsp;в&nbsp;галерее вы&nbsp;всегда можете найти что-то интересное для себя</p>
                        <a class="link-placeholder" href="#gallery">В&nbsp;галерею</a>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="accordion__wrap">
                  <button class="accordion__btn"><span>C&nbsp;1700 по&nbsp;1799&nbsp;гг.</span></button>
                  <div class="panel accordion__panel">
                    <div class="panel-placeholder">
                      <div class="pic-placeholder"></div>
                      <div class="text-placeholder">
                        <p class="caption-placeholder">Здесь пока пусто</p>
                        <p class="descr-placeholder">А&nbsp;в&nbsp;галерее вы&nbsp;всегда можете найти что-то интересное для себя</p>
                        <a class="link-placeholder" href="#gallery">В&nbsp;галерею</a>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="accordion__wrap">
                  <button class="accordion__btn"><span>C&nbsp;1800 по&nbsp;1899&nbsp;гг.</span></button>
                  <div class="panel accordion__panel">
                    <div class="panel-placeholder">
                      <div class="pic-placeholder"></div>
                      <div class="text-placeholder">
                        <p class="caption-placeholder">Здесь пока пусто</p>
                        <p class="descr-placeholder">А&nbsp;в&nbsp;галерее вы&nbsp;всегда можете найти что-то интересное для себя</p>
                        <a class="link-placeholder" href="#gallery">В&nbsp;галерею</a>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="accordion__wrap">
                  <button class="accordion__btn"><span>C&nbsp;1900 по&nbsp;1999&nbsp;гг.</span></button>
                  <div class="panel accordion__panel">
                    <div class="panel-placeholder">
                      <div class="pic-placeholder"></div>
                      <div class="text-placeholder">
                        <p class="caption-placeholder">Здесь пока пусто</p>
                        <p class="descr-placeholder">А&nbsp;в&nbsp;галерее вы&nbsp;всегда можете найти что-то интересное для себя</p>
                        <a class="link-placeholder" href="#gallery">В&nbsp;галерею</a>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="accordion__wrap">
                  <button class="accordion__btn"><span>C 2000 г.</span></button>
                  <div class="panel accordion__panel">
                    <div class="panel-placeholder">
                      <div class="pic-placeholder"></div>
                      <div class="text-placeholder">
                        <p class="caption-placeholder">Здесь пока пусто</p>
                        <p class="descr-placeholder">А&nbsp;в&nbsp;галерее вы&nbsp;всегда можете найти что-то интересное для себя</p>
                        <a class="link-placeholder" href="#gallery">В&nbsp;галерею</a>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="tab catalogue__tab" data-target="it">
              <p class="text catalogue__descr">
                Акционеры крупнейших компаний, которые представляют собой яркий пример континентально-европейского типа
                политической культуры, будут объявлены нарушающими общечеловеческие нормы этики и&nbsp;морали. Являясь всего
                лишь частью общей картины, стремящиеся вытеснить традиционное производство, нанотехнологии
                и&nbsp;по&nbsp;сей день остаются уделом либералов, которые жаждут быть функционально разнесены
                на&nbsp;независимые элементы.
              </p>
              <div class="card tab__card" id="tab__card-it">
                <img class="card__pic" loading="lazy" src="./img/catalogue/catalogue-girlandayo.jpg" 
                  alt="Доменико Гирландайо">
                  <!--return loading="lazy" -->
                <h3 class="card__title">Доменико Гирландайо</h3>
                <span class="card__date">2&nbsp;июня 1448&nbsp;&mdash; 11&nbsp;января 1494.</span>
                <p class="card__text">
                  Один из&nbsp;ведущих флорентийских художников Кватроченто, основатель художественной династии, которую
                  продолжили его брат Давид и&nbsp;сын Ридольфо. Глава художественной мастерской, где юный Микеланджело
                  в&nbsp;течение года овладевал профессиональными навыками. Автор фресковых циклов, в&nbsp;которых
                  выпукло, со&nbsp;всевозможными подробностями показана домашняя жизнь библейских персонажей
                  (в&nbsp;их&nbsp;роли выступают знатные граждане Флоренции в&nbsp;костюмах того времени).
                </p>
              </div>
              <ul class="ul accordion tab__accordion is-active" >
                <li class="accordion__wrap is-active">
                  <button class="accordion__btn"><span>C&nbsp;1400 по&nbsp;1499&nbsp;гг.</span></button>
                  <div class="panel accordion__panel">
                    <ul class="ul panel__list">
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-it">Бенедетто ди Биндо</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-it">Бергоньоне, Амброджо</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-it">Биссоло, Франческо</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-it">Больтраффио, Джованни</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-it">Бонсиньори, Франческо</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-it">Боттичини, Рафаэлло</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-it">Брамантино</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-it">Бреа, Людовико</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-it">Бьяджо д'Антонио Туччи</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-it">Веккьетта</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-it">Андреа Вероккьо</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-it">Доменико Гирландайо</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-it">Беноццо Гоццоли</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-it">Граначчи, Франческо</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-it">Грегорио ди Чекко</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-it">Джованни да Удине</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-it">Джованни ди Паоло</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-it">Джорджоне</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-it">Парентино, Бернардо</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-it">Пезеллино</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-it">Пьетро Перуджино</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-it">Перуцци, Бальдассаре</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-it">Пизанелло</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-it">Пинтуриккьо</a>
                      </li>
                      <!-- TEMPORAL FIX FOR PIXEL PERFECT -->
                      <li class="panel__item temp-fix">
                        <a class="panel__link">TEMPORAL</a>
                      </li>
                      <li class="panel__item temp-fix">
                        <a class="panel__link">TEMPORAL</a>
                      </li>
                      <li class="panel__item temp-fix">
                        <a class="panel__link">TEMPORAL</a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li class="accordion__wrap">
                  <button class="accordion__btn"><span>C&nbsp;1500 по&nbsp;1599&nbsp;гг.</span></button>
                  <div class="panel accordion__panel">
                    <div class="panel-placeholder">
                      <div class="pic-placeholder"></div>
                      <div class="text-placeholder">
                        <p class="caption-placeholder">Здесь пока пусто</p>
                        <p class="descr-placeholder">А&nbsp;в&nbsp;галерее вы&nbsp;всегда можете найти что-то интересное для себя</p>
                        <a class="link-placeholder" href="#gallery">В&nbsp;галерею</a>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="accordion__wrap">
                  <button class="accordion__btn"><span>C&nbsp;1600 по&nbsp;1699&nbsp;гг.</span></button>
                  <div class="panel accordion__panel">
                    <div class="panel-placeholder">
                      <div class="pic-placeholder"></div>
                      <div class="text-placeholder">
                        <p class="caption-placeholder">Здесь пока пусто</p>
                        <p class="descr-placeholder">А&nbsp;в&nbsp;галерее вы&nbsp;всегда можете найти что-то интересное для себя</p>
                        <a class="link-placeholder" href="#gallery">В&nbsp;галерею</a>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="accordion__wrap">
                  <button class="accordion__btn"><span>C&nbsp;1700 по&nbsp;1799&nbsp;гг.</span></button>
                  <div class="panel accordion__panel">
                    <div class="panel-placeholder">
                      <div class="pic-placeholder"></div>
                      <div class="text-placeholder">
                        <p class="caption-placeholder">Здесь пока пусто</p>
                        <p class="descr-placeholder">А&nbsp;в&nbsp;галерее вы&nbsp;всегда можете найти что-то интересное для себя</p>
                        <a class="link-placeholder" href="#gallery">В&nbsp;галерею</a>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="accordion__wrap">
                  <button class="accordion__btn"><span>C&nbsp;1800 по&nbsp;1899&nbsp;гг.</span></button>
                  <div class="panel accordion__panel">
                    <div class="panel-placeholder">
                      <div class="pic-placeholder"></div>
                      <div class="text-placeholder">
                        <p class="caption-placeholder">Здесь пока пусто</p>
                        <p class="descr-placeholder">А&nbsp;в&nbsp;галерее вы&nbsp;всегда можете найти что-то интересное для себя</p>
                        <a class="link-placeholder" href="#gallery">В&nbsp;галерею</a>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="accordion__wrap">
                  <button class="accordion__btn"><span>C&nbsp;1900 по&nbsp;1999&nbsp;гг.</span></button>
                  <div class="panel accordion__panel">
                    <div class="panel-placeholder">
                      <div class="pic-placeholder"></div>
                      <div class="text-placeholder">
                        <p class="caption-placeholder">Здесь пока пусто</p>
                        <p class="descr-placeholder">А&nbsp;в&nbsp;галерее вы&nbsp;всегда можете найти что-то интересное для себя</p>
                        <a class="link-placeholder" href="#gallery">В&nbsp;галерею</a>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="accordion__wrap">
                  <button class="accordion__btn"><span>C 2000 г.</span></button>
                  <div class="panel accordion__panel">
                    <div class="panel-placeholder">
                      <div class="pic-placeholder"></div>
                      <div class="text-placeholder">
                        <p class="caption-placeholder">Здесь пока пусто</p>
                        <p class="descr-placeholder">А&nbsp;в&nbsp;галерее вы&nbsp;всегда можете найти что-то интересное для себя</p>
                        <a class="link-placeholder" href="#gallery">В&nbsp;галерею</a>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="tab catalogue__tab" data-target="ru">
              <p class="text catalogue__descr">
                Русские художники. Когда от милой моей долины поднимается пар и полдневное солнце стоит над непроницаемой чащей темного леса и лишь редкий луч проскальзывает в его святая святых, а я лежу в высокой траве у быстрого ручья и, прильнув к земле, вижу тысячи всевозможных былинок и чувствую, как близок моему сердцу крошечный мирок, что снует между стебельками, наблюдаю эти неисчислимые, непостижимые разновидности червяков и мошек.
              </p>
              <div class="card tab__card" id="tab__card-ru">
                <img class="card__pic" loading="lazy" src="./img/catalogue/catalogue-russia.jpg" 
                  alt="Андрей Рублёв">
                  <!--return loading="lazy" -->
                <h3 class="card__title">Андрей Рублёв</h3>
                <span class="card__date">около 1360&nbsp;&mdash; 17&nbsp;октября 1428.</span>
                <p class="card__text">
                  Русский иконописец московской школы иконописи, книжной и&nbsp;монументальной живописи XV&nbsp;века. Канонизирован Русской православной церковью в&nbsp;лике преподобных. Большинство исследователей согласны с&nbsp;тем, что&nbsp;им, скорее всего, написана &laquo;Владимирская Богоматерь&raquo; (около 1409, Успенский собор, Владимир) и&nbsp;часть миниатюр &laquo;Евангелия Хитрово&raquo;.
                </p>
              </div>
              <ul class="ul accordion tab__accordion is-active" >
                <li class="accordion__wrap is-active">
                  <button class="accordion__btn"><span>C&nbsp;1400 по&nbsp;1499&nbsp;гг.</span></button>
                  <div class="panel accordion__panel">
                    <ul class="ul panel__list">
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-ru">Амвросий</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-ru">Дионисий</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-ru">Прохор с Городца</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-ru">Андрей Рублёв</a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li class="accordion__wrap">
                  <button class="accordion__btn"><span>C&nbsp;1500 по&nbsp;1599&nbsp;гг.</span></button>
                  <div class="panel accordion__panel">
                    <div class="panel-placeholder">
                      <div class="pic-placeholder"></div>
                      <div class="text-placeholder">
                        <p class="caption-placeholder">Здесь пока пусто</p>
                        <p class="descr-placeholder">А&nbsp;в&nbsp;галерее вы&nbsp;всегда можете найти что-то интересное для себя</p>
                        <a class="link-placeholder" href="#gallery">В&nbsp;галерею</a>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="accordion__wrap">
                  <button class="accordion__btn"><span>C&nbsp;1600 по&nbsp;1699&nbsp;гг.</span></button>
                  <div class="panel accordion__panel">
                    <div class="panel-placeholder">
                      <div class="pic-placeholder"></div>
                      <div class="text-placeholder">
                        <p class="caption-placeholder">Здесь пока пусто</p>
                        <p class="descr-placeholder">А&nbsp;в&nbsp;галерее вы&nbsp;всегда можете найти что-то интересное для себя</p>
                        <a class="link-placeholder" href="#gallery">В&nbsp;галерею</a>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="accordion__wrap">
                  <button class="accordion__btn"><span>C&nbsp;1700 по&nbsp;1799&nbsp;гг.</span></button>
                  <div class="panel accordion__panel">
                    <div class="panel-placeholder">
                      <div class="pic-placeholder"></div>
                      <div class="text-placeholder">
                        <p class="caption-placeholder">Здесь пока пусто</p>
                        <p class="descr-placeholder">А&nbsp;в&nbsp;галерее вы&nbsp;всегда можете найти что-то интересное для себя</p>
                        <a class="link-placeholder" href="#gallery">В&nbsp;галерею</a>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="accordion__wrap">
                  <button class="accordion__btn"><span>C&nbsp;1800 по&nbsp;1899&nbsp;гг.</span></button>
                  <div class="panel accordion__panel">
                    <div class="panel-placeholder">
                      <div class="pic-placeholder"></div>
                      <div class="text-placeholder">
                        <p class="caption-placeholder">Здесь пока пусто</p>
                        <p class="descr-placeholder">А&nbsp;в&nbsp;галерее вы&nbsp;всегда можете найти что-то интересное для себя</p>
                        <a class="link-placeholder" href="#gallery">В&nbsp;галерею</a>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="accordion__wrap">
                  <button class="accordion__btn"><span>C&nbsp;1900 по&nbsp;1999&nbsp;гг.</span></button>
                  <div class="panel accordion__panel">
                    <div class="panel-placeholder">
                      <div class="pic-placeholder"></div>
                      <div class="text-placeholder">
                        <p class="caption-placeholder">Здесь пока пусто</p>
                        <p class="descr-placeholder">А&nbsp;в&nbsp;галерее вы&nbsp;всегда можете найти что-то интересное для себя</p>
                        <a class="link-placeholder" href="#gallery">В&nbsp;галерею</a>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="accordion__wrap">
                  <button class="accordion__btn"><span>C 2000 г.</span></button>
                  <div class="panel accordion__panel">
                    <div class="panel-placeholder">
                      <div class="pic-placeholder"></div>
                      <div class="text-placeholder">
                        <p class="caption-placeholder">Здесь пока пусто</p>
                        <p class="descr-placeholder">А&nbsp;в&nbsp;галерее вы&nbsp;всегда можете найти что-то интересное для себя</p>
                        <a class="link-placeholder" href="#gallery">В&nbsp;галерею</a>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="tab catalogue__tab" data-target="be">
              <p class="text catalogue__descr">
                Бельгийские художники. Чувствую близость всемогущего, создавшего нас по своему подобию, веяние вселюбящего, судившего нам парить в вечном блаженстве, когда взор мой туманится и все вокруг меня и небо надо мной запечатлены в моей душе, точно образ возлюбленной, - тогда, дорогой друг, меня часто томит мысль: "Ах! Как бы выразить, как бы вдохнуть в рисунок то, что так полно, так трепетно живет во мне, запечатлеть отражение моей души, как душа моя - отражение предвечного бога!"
              </p>
              <div class="card tab__card" id="tab__card-be">
                <img class="card__pic" loading="lazy" src="./img/catalogue/catalogue-belgium.jpg" 
                  alt="Говартс, Абрахам">
                  <!--return loading="lazy" -->
                <h3 class="card__title">Говартс, Абрахам</h3>
                <span class="card__date">30&nbsp;августа 1589&nbsp;&mdash; 9&nbsp;сентября 1626.</span>
                <p class="card__text">
                  Художественное образование получил в&nbsp;мастерских Яна Брейгеля Старшего и&nbsp;Гиллиса ван Конингсло. В&nbsp;1607/1608 годах Абрахам Говартс становится мастером в&nbsp;антверпенской гильдии святого Луки, объединявшей художников этого города. В&nbsp;1622 году он&nbsp;вступает в&nbsp;брак с&nbsp;Изабеллой Гиллис, от&nbsp;которой имел двух дочерей. Обладал известным достатком, владея в&nbsp;Антверпене двумя домами.
                </p>
              </div>
              <ul class="ul accordion tab__accordion is-active" >
                <li class="accordion__wrap is-active">
                  <button class="accordion__btn"><span>C&nbsp;1400 по&nbsp;1499&nbsp;гг.</span></button>
                  <div class="panel accordion__panel">
                    <ul class="ul panel__list">
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-be">Говартс, Абрахам</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-be">Кейринкс, Александр</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-be">Момпер, Йоос де</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-be">Роби, Жан-Батист</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-be">Саделер, Валериус де</a>
                      </li>
                      <li class="panel__item">
                        <a class="panel__link" href="#tab__card-be">Холлер, Альфред</a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li class="accordion__wrap">
                  <button class="accordion__btn"><span>C&nbsp;1500 по&nbsp;1599&nbsp;гг.</span></button>
                  <div class="panel accordion__panel">
                    <div class="panel-placeholder">
                      <div class="pic-placeholder"></div>
                      <div class="text-placeholder">
                        <p class="caption-placeholder">Здесь пока пусто</p>
                        <p class="descr-placeholder">А&nbsp;в&nbsp;галерее вы&nbsp;всегда можете найти что-то интересное для себя</p>
                        <a class="link-placeholder" href="#gallery">В&nbsp;галерею</a>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="accordion__wrap">
                  <button class="accordion__btn"><span>C&nbsp;1600 по&nbsp;1699&nbsp;гг.</span></button>
                  <div class="panel accordion__panel">
                    <div class="panel-placeholder">
                      <div class="pic-placeholder"></div>
                      <div class="text-placeholder">
                        <p class="caption-placeholder">Здесь пока пусто</p>
                        <p class="descr-placeholder">А&nbsp;в&nbsp;галерее вы&nbsp;всегда можете найти что-то интересное для себя</p>
                        <a class="link-placeholder" href="#gallery">В&nbsp;галерею</a>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="accordion__wrap">
                  <button class="accordion__btn"><span>C&nbsp;1700 по&nbsp;1799&nbsp;гг.</span></button>
                  <div class="panel accordion__panel">
                    <div class="panel-placeholder">
                      <div class="pic-placeholder"></div>
                      <div class="text-placeholder">
                        <p class="caption-placeholder">Здесь пока пусто</p>
                        <p class="descr-placeholder">А&nbsp;в&nbsp;галерее вы&nbsp;всегда можете найти что-то интересное для себя</p>
                        <a class="link-placeholder" href="#gallery">В&nbsp;галерею</a>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="accordion__wrap">
                  <button class="accordion__btn"><span>C&nbsp;1800 по&nbsp;1899&nbsp;гг.</span></button>
                  <div class="panel accordion__panel">
                    <div class="panel-placeholder">
                      <div class="pic-placeholder"></div>
                      <div class="text-placeholder">
                        <p class="caption-placeholder">Здесь пока пусто</p>
                        <p class="descr-placeholder">А&nbsp;в&nbsp;галерее вы&nbsp;всегда можете найти что-то интересное для себя</p>
                        <a class="link-placeholder" href="#gallery">В&nbsp;галерею</a>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="accordion__wrap">
                  <button class="accordion__btn"><span>C&nbsp;1900 по&nbsp;1999&nbsp;гг.</span></button>
                  <div class="panel accordion__panel">
                    <div class="panel-placeholder">
                      <div class="pic-placeholder"></div>
                      <div class="text-placeholder">
                        <p class="caption-placeholder">Здесь пока пусто</p>
                        <p class="descr-placeholder">А&nbsp;в&nbsp;галерее вы&nbsp;всегда можете найти что-то интересное для себя</p>
                        <a class="link-placeholder" href="#gallery">В&nbsp;галерею</a>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="accordion__wrap">
                  <button class="accordion__btn"><span>C 2000 г.</span></button>
                  <div class="panel accordion__panel">
                    <div class="panel-placeholder">
                      <div class="pic-placeholder"></div>
                      <div class="text-placeholder">
                        <p class="caption-placeholder">Здесь пока пусто</p>
                        <p class="descr-placeholder">А&nbsp;в&nbsp;галерее вы&nbsp;всегда можете найти что-то интересное для себя</p>
                        <a class="link-placeholder" href="#gallery">В&nbsp;галерею</a>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="events" id="events">
      <div class="container events__container">
        <div class="content events__content">
          <h2 class="heading events__heading">События</h2>
          <div class="events__wrapper-container swiper">
            <ul class="ul events__wrapper swiper-wrapper" aria-label="события">
              <li class="events__slide">
                <article class="events__card">
                  <picture>
                    <source media="(min-width: 1025px)" srcset="./img/events/event_1.jpg">
                    <img class="events__image" src="./img/events/event_1-less.jpg" loading="lazy" alt="Книжная гравюра">
                  </picture>
                  <div class="events__card-content">
                    <span class="events__info">
                      Музей им. Щусева
                      <br>с&nbsp;20&nbsp;марта по&nbsp;30&nbsp;апреля
                    </span>
                    <h3 class="events__title">Книжная гравюра в живом восприятии</h3>
                    <p class="text events__descr">Один из&nbsp;ведущих флорентийских художников Кватроченто, основатель
                      художественной династии, которую продолжили его брат Давид и&nbsp;сын Ридольфо.</p>
                    <a class="link events__link" href="">Подробнее</a>
                  </div>
                </article>
              </li>
              <li class="events__slide">
                <article class="events__card">
                  <picture>
                    <source media="(min-width: 1025px)" srcset="./img/events/event_2.jpg">
                    <img class="events__image" src="./img/events/event_2-less.jpg" loading="lazy" alt="Дмитрий Петров">
                  </picture>
                  <div class="events__card-content">
                    <span class="events__info">
                      ММОМА
                      <br>24&nbsp;марта 19:00
                    </span>
                    <h3 class="events__title">&laquo;Открытая дискуссия&raquo;. Дмитрий Петров и Сергей Ильин.</h3>
                    <p class="text events__descr">Высокий уровень вовлечения представителей целевой аудитории является четким доказательством простого факта.</p>
                    <a class="link events__link" href="">Подробнее</a>
                  </div>
                </article>
              </li>
              <li class="events__slide">
                <article class="events__card">
                  <picture>
                    <source media="(min-width: 1025px)" srcset="./img/events/event_3.jpg">
                    <img class="events__image" src="./img/events/event_3-less.jpg" loading="lazy" alt="Еврейский музей">
                  </picture>
                  <div class="events__card-content">
                    <span class="events__info">
                      Еврейский музей
                      <br>с&nbsp;31&nbsp;марта по&nbsp;21&nbsp;апреля
                    </span>
                    <h3 class="events__title">Выставка «Формация 2020»</h3>
                    <p class="text events__descr">Идейные соображения высшего порядка, а&nbsp;также современная методология разработки играет важную роль в&nbsp;формировании глубокомысленных рассуждений.</p>
                    <a class="link events__link" href="">Подробнее</a>
                  </div>
                </article>
              </li>
              <li class="events__slide">
                <article class="events__card">
                  <picture>
                    <source media="(min-width: 1025px)" srcset="./img/events/event_4.jpg">
                    <img class="events__image" src="./img/events/event_4-less.jpg" loading="lazy" alt="Биеннале">
                  </picture>
                  <div class="events__card-content">
                    <span class="events__info">
                      Третьяковка на&nbsp;Крымском валу
                      <br>с&nbsp;30&nbsp;марта по&nbsp;30&nbsp;апреля
                    </span>
                    <h3 class="events__title">XXIV Международная биеннале молодого искусства</h3>
                    <p class="text events__descr">Внезапно, реплицированные с&nbsp;зарубежных источников, современные исследования.</p>
                    <a class="link events__link" href="">Подробнее</a>
                  </div>
                </article>
              </li>
              <li class="events__slide">
                <article class="events__card">
                  <picture>
                    <source media="(min-width: 1025px)" srcset="./img/events/event_5.jpg">
                    <img class="events__image" src="./img/events/event_5-less.jpg" loading="lazy"
                      alt="Фото Джона Винзора">
                  </picture>
                  <div class="events__card-content">
                    <span class="events__info">
                      ММАМ
                      <br>с&nbsp;8&nbsp;апреля по&nbsp;20&nbsp;мая
                    </span>
                    <h3 class="events__title">Джон Винзор. Фотографии из серии &laquo;Метафора серебра&raquo;</h3>
                    <p class="text events__descr">Один из&nbsp;ведущих флорентийских художников Кватроченто, основатель художественной династии, которую продолжили его брат Давид и&nbsp;сын Ридольфо.</p>
                    <a class="link events__link" href="">Подробнее</a>
                  </div>
                </article>
              </li>
            </ul>
          </div>
          <div class="events__btn-wrapper">
            <button class="btn events__btn">Все&nbsp;события</button>
          </div>
        </div>
      </div>
    </section>

    <section class="books" id="books">
      <div class="container books__container">
        <div class="books__content">
          <form class="books__filter-column">
            <h2 class="heading books__heading">Издания</h2>

            <span class="books__checkwrap-text">Категории</span>
            <button class="btn books__checkwrap-text" type="button">Категории</button>
            <div class="books__dropdown-wrapper">
              <ul class="ul books__checkwrap books__checkwrap-main" aria-label="Фильтр по категориям">
                <li class="books__checkbox-item">
                  <label class="books__checkbox-label">
                    <input class="visually-hidden books__checkbox" type="checkbox" name="1" id="main-1">
                    <span class="books__checkbox-text">Бестселлеры</span>
                  </label>
                </li>
                <li class="books__checkbox-item">
                  <label class="books__checkbox-label">
                    <input class="visually-hidden books__checkbox" type="checkbox" name="2" id="main-2">
                    <span class="books__checkbox-text">Искусство</span>
                  </label>
                </li>
                <li class="books__checkbox-item">
                  <label class="books__checkbox-label">
                    <input class="visually-hidden books__checkbox" type="checkbox" name="3" id="main-3">
                    <span class="books__checkbox-text">Архитектура</span>
                  </label>
                </li>
                <li class="books__checkbox-item visible">
                  <label class="books__checkbox-label is-active">
                    <input class="visually-hidden books__checkbox" type="checkbox" name="4" id="main-4" checked>
                    <span class="books__checkbox-text">Дизайн</span>
                  </label>
                </li>
                <li class="books__checkbox-item">
                  <label class="books__checkbox-label">
                    <input class="visually-hidden books__checkbox" type="checkbox" name="5" id="main-5">
                    <span class="books__checkbox-text">Мода</span>
                  </label>
                </li>
                <li class="books__checkbox-item">
                  <label class="books__checkbox-label">
                    <input class="visually-hidden books__checkbox" type="checkbox" name="6" id="main-6">
                    <span class="books__checkbox-text">Детям</span>
                  </label>
                </li>
                <li class="books__checkbox-item">
                  <label class="books__checkbox-label">
                    <input class="visually-hidden books__checkbox" type="checkbox" name="7" id="main-7">
                    <span class="books__checkbox-text">Художественная литература</span>
                  </label>
                </li>
                <li class="books__checkbox-item">
                  <label class="books__checkbox-label">
                    <input class="visually-hidden books__checkbox" type="checkbox" name="8" id="main-8">
                    <span class="books__checkbox-text">Публицистика</span>
                  </label>
                </li>
                <li class="books__checkbox-item">
                  <label class="books__checkbox-label">
                    <input class="visually-hidden books__checkbox" type="checkbox" name="9" id="main-9">
                    <span class="books__checkbox-text">Путеводители</span>
                  </label>
                </li>
                <li class="books__checkbox-item">
                  <label class="books__checkbox-label">
                    <input class="visually-hidden books__checkbox" type="checkbox" name="10" id="main-10">
                    <span class="books__checkbox-text">Философия</span>
                  </label>
                </li>
                <li class="books__checkbox-item">
                  <label class="books__checkbox-label">
                    <input class="visually-hidden books__checkbox" type="checkbox" name="11" id="main-11">
                    <span class="books__checkbox-text">Учебная литература</span>
                  </label>
                </li>
                <li class="books__checkbox-item">
                  <label class="books__checkbox-label">
                    <input class="visually-hidden books__checkbox" type="checkbox" name="12" id="main-12">
                    <span class="books__checkbox-text">Журналы и&nbsp;газеты</span>
                  </label>
                </li>
              </ul>
              <ul class="ul books__checkwrap books__checkwrap-dropdown complete-hidden">
                <li class="books__checkbox-item-dropdown">
                  <label class="books__checkbox-label">
                    <input class="visually-hidden books__checkbox" type="checkbox" name="1" id="double-1">
                    <span class="books__checkbox-text">Бестселлеры</span>
                  </label>
                </li>
                <li class="books__checkbox-item-dropdown">
                  <label class="books__checkbox-label">
                    <input class="visually-hidden books__checkbox" type="checkbox" name="2" id="double-2">
                    <span class="books__checkbox-text">Искусство</span>
                  </label>
                </li>
                <li class="books__checkbox-item-dropdown">
                  <label class="books__checkbox-label">
                    <input class="visually-hidden books__checkbox" type="checkbox" name="3" id="double-3">
                    <span class="books__checkbox-text">Архитектура</span>
                  </label>
                </li>
                <li class="books__checkbox-item-dropdown">
                  <label class="books__checkbox-label is-active">
                    <input class="visually-hidden books__checkbox" type="checkbox" name="4" id="double-4" checked>
                    <span class="books__checkbox-text">Дизайн</span>
                  </label>
                </li>
                <li class="books__checkbox-item-dropdown">
                  <label class="books__checkbox-label">
                    <input class="visually-hidden books__checkbox" type="checkbox" name="5" id="double-5">
                    <span class="books__checkbox-text">Мода</span>
                  </label>
                </li>
                <li class="books__checkbox-item-dropdown">
                  <label class="books__checkbox-label">
                    <input class="visually-hidden books__checkbox" type="checkbox" name="6" id="double-6">
                    <span class="books__checkbox-text">Детям</span>
                  </label>
                </li>
                <li class="books__checkbox-item-dropdown">
                  <label class="books__checkbox-label">
                    <input class="visually-hidden books__checkbox" type="checkbox" name="7" id="double-7">
                    <span class="books__checkbox-text">Художественная литература</span>
                  </label>
                </li>
                <li class="books__checkbox-item-dropdown">
                  <label class="books__checkbox-label">
                    <input class="visually-hidden books__checkbox" type="checkbox" name="8" id="double-8">
                    <span class="books__checkbox-text">Публицистика</span>
                  </label>
                </li>
                <li class="books__checkbox-item-dropdown">
                  <label class="books__checkbox-label">
                    <input class="visually-hidden books__checkbox" type="checkbox" name="9" id="double-9">
                    <span class="books__checkbox-text">Путеводители</span>
                  </label>
                </li>
                <li class="books__checkbox-item-dropdown">
                  <label class="books__checkbox-label">
                    <input class="visually-hidden books__checkbox" type="checkbox" name="10" id="double-10">
                    <span class="books__checkbox-text">Философия</span>
                  </label>
                </li>
                <li class="books__checkbox-item-dropdown">
                  <label class="books__checkbox-label">
                    <input class="visually-hidden books__checkbox" type="checkbox" name="11" id="double-11">
                    <span class="books__checkbox-text">Учебная литература</span>
                  </label>
                </li>
                <li class="books__checkbox-item-dropdown">
                  <label class="books__checkbox-label">
                    <input class="visually-hidden books__checkbox" type="checkbox" name="12" id="double-12">
                    <span class="books__checkbox-text">Журналы и&nbsp;газеты</span>
                  </label>
                </li>
              </ul>
            </div>

            <span class="books__pricewrap-caption">Цена</span>
            <div class="books__price">
              <span class="books__price-text">От</span>
              <input class="books__price-input books__price-text" type="number" id="price-low" autocomplete="off" placeholder="50">
              <span class="books__price-text">до</span>
              <input class="books__price-input books__price-text" type="number" id="price-high" autocomplete="off" placeholder="25 000">
              <span class="books__price-text">руб.</span>
            </div>
          </form>

          <div class="books__swiper-container">
            <div class="swiper books__swiper">
              <div class="books-navigation swiper-navigation">
                <!-- Navigation buttons -->
                <div class="books-pagination swiper-pagination"></div>
                <div class="books-button-prev swiper-button-prev"></div>
                <div class="books-button-next swiper-button-next"></div>
              </div>
              <div class="books__wrapper-container">
                <ul class="swiper-wrapper books__swiper-wrapper">
                  <li class="swiper-slide book books__book" data-set="1">
                    <img class="book__image" src="./img/books/1.jpg" loading="lazy" alt="Исскуство цвета">
                    <div class="book__textwrap">
                      <span class="book__title">Исскуство цвета</span>
                      <span class="book__price">620 руб</span>
                      <span class="book__author">Иттен, Иоханнес</span>
                    </div>
                    <button class="btn book__btn">Заказать</button>
                  </li>
                  <li class="swiper-slide book books__book" data-set="2">
                    <img class="book__image" src="./img/books/2.jpg" loading="lazy" alt="Типографика">
                    <div class="book__textwrap">
                      <span class="book__title">Типографика</span>
                      <span class="book__price">2&nbsp;450 руб</span>
                      <span class="book__author">Рудер, Эмиль</span>
                    </div>
                    <button class="btn book__btn">Заказать</button>
                  </li>
                  <li class="swiper-slide book books__book" data-set="3">
                    <img class="book__image" src="./img/books/3.jpg" loading="lazy" alt="Книга про буквы">
                    <div class="book__textwrap">
                      <span class="book__title">Книга про буквы</span>
                      <span class="book__price">2&nbsp;200 руб</span>
                      <span class="book__author">Гордон, Юрий</span>
                    </div>
                    <button class="btn book__btn">Заказать</button>
                  </li>
                  <li class="swiper-slide book books__book" data-set="4">
                    <img class="book__image" src="./img/books/4.jpg" loading="lazy" alt="Николай Ильин">
                    <div class="book__textwrap">
                      <span class="book__title">Николай Ильин</span>
                      <span class="book__price">1&nbsp;100 руб</span>
                      <span class="book__author">Кричевский, Владимир</span>
                    </div>
                    <button class="btn book__btn">Заказать</button>
                  </li>
                  <li class="swiper-slide book books__book" data-set="5">
                    <img class="book__image" src="./img/books/5.jpg" loading="lazy" alt="Модульные сетки в&nbsp;графическом дизайне">
                    <div class="book__textwrap">
                      <span class="book__title">Модульные сетки в&nbsp;графическом дизайне</span>
                      <span class="book__price">1&nbsp;450 руб</span>
                      <span class="book__author">Мюллер-Брокманн, Йозеф</span>
                    </div>
                    <button class="btn book__btn">Заказать</button>
                  </li>
                  <li class="swiper-slide book books__book" data-set="6">
                    <img class="book__image" src="./img/books/6.jpg" loading="lazy" alt="Эволюция графических стилей">
                    <div class="book__textwrap">
                      <span class="book__title">Эволюция графических стилей</span>
                      <span class="book__price">3&nbsp;200 руб</span>
                      <span class="book__author">Хеллер, Чваст</span>
                    </div>
                    <button class="btn book__btn">Заказать</button>
                  </li>
                  <li class="swiper-slide book books__book" data-set="7">
                    <img class="book__image" src="./img/books/7.jpg" loading="lazy" alt="Исскуство и&nbsp;визуальное восприятие">
                    <div class="book__textwrap">
                      <span class="book__title">Исскуство и&nbsp;визуальное восприятие</span>
                      <span class="book__price">2&nbsp;200 руб</span>
                      <span class="book__author">Арнхейм, Рудольф</span>
                    </div>
                    <button class="btn book__btn">Заказать</button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="projects" id="projects">
      <div class="container projects__container">
        <div class="content projects__content">
          <h2 class="heading projects__heading">Проекты</h2>
          <p class="text projects__descr">
            Предварительные выводы: постоянное информационно-пропагандистское обеспечение нашей деятельности однозначно
            фиксирует необходимость своевременного выполнения сверхзадачи. А&nbsp;ещё независимые государства смешаны
            с&nbsp;не&nbsp;уникальными данными до&nbsp;степени совершенной неузнаваемости, из-за чего возрастает
            их&nbsp;статус бесполезности. Прежде всего, постоянное информационно-пропагандистское
            <button class="btn projects__tip" id="tip-1" aria-label="Подсказка">i</button>
            обеспечение нашей деятельности однозначно фиксирует необходимость экономической целесообразности принимаемых
            решений. И&nbsp;нет сомнений, что действия представителей оппозиции могут быть рассмотрены
            <button class="btn projects__tip" id="tip-2" aria-label="Подсказка">i</button>
            исключительно в&nbsp;разрезе маркетинговых и&nbsp;финансовых
            <button class="btn projects__tip" id="tip-3" aria-label="Подсказка">i</button>
            предпосылок. Банальные, но&nbsp;неопровержимые выводы, а&nbsp;также представители современных социальных
            резервов призывают нас к&nbsp;новым свершениям, которые, в&nbsp;свою очередь, должны быть смешаны
            с&nbsp;не&nbsp;уникальными данными до&nbsp;степени совершенной неузнаваемости. Подробнее:
            <a class="link projects__link" href="#about" aria-label="О нас">blanchard-art.ru/projects/about</a>
          </p>

          <h3 class="heading projects__caption">Партнёры проектов:</h3>

          <div class="projects__swiper-container">
            <div class="projects-button-prev swiper-button-prev"></div>
            <div class="projects-button-next swiper-button-next"></div>
            <div class="swiper projects__swiper">
              <div class="swiper-wrapper projects__swiper-wrapper">
                <div class="swiper-slide projects__slide" data-set="1">
                  <a class="link projects__partners-link" href="">
                    <img class="projects__partners-img" src="./img/projects/1.jpg" loading="lazy" alt="Партнёр 1">
                  </a>
                </div>
                <div class="swiper-slide projects__slide" data-set="2">
                  <a class="link projects__partners-link" href="">
                    <img class="projects__partners-img" src="./img/projects/2.jpg" loading="lazy" alt="Партнёр 2">
                  </a>
                </div>
                <div class="swiper-slide projects__slide" data-set="3">
                  <a class="link projects__partners-link" href="">
                    <img class="projects__partners-img" src="./img/projects/3.jpg" loading="lazy" alt="Партнёр 3">
                  </a>
                </div>
                <div class="swiper-slide projects__slide" data-set="4">
                  <a class="link projects__partners-link" href="">
                    <img class="projects__partners-img" src="./img/projects/4.jpg" loading="lazy" alt="Партнёр 4">
                  </a>
                </div>
                <div class="swiper-slide projects__slide" data-set="5">
                  <a class="link projects__partners-link" href="">
                    <img class="projects__partners-img" src="./img/projects/5.jpg" loading="lazy" alt="Партнёр 5">
                  </a>
                </div>
                <div class="swiper-slide projects__slide" data-set="6">
                  <a class="link projects__partners-link" href="">
                    <img class="projects__partners-img" src="./img/projects/6.jpg" loading="lazy" alt="Партнёр 6">
                  </a>
                </div>
                <div class="swiper-slide projects__slide" data-set="7">
                  <a class="link projects__partners-link" href="">
                    <img class="projects__partners-img" src="./img/projects/7.jpg" loading="lazy" alt="Партнёр 7">
                  </a>
                </div>
                <div class="swiper-slide projects__slide" data-set="8">
                  <a class="link projects__partners-link" href="">
                    <img class="projects__partners-img" src="./img/projects/8.jpg" loading="lazy" alt="Партнёр 8">
                  </a>
                </div>
                <div class="swiper-slide projects__slide" data-set="9">
                  <a class="link projects__partners-link" href="">
                    <img class="projects__partners-img" src="./img/projects/9.jpg" loading="lazy" alt="Партнёр 9">
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="contacts" id="contacts">
      <div class="container">
        <h2 class="heading contacts__heading">Контакты</h2>
      </div>
      <div class="contacts__divider"></div>
      <div class="container contacts__container">
        <div class="content contacts__content">
          <div class="contacts__wrapper">
            <address class="address contacts__address">
              <p class="address__caption">Шоурум &#8470;&nbsp;4</p>
              <p class="address__descr">Леонтьевский переулок, дом 5/1</p>
            </address>

            <form class="form contacts__form" id="contacts__form" action="mail.php" method="POST">
              <h3 class="form__caption">Заказать обратный звонок</h3>
              <label class="form__label" for="name">
                <input class="form__input" type="text" name="name" id="name" data-validate-field="name" placeholder="Имя*">
              </label>
              <label class="form__label" for="tel">
                <input class="form__input tel" type="tel" name="tel" id="tel" data-validate-field="tel" placeholder="Телефон*">
              </label>
              <button class="btn form__btn form__btn-modal" type="submit">Заказать</button>
            </form>

            <div class="modal contacts__modal">
              <div class="modal__window window" data-target="sent">
                <div class="window__content">
                  <span class="window__title">Контакты успешно отправлены!</span>
                  <p class="text window__descr">Очень скоро мы с вами свяжемся</p>
                </div>
                <button class="window__close"></button>
              </div>
            </div>

            <h3 class="contacts__socials-heading">Связаться в&nbsp;один клик</h3>
            <ul class="ul contacts__social-list">
              <li class="contacts__social-item">
                <a class="link contacts__social-link" href="" aria-label="WhatsApp">
                  <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M20 39.375C30.7005 39.375 39.375 30.7005 39.375 20C39.375 9.29948 30.7005 0.625 20 0.625C9.29948 0.625 0.625 9.29948 0.625 20C0.625 30.7005 9.29948 39.375 20 39.375Z" fill="#30BF39"/>
                    <path d="M25.8749 21.751C25.6249 21.626 24.3124 20.876 24.0624 20.8135C23.8124 20.6885 23.6249 20.6885 23.4374 20.9385C23.2499 21.1885 22.6874 21.8135 22.5624 21.9385C22.3749 22.126 22.2499 22.126 21.9999 22.001C21.7499 21.876 20.8749 21.5635 19.8749 20.5635C19.1249 19.8135 18.5624 18.9385 18.4374 18.626C18.3124 18.376 18.4374 18.1885 18.5624 18.0635C18.6874 17.9385 18.8124 17.751 18.9999 17.626C19.1874 17.501 19.1874 17.376 19.3124 17.1885C19.4374 17.001 19.3749 16.876 19.3124 16.6885C19.2499 16.501 18.7499 15.1885 18.5624 14.626C18.3749 14.0635 18.1249 14.1885 17.9999 14.126C17.8124 14.126 17.6874 14.0635 17.4999 14.0635C17.2499 14.0635 16.9374 14.1885 16.7499 14.376C16.4999 14.626 15.7499 15.251 15.7499 16.5635C15.7499 17.876 16.6249 19.251 16.7499 19.376C16.8749 19.5635 18.4999 22.4385 21.1874 23.626C23.8749 24.8135 23.8749 24.4385 24.3749 24.4385C24.8749 24.4385 25.9999 23.8135 26.2499 23.251C26.4999 22.626 26.4999 22.0635 26.4374 22.001C26.3124 22.001 26.1249 21.9385 25.8749 21.751ZM20.8749 28.1885C19.1249 28.1885 17.4999 27.6885 16.0624 26.751L12.6874 27.8135L13.8124 24.5635C12.7499 23.0635 12.1249 21.251 12.1249 19.376C12.1249 14.501 16.0624 10.5635 20.9374 10.5635C25.8124 10.5635 29.6874 14.501 29.6874 19.376C29.6874 24.251 25.7499 28.1885 20.8749 28.1885ZM20.8749 8.81348C15.0624 8.81348 10.3124 13.5635 10.3124 19.376C10.3124 21.3135 10.8124 23.1885 11.8124 24.8135L9.87489 30.501L15.7499 28.626C17.3124 29.501 19.0624 29.9385 20.8749 29.9385C26.6874 29.9385 31.4374 25.1885 31.4374 19.376C31.4374 13.5635 26.7499 8.81348 20.8749 8.81348Z" fill="white"/>
                  </svg>
                </a>
              </li>
              <li class="contacts__social-item">
                <a class="link contacts__social-link" href="" aria-label="Telegram">
                  <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M20 40C31.0457 40 40 31.0457 40 20C40 8.95431 31.0457 0 20 0C8.95431 0 0 8.95431 0 20C0 31.0457 8.95431 40 20 40Z" fill="url(#paint0_linear_57972_1461)"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.05312 19.7889L20.7167 14.7649C26.271 12.4547 27.425 12.0534 28.1773 12.0402C28.3428 12.0373 28.7127 12.0783 28.9523 12.2727C29.1547 12.4369 29.2103 12.6587 29.237 12.8143C29.2636 12.9699 29.2968 13.3246 29.2704 13.6017C28.9694 16.7641 27.667 24.4386 27.0045 27.9806C26.7241 29.4794 26.1725 29.9819 25.6377 30.0311C24.4762 30.138 23.5943 29.2635 22.4694 28.5261L18.006 25.528C16.0314 24.2268 17.3114 23.5116 18.4368 22.3428C18.7313 22.0368 23.8486 17.3823 23.9476 16.96C23.9596 16.9072 23.9715 16.7104 23.8546 16.6064C23.7376 16.5024 23.565 16.5384 23.4404 16.5663C23.2639 16.6064 20.4519 18.465 15.0044 22.1423C14.2062 22.6904 13.4832 22.9575 12.8354 22.9435C12.1213 22.9281 10.7477 22.5397 9.72652 22.2078C8.474 21.8007 7.47852 21.5854 7.56524 20.8939C7.61036 20.5338 8.10632 20.1655 9.05308 19.789L9.05312 19.7889Z" fill="white"/>
                    <defs><linearGradient id="paint0_linear_57972_1461" x1="20" y1="0" x2="20" y2="39.7033" gradientUnits="userSpaceOnUse"><stop offset="1" stop-color="#2AABEE"/><stop offset="1" stop-color="#229ED9"/></linearGradient></defs>
                  </svg> 
                </a>              
              </li>
            </ul>         
          </div>
          <div class="contacts__map" id="map"></div>
        </div>
      </div>
    </section>

  </main>

  <footer class="footer">
    <div class="container footer__container">
      <div class="content footer__content">
        <a class="link footer__logo-link">
          <img class="logo footer__logo" src="img/logo.svg" loading="lazy" alt="Blanchard logo">
        </a>

        <ul class="ul footer__socials-list">
          <li class="footer__socials-item">
            <a class="link footer__socials-link" href="" aria-label="Vkontakte">
              <svg viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M22.5 0C10.074 0 0 10.0736 0 22.5C0 34.9264 10.074 45 22.5 45C34.926 45 45 34.9264 45 22.5C45 10.0736 34.926 0 22.5 0ZM33.9132 24.9335C34.9619 25.9577 36.0714 26.9217 37.0128 28.0519C37.4299 28.5519 37.823 29.0688 38.1222 29.6503C38.5495 30.4794 38.1637 31.3886 37.4216 31.4379L32.812 31.4369C31.6215 31.5354 30.6741 31.0553 29.8754 30.2414C29.2378 29.5927 28.6462 28.8999 28.0321 28.2292C27.7812 27.9539 27.517 27.6947 27.2021 27.4907C26.5737 27.0819 26.0277 27.2072 25.6677 27.8636C25.3008 28.5316 25.217 29.2719 25.182 30.0153C25.1319 31.1022 24.8041 31.3863 23.7135 31.4374C21.3832 31.5465 19.1721 31.1929 17.117 30.0181C15.3041 28.9818 13.901 27.5193 12.6783 25.8634C10.2973 22.6353 8.47381 19.0924 6.8354 15.4478C6.46665 14.627 6.73642 14.1878 7.64194 14.1707C9.14639 14.1417 10.6508 14.1454 12.1553 14.1694C12.7676 14.179 13.1727 14.5294 13.4079 15.1071C14.2209 17.1074 15.2176 19.0105 16.4665 20.7755C16.7994 21.2455 17.1391 21.7142 17.623 22.0461C18.157 22.4125 18.5639 22.2915 18.8158 21.6953C18.9769 21.3164 19.0464 20.9113 19.0814 20.5053C19.2011 19.1145 19.2153 17.7242 19.0082 16.339C18.8793 15.4722 18.3918 14.9124 17.5277 14.7485C17.0876 14.6652 17.152 14.5022 17.3661 14.2508C17.7376 13.8163 18.0856 13.5474 18.7812 13.5474L23.9893 13.5465C24.8101 13.7076 24.9942 14.0759 25.1056 14.9027L25.1102 20.6903C25.1006 21.0103 25.2709 21.9586 25.8454 22.1681C26.3058 22.32 26.6096 21.9508 26.8849 21.6594C28.1339 20.334 29.0237 18.7697 29.8206 17.1506C30.1723 16.4366 30.4757 15.6978 30.7703 14.9575C30.9895 14.4101 31.3301 14.1408 31.9479 14.15L36.9631 14.156C37.1108 14.156 37.2609 14.1574 37.4073 14.1827C38.2525 14.3273 38.4841 14.6909 38.2226 15.5154C37.811 16.8109 37.0114 17.89 36.2297 18.9718C35.3919 20.1301 34.4983 21.2478 33.6687 22.4111C32.9064 23.4746 32.9667 24.01 33.9132 24.9335Z" fill="#CACACA"/>
              </svg>
            </a>
          </li>
          <li class="footer__socials-item">
            <a class="link footer__socials-link" href="" aria-label="Instagram">
              <svg viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M18.1172 22.5C18.1172 24.8785 20.0453 26.8066 22.4238 26.8066C24.8024 26.8066 26.7305 24.8785 26.7305 22.5C26.7305 20.1215 24.8024 18.1934 22.4238 18.1934C20.0453 18.1934 18.1172 20.1215 18.1172 22.5Z" fill="#CACACA"/>
                <path d="M12.3521 14.8803C12.5591 14.3194 12.8894 13.8116 13.3185 13.3948C13.7353 12.9656 14.2428 12.6354 14.8041 12.4283C15.2593 12.2515 15.9432 12.0411 17.2029 11.9837C18.5655 11.9216 18.9741 11.9082 22.4238 11.9082C25.8738 11.9082 26.2824 11.9212 27.6447 11.9834C28.9044 12.0411 29.5886 12.2515 30.0435 12.4283C30.6048 12.6354 31.1126 12.9656 31.5291 13.3948C31.9582 13.8116 32.2885 14.319 32.4959 14.8803C32.6727 15.3356 32.8831 16.0198 32.9405 17.2795C33.0026 18.6418 33.016 19.0503 33.016 22.5004C33.016 25.9501 33.0026 26.3587 32.9405 27.7213C32.8831 28.981 32.6727 29.6649 32.4959 30.1201C32.2885 30.6814 31.9586 31.1889 31.5294 31.6057C31.1126 32.0348 30.6052 32.3651 30.0438 32.5721C29.5886 32.7493 28.9044 32.9597 27.6447 33.0171C26.2824 33.0792 25.8742 33.0922 22.4241 33.0922C18.9737 33.0922 18.5652 33.0792 17.2032 33.0171C15.9436 32.9597 15.2593 32.7493 14.8041 32.5721C13.6773 32.1375 12.7867 31.2469 12.3521 30.1201C12.1753 29.6649 11.9648 28.981 11.9071 27.7213C11.845 26.3587 11.8319 25.9501 11.8319 22.5004C11.8319 19.0503 11.845 18.6418 11.9071 17.2795C11.9645 16.0198 12.1749 15.3356 12.3521 14.8803ZM22.4238 29.1344C26.0881 29.1344 29.0585 26.1643 29.0585 22.5001C29.0585 18.8358 26.0881 15.8657 22.4238 15.8657C18.7599 15.8657 15.7894 18.8358 15.7894 22.5001C15.7894 26.1643 18.7599 29.1344 22.4238 29.1344ZM15.5271 17.1538C16.3834 17.1538 17.0776 16.4596 17.0776 15.6034C17.0776 14.7471 16.3834 14.0529 15.5271 14.0529C14.6709 14.0529 13.9767 14.7471 13.9767 15.6034C13.977 16.4596 14.6709 17.1538 15.5271 17.1538Z" fill="#CACACA"/>
                <path d="M22.6204 0C34.9364 0 44.9238 9.98747 44.9238 22.3034C44.9238 34.6194 34.9364 44.6069 22.6204 44.6069C10.3044 44.6069 0.316959 34.6194 0.316959 22.3034C0.316959 9.98747 10.3044 0 22.6204 0ZM9.89059 27.5836C9.95253 28.9469 10.1693 29.8777 10.4858 30.6924C11.1512 32.4127 12.5111 33.7727 14.2314 34.438C15.0458 34.7545 15.9769 34.971 17.3399 35.0332C18.7057 35.0955 19.1419 35.1105 22.6201 35.1105C26.0985 35.1105 26.5345 35.0955 27.9005 35.0332C29.2635 34.971 30.1946 34.7545 31.009 34.438C31.8639 34.1164 32.6378 33.6124 33.2776 32.9607C33.929 32.3212 34.433 31.547 34.7546 30.6924C35.0711 29.878 35.2879 28.9469 35.3498 27.5839C35.4128 26.2178 35.4274 25.7815 35.4274 22.3034C35.4274 18.8253 35.4128 18.389 35.3502 17.0233C35.2883 15.66 35.0718 14.7292 34.7553 13.9145C34.4337 13.0599 33.9293 12.2857 33.2776 11.6462C32.6382 10.9945 31.8639 10.4905 31.0094 10.1689C30.1946 9.85236 29.2638 9.63592 27.9005 9.57364C26.5348 9.51136 26.0985 9.49638 22.6204 9.49638C19.1423 9.49638 18.706 9.51136 17.3403 9.57398C15.9769 9.63592 15.0462 9.85236 14.2314 10.1685C13.3769 10.4901 12.6026 10.9945 11.9628 11.6462C11.3114 12.286 10.8071 13.0599 10.4858 13.9145C10.169 14.7292 9.95253 15.66 9.89025 17.0233C9.82798 18.389 9.81334 18.8253 9.81334 22.3034C9.81334 25.7815 9.82798 26.2178 9.89059 27.5836Z" fill="#CACACA"/>
              </svg>
            </a>
          </li>
          <li class="footer__socials-item">
            <a class="link footer__socials-link" href="" aria-label="Facebook">
              <svg viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M22.5 0C10.125 0 0 10.1431 0 22.6355C0 33.9307 8.23499 43.3057 18.99 45V29.1867H13.275V22.6355H18.99V17.6431C18.99 11.9729 22.3425 8.85542 27.495 8.85542C29.9475 8.85542 32.5125 9.28464 32.5125 9.28464V14.8645H29.6775C26.8875 14.8645 26.01 16.6039 26.01 18.3886V22.6355H32.265L31.2525 29.1867H26.01V45C31.312 44.1593 36.1399 41.4432 39.6223 37.342C43.1047 33.2408 45.012 28.0248 44.9999 22.6355C44.9999 10.1431 34.875 0 22.5 0Z" fill="#CACACA"/>
              </svg>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </footer>

  <script src="js/simplebar.min.js"></script>
  <script src="js/swiper-bundle.min.js"></script>
  <script src="js/choises.min.js"></script>
  <script src="https://unpkg.com/@popperjs/core@2"></script>
  <script src="https://unpkg.com/tippy.js@6"></script>
  <script src="js/inputmask.min.js"></script>
  <script src="js/just-validate.min.js"></script>
  <script src="js/index.js"></script>
  <script async src="//api-maps.yandex.ru/2.0/?apikey=78564415-6e1e-4a59-8452-6172d0c9b371&load=package.standard&lang=ru-RU&onload=getMap"></script>
  <script async src="js/contacts.js"></script>
</body>

</html>