/* ==========================================================
   THE SALTY FLY
   VARIABLES
   Version 1.0
   ========================================================== */

:root{

/* ==========================================================
   COLORS
   ========================================================== */

--color-primary:        #183B5A;
--color-primary-light:  #325679;

--color-background:     #FCFCFA;

--color-text:           #2E3A42;

--color-line:           #D8DEE2;


/* ==========================================================
   TYPOGRAPHY
   ========================================================== */

--font-serif: "Crimson Pro", Georgia, serif;

--font-sans: "Source Sans 3", Calibri, Arial, sans-serif;


/* ==========================================================
   FONT SIZES
   ========================================================== */

--fs-h1: clamp(2.75rem, 5vw, 4rem);

--fs-h2: clamp(2.10rem, 4vw, 3rem);

--fs-h3: clamp(1.55rem, 3vw, 2rem);

--fs-lead: clamp(1.20rem, 2vw, 1.45rem);

--fs-body: 1.25rem;

--fs-small: .95rem;


/* ==========================================================
   LINE HEIGHT
   ========================================================== */

--lh-headline: 1.15;

--lh-text: 1.75;


/* ==========================================================
   FONT WEIGHT
   ========================================================== */

--fw-light:300;

--fw-normal:400;

--fw-medium:500;

--fw-semibold:600;


/* ==========================================================
   CONTENT WIDTH
   ========================================================== */

--content-width:1240px;

--content-wide:1440px;

--text-width:70ch;


/* ==========================================================
   SPACING
   8 Pixel Grid
   ========================================================== */

--space-xs:8px;

--space-s:16px;

--space-m:32px;

--space-l:64px;

--space-xl:96px;

--space-xxl:160px;


/* ==========================================================
   BORDER
   ========================================================== */

--border-light:1px solid var(--color-line);


/* ==========================================================
   TRANSITIONS
   ========================================================== */

--transition-fast:.20s ease;

--transition:.30s ease;

--transition-slow:.45s ease;


/* ==========================================================
   SHADOW
   ========================================================== */

--shadow-soft:

0 12px 36px rgba(0,0,0,.08);


/* ==========================================================
   HEADER
   ========================================================== */

--header-height:96px;


/* ==========================================================
   Z-INDEX
   ========================================================== */

--z-navigation:1000;

--z-overlay:1100;

--z-modal:1200;

}

/* ======================================================
     EINBLICKE INS BUCH
====================================================== */

<section class="section book-insights">

    <div class="container">

        <header class="book-insights-header">

            <p class="eyebrow">
                EINBLICKE INS BUCH
            </p>

            <h2>
                Ein paar Seiten vorab.
            </h2>

        </header>


        <div class="book-spreads">

            <figure class="book-spread">
                <img src="assets/images/book/book-spread-01.webp"
                     alt="Doppelseite aus The Salty Fly"
                     loading="lazy">
            </figure>

            <figure class="book-spread">
                <img src="assets/images/book/book-spread-02.webp"
                     alt="Doppelseite aus The Salty Fly"
                     loading="lazy">
            </figure>

            <figure class="book-spread">
                <img src="assets/images/book/book-spread-03.webp"
                     alt="Doppelseite aus The Salty Fly"
                     loading="lazy">
            </figure>

            <figure class="book-spread">
                <img src="assets/images/book/book-spread-04.webp"
                     alt="Doppelseite aus The Salty Fly"
                     loading="lazy">
            </figure>

            <figure class="book-spread">
                <img src="assets/images/book/book-spread-05.webp"
                     alt="Doppelseite aus The Salty Fly"
                     loading="lazy">
            </figure>

            <figure class="book-spread">
                <img src="assets/images/book/book-spread-06.webp"
                     alt="Doppelseite aus The Salty Fly"
                     loading="lazy">
            </figure>

        </div>

    </div>

</section>