<section class="section" id="events">

<div class="container">

<p class="section-name">Events</p>

<h2 class="events-title">Upcoming Events at Booksy</h2>

<p class="events-text">

Discover readings, workshops, and bookish gatherings — online and offline.

Everyone’s welcome.

</p>

<!-- ===================Swiper контейнер================== -->

<div class="swiper events-swiper">

<ul class="swiper-wrapper events-list">

<!-- slide 1 -->

<li class="swiper-slide events-item">

<picture class="events-image">

<source

srcset="

./img/events/events-1-1x.jpg 1x,

./img/events/events-1-2x.jpg 2x

"

/>

<img

src="./img/events/events-1-1x.jpg"

width="343"

height="248"

alt="Cozy Book Club"

loading="eager"

decoding="async"

/>

</picture>

<div class="events-content-wrapper">

<div class="section-register">

<p class="events-description">

Cozy Book Club — “The Midnight Library”

</p>

<div class="event-meta">

<span class="event-location">In-store </span>

<time datetime="2025-06-05T18:30">| June 5, 6:30 PM</time>

</div>

<p class="events-content">

Join us for an evening of tea, thoughtful conversation, and

shared reflections as we dive into Matt Haig’s bestseller.

</p>

</div>

<button

class="event-btn btn-secondary events-btn event-register-btn"

data-event="Cozy Book Club — “The Midnight Library”"

type="button"

>

Register

<svg class="icon-chevron-right" width="25" height="25">

<use href="./img/icons.svg#icon-chevron-right"></use>

</svg>

</button>

</div>

</li>

<!-- =================== slide 2==================== -->

<li class="swiper-slide events-item">

<picture class="events-image">

<source

srcset="

./img/events/events-2-1x.jpg 1x,

./img/events/events-2-2x.jpg 2x

"

/>

<img

src="./img/events/events-2-1x.jpg"

width="343"

height="248"

loading="lazy"

decoding="async"

alt="Book Cover Design Workshop"

/>

</picture>

<div class="events-content-wrapper">

<div>

<p class="events-description">Book Cover Design Workshop</p>

<div class="event-meta">

<span class="event-location">Online </span>

<time datetime="2025-06-12T19:00">| June 12, 7:00 PM</time>

</div>

<p class="events-content">

A hands-on session for aspiring designers and curious readers.

Learn what makes a cover stand out — from concept to print.

</p>

</div>

<button

class="event-btn btn-secondary events-btn event-register-btn"

data-event="Book Cover Design Workshop"

type="button"

>

Register

<svg class="icon-chevron-right" width="25" height="25">

<use href="./img/icons.svg#icon-chevron-right"></use>

</svg>

</button>

</div>

</li>

<!-- <!================ slide 3 ==========================> -->

<li class="swiper-slide events-item">

<picture class="events-image">

<source

srcset="

./img/events/events-3-1x.jpg 1x,

./img/events/events-3-2x.jpg 2x

"

/>

<img

src="./img/events/events-3-1x.jpg"

width="343"

height="248"

loading="lazy"

decoding="async"

alt="Children’s Story Hour"

/>

</picture>

<div class="events-content-wrapper">

<div>

<p class="events-description">Children’s Story Hour</p>

<div class="event-meta">

<span class="event-location">Online </span>

<time datetime="2025-06-12T19:00"> | June 12, 7:00 PM</time>

</div>

<p class="events-content">

A magical morning of stories, games, and imagination for our

youngest book lovers (ages 4–8).

</p>

</div>

<button

class="event-btn btn-secondary events-btn event-register-btn"

data-event="Children’s Story Hour"

type="button"

>

Register

<svg class="icon-chevron-right" width="25" height="25">

<use href="./img/icons.svg#icon-chevron-right"></use>

</svg>

</button>

</div>

</li>

</ul>

<!-- button and pagination -->

<div class="events-controls-wrapper">

<ul class="ev-pagination" aria-label="Slides pagination"></ul>

<div class="events-buttons-wrapper">

<button

class="events-swiper-btn-prev arrow"

type="button"

aria-label="Previous slide"

disabled

>

<svg class="svg" width="24" height="24">

<use href="./img/icons.svg#icon-left-arrow-alt"></use>

</svg>

</button>

<button

class="events-swiper-btn-next arrow"

type="button"

aria-label="Next slide"

>

<svg class="svg" width="24" height="24">

<use href="./img/icons.svg#icon-right-arrow-alt"></use>

</svg>

</button>

</div>

</div>

</div>

<div id="modal-backdrop" class="backdrop"></div>

</div>

</section>