/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width:1024px){

    .posts-grid{

        grid-template-columns:1fr;

        gap:4rem;

    }

}

@media (max-width:768px){

    .site-header .container{

        flex-direction:column;

        gap:2rem;

        text-align:center;

    }
.header-inner {

    display: grid;

    grid-template-columns:
        60px
        1fr
        60px;

    align-items: center;

}
    .main-nav ul{

        flex-wrap:wrap;

        justify-content:center;

        gap:1.25rem;

    }

    .post{

        width:min(92%,760px);

        padding:3rem 0 5rem;

    }

    .post-title{

        font-size:clamp(2.5rem,9vw,4rem);

    }

    .site-title{

        font-size:clamp(3rem,12vw,5rem);

    }

}

@media (max-width:480px){

    body{

        font-size:17px;

    }

    .main-nav ul{

        gap:.75rem;

    }

    .main-nav a{

        font-size:.75rem;

    }

    .card__title{

        font-size:1.8rem;

    }

    .post-content{

        font-size:1.05rem;

        line-height:1.85;

    }

}