/* ==========================================================
   THE FIRE MONK
   Responsive Stylesheet
   Version : 1.0
==========================================================*/



/*==========================================================
    LARGE DESKTOP
    1600px and below
==========================================================*/

@media (max-width:1600px){

    :root{

        --container:1240px;

    }

}


/*==========================================================
    LAPTOP
==========================================================*/

@media (max-width:1400px){

    h1{

        font-size:4.5rem;

    }

    h2{

        font-size:2.8rem;

    }

    .hero-grid{

        gap:60px;

    }

}


/*==========================================================
    STANDARD LAPTOP
==========================================================*/

@media (max-width:1200px){

    .container{

        width:min(94%,1200px);

    }

    h1{

        font-size:4rem;

    }

    h2{

        font-size:2.5rem;

    }

    .hero-grid{

        gap:50px;

    }

    .book-grid{

        gap:60px;

        grid-template-columns:380px 1fr;

    }

    .author-grid{

        gap:60px;

        grid-template-columns:360px 1fr;

    }

}


/*==========================================================
    TABLET LANDSCAPE
==========================================================*/

@media (max-width:1024px){

    section{

        padding:90px 0;

    }

    .navigation ul{

        gap:28px;

    }

    h1{

        font-size:3.4rem;

    }

    .hero-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero-description{

        max-width:700px;

        margin:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-book{

        margin-top:50px;

    }

    .hero-book img{

        max-width:420px;

    }

    .book-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .book-grid img{

        max-width:380px;

        margin:auto;

    }

    .author-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .author-grid img{

        max-width:340px;

        margin:auto;

    }

}


/*==========================================================
    TABLET PORTRAIT
==========================================================*/

@media (max-width:768px){

    .header .container{

        flex-direction:column;

        height:auto;

        padding:20px 0;

    }

    .logo{

        margin-bottom:18px;

    }

    .navigation ul{

        flex-wrap:wrap;

        justify-content:center;

        gap:18px;

    }

    h1{

        font-size:3rem;

        line-height:1.15;

    }

    h2{

        font-size:2.2rem;

    }

    blockquote{

        font-size:1.8rem;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .btn-primary,

    .btn-secondary{

        width:280px;

    }

    .cards{

        grid-template-columns:1fr;

    }

}


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

@media (max-width:600px){

    body{

        font-size:17px;

    }

    section{

        padding:70px 0;

    }

    h1{

        font-size:2.5rem;

    }

    h2{

        font-size:2rem;

    }

    .hero{

        padding-top:170px;

    }

    .hero-tagline{

        font-size:.75rem;

    }

    .hero-book img{

        max-width:300px;

    }

    .book-grid img{

        max-width:300px;

    }

    .author-grid img{

        max-width:280px;

    }

    .card{

        padding:32px;

    }

    .quote-section{

        padding:90px 0;

    }

    .quote-section blockquote{

        font-size:1.45rem;

    }

}

@media (max-width:768px){

.header-logo{

    height:42px;

}

}

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

@media (max-width:480px){

    .container{

        width:92%;

    }

    h1{

        font-size:2.15rem;

    }

    h2{

        font-size:1.8rem;

    }

    h3{

        font-size:1.25rem;

    }

    .hero-description{

        font-size:1rem;

    }

    .btn-primary,

    .btn-secondary{

        width:100%;

        min-width:0;

        height:56px;

    }

    .hero-book img{

        max-width:260px;

    }

    .book-grid img{

        max-width:260px;

    }

    .author-grid img{

        max-width:240px;

    }

    .card{

        padding:26px;

    }

    footer{

        padding:70px 0 45px;

    }

}


/*==========================================================
    EXTRA SMALL MOBILE
==========================================================*/

@media (max-width:360px){

    h1{

        font-size:1.9rem;

    }

    h2{

        font-size:1.55rem;

    }

    .navigation ul{

        gap:12px;

        font-size:.85rem;

    }

    .hero-book img{

        max-width:220px;

    }

}


/*==========================================================
    LANDSCAPE PHONE
==========================================================*/

@media (max-height:600px) and (orientation:landscape){

    .hero{

        min-height:auto;

        padding-top:150px;

        padding-bottom:80px;

    }

}


/*==========================================================
    REDUCED MOTION ACCESSIBILITY
==========================================================*/

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}


/*==========================================================
    HIGH RESOLUTION DISPLAY
==========================================================*/

@media (-webkit-min-device-pixel-ratio:2),
       (min-resolution:192dpi){

    img{

        image-rendering:auto;

    }

}


/*==========================================================
    PRINT
==========================================================*/

@media print{

    .header,

    .hero-buttons,

    .cta-section,

    footer{

        display:none;

    }

    body{

        background:white;

        color:black;

    }

    section{

        padding:20px 0;

    }

}