/* ======================================================
   1400 px
====================================================== */

@media (max-width:1400px){

    :root{

        --container:1100px;

    }

    .hero__container{

        grid-template-columns:420px 1fr;

        gap:70px;

    }

    .hero h1{

        font-size:64px;

    }

    .section__title{

        font-size:48px;

    }

}

@media (min-width: 1400px) {
    .desk {
    position: relative; margin-left: -15.5%; bottom: 40px;
    }
}


/* ======================================================
   1200 px
====================================================== */

@media (max-width:1200px){

    body{

        font-size:18px;

    }

    .container{

        width:min(100% - 48px,1000px);

    }

    .hero{

        padding:70px 0;

    }

    .hero__container{

        grid-template-columns:380px 1fr;

        gap:50px;

    }

    .hero h1{

        font-size:54px;

    }

    .hero h2{

        font-size:28px;

    }

    .hero__description{

        font-size:20px;

    }

    .author{

        grid-template-columns:280px 1fr;

        gap:50px;

    }

}



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

@media (max-width:992px){

    body{

        font-size:17px;

    }

    .section{

        padding:90px 0;

    }

    .hero{

        min-height:auto;

    }

    .hero__container{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero__image{

        max-width:620px;

        margin:auto;

    }

    .hero__content{

        display:flex;

        flex-direction:column;

        align-items:center;

    }

    .hero__description{

        max-width:700px;

    }

    .hero__buttons{

        justify-content:center;

        flex-wrap:wrap;

    }

    .author{

        grid-template-columns:1fr;

        text-align:center;

    }

    .author__photo{

        max-width:150px;

        margin:auto;

    }

    .section__title{

        font-size:42px;

    }

    .text-box{
        padding:36px;

    }
    .fboxi {
        display: flex;
        align-items: center;
        gap: 16px;
        padding-bottom: 20px;
        flex-direction: column;
    }
    .fboxi2 {
        display: flex;
        align-items: center;
        gap: 16px;
        padding-bottom: 20px;
        flex-direction: column-reverse;
    }
    .wimgo {
        width: 100%;
    }

}


@media (min-width:992px){

    .hero__image img {
    width: 40%;
    position: fixed;
    top: 24%;
    left: 6%;
    border-radius: 24px;
    /* box-shadow: var(--shadow); */
    cursor: pointer;
    transition: .4s;
    }
    .fboxi {
        display: flex;
        align-items: center;
        gap: 16px;
        padding-bottom: 20px;
        flex-direction: row;
    }
    .fboxi2 {
        display: flex;
        align-items: center;
        gap: 16px;
        padding-bottom: 20px;
        flex-direction: row;
    }
    .wimgo {
        width: 50%;
    } 
}

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

@media (max-width:768px){

    body{

        font-size:16px;

        line-height:1.75;

    }

    .container{

        width:calc(100% - 32px);
        gap: 20px;

    }

    .section{

        padding:40px 0;

    }

    .hero{

        padding:40px 0 80px;

    }

    .hero__image{
        overflow: hidden;
        max-width:500px;

    }

    .hero h1{

        font-size:42px;

    }

    .hero h2{

        font-size:24px;
        margin-top: -30px;
        letter-spacing: 0.14em;

    }

    .hero__author{

        font-size:18px;

    }

    .hero__description{

        font-size:18px;

    }

    .button{

        width:100%;

        min-width:unset;

    }

    .hero__buttons{

        width:100%;

        gap:16px;

        flex-direction:column;

    }

    .section__title{

        font-size:34px;

    }

    .ornament{

       /* width:110px; */

    }

    .text-box{

        padding:26px;

        border-radius:16px;

    }

    .text-box p::first-letter{

        font-size:3.5rem;

    }

    .contents-list li{

        font-size:18px;

        padding-left:44px;

    }

    .buy__buttons{

        flex-direction:column;

    }

    .mobile-nav{

        display:flex;

    }

    .fab{

        display:flex;

    }

    .footer{

        padding-bottom:140px;

    }

}



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

@media (max-width:480px){

    .container.hero__container {
        width: calc(100% - 3px);
        }

    .hero__image img  {
    object-fit: cover;
    width: auto;
    height: 440px;
    }

    .hero__content {
    width: calc(100% - 32px);
    margin-inline: auto;
    }

    body{

        font-size:17px;

    }

    .hero h1{

        font-size:32px;

    }

    .hero h2{

        font-size:21px;
        margin-top: -30px;
        letter-spacing: 0em;

    }

    .hero__description{

        font-size:17px;

    }

    .section__title{

        font-size:28px;

    }

    .text-box{

        padding:22px;

    }

    .text-box--scroll{

        max-height:520px;

    }

    .button{

        height:54px;

        font-size:16px;

    }

    .fab{

        width:56px;

        height:56px;

        right:16px;

        bottom:88px;

        font-size:30px;

    }

}