/* =======================================================
   BOOK TEMPLATE
======================================================= */

.container {
    width: min(1100px, 92%);
    margin: 0 auto;
}

/* =======================================================
   HERO
======================================================= */

.book-hero{

    position:relative;

    width:100%;

    max-width:1600px;

    margin:0 auto;

    overflow:hidden;

    border-radius:16px;

}

.hero-image{

    display:block;

    width:100%;

    height:auto;

}

.hero-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    background:linear-gradient(
        rgba(0,0,0,.15),
        rgba(0,0,0,.45)
    );

    color:white;

    padding:30px;

}

.series{

    font-size:clamp(16px,2vw,24px);

    letter-spacing:8px;

    text-transform:uppercase;

    color:#d8b56d;

    margin-bottom:20px;

}

.hero-overlay h1{

    font-size:clamp(60px,8vw,140px);

    margin:0;

    line-height:1;

}

.hero-overlay h2{

    font-size:clamp(24px,3vw,48px);

    font-weight:400;

    margin-top:25px;

}

.series {

    color: #d9b96e;

    letter-spacing: 6px;

    text-transform: uppercase;

}

.hero-overlay h1 {

    font-size: clamp(48px,7vw,84px);

    margin: 15px 0;

}

.hero-overlay h2 {

    font-size: clamp(22px,3vw,36px);

    font-weight: 300;

}

/* =======================================================
   DESCRIPTION
======================================================= */

.book-description {

    padding: 90px 0;

}

.book-description h2 {

    margin-bottom: 35px;

}

.book-description p {

    line-height: 1.9;

    font-size: 20px;

}

/* =======================================================
   GALLERY
======================================================= */

.book-gallery {

    padding: 80px 0;

}

.book-gallery h2 {

    margin-bottom: 60px;

}

/* =======================================================
   SCENE
======================================================= */

.scene {

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 40px;

    align-items: center;

    margin-bottom: 80px;

}

.scene img {

    width: 100%;

    border-radius: 12px;

    display: block;

}

.scene-text h3 {

    margin-bottom: 20px;

}

.scene-text p {

    line-height: 1.8;

}

/* =======================================================
   MOBILE
======================================================= */

@media (max-width:900px){

    .scene{

        grid-template-columns:1fr;

    }

    .book-description{

        padding:60px 0;

    }

    .hero-overlay{

        padding:20px;

    }

    .series{

        letter-spacing:4px;

    }

}