@media screen and (max-width: 992px){

    header{
        padding: 10px;
    }
    #nav{
        display: none;
        /* background: #00000085; */
        position: absolute;
        top: 50px;
        z-index: 100;
    }
    .menu-button{
        display: block !important;
        position: absolute;
        right: 15px;
        top: 15px;
        font-size: 20px;
        cursor: pointer;
    }
    .menu-item {
        padding: 10px 0;
        margin: 2px;
        background: #ffffffa6;
        backdrop-filter: blur(8px);
    }
    .banner {
        background-size: cover;
        height: 40vh;
        background-position: top;
        background-position-x: 56%;
    }
    .cta h2 {
        font-size: 1.5rem;
    }
    
    article .featured {
        height: 210px;
        order: -1;
    }
    
    article {
        margin-top: 50px;
    }
    
    .video {
        aspect-ratio: 16/9 !important;
        height: 250px;
    }
    .article .content {
        margin: 0;
    }
    
    
    
    .morecta .btn {
        font-size: .7rem;
    }
    
    .cookbook {
        padding: 0;
        margin: 30px 0;
    }
    
    .booktxt {
        text-align: center;
    }
    
    .booktxt h2 {
        margin: 0;
    }
    
    .booktxt p {
        margin: 0;
        padding: 0 10px;
    }
    #meal {
        margin-bottom: 30px;
    }
    
    .search input {
        margin: 10px 0;
    }
    
    .search .in_icon {
        margin: 10px 0;
    }
    #ingredient {
        margin-bottom: 20px;
    }
    .postdetail {
        width: 25%;
        zoom: .7;
        /* padding-left: 8px; */
    }
    
    
    .postdetail .btn3 {
        padding: 2px;
    }

    .mobileCenter{
        text-align: center !important;
    }
    .morecta h3{
        margin: 5px;
    }
    .morecta{
        padding: 20px;
    }
}