.blog-container{
    background-image: url(../../img/bg-blog.png);
    background-size: cover;
    background-repeat: no-repeat;
    min-height:100vh;
    background-position: center;
}

.blog{
    max-width: 1336px;
}
.blog-search-post-container{
    min-height:593px
}


.search-blog-container{
    border-radius: 15px;
    max-width: 300px;
}



#input-search{
    border-radius: 15px 0 0 15px;
    padding:0.5rem 1rem!important
 }

.btn-search{
    background:#00A1A0;
    padding:0 0.85rem;
    border-radius: 15px 15px 15px 15px!important;
}

.list-post-container{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:2rem;
}

@media screen and (min-width:992px) and (max-width:1440px) {
    .list-post-container{
        grid-template-columns: repeat(3, 1fr);
    }
}
@media screen and (max-width:992px) {
    .list-post-container{
        grid-template-columns: repeat(2, 1fr);
    }
}
.post-item{
    box-shadow: 2px 2px 2px #0006;
    width:100%;
    height:550px;
    background:white;
    border-radius: 15px;
}
.post-item-header{
    height:213px;
    background:#FCFAE3FF;
    border-radius: 15px 15px 0 0;
}

.post-item-header  img{
    border-radius: 15px 15px 0 0;
    object-fit: cover;
}

.post-item-body{
    height:calc(100% - 213px);
}

.post-item-body  p{
    font-size:0.75rem;
    line-height: 1.25rem;
    max-height:150px;
    font-family: 'rubik-regular',sans-serif;
    overflow:hidden
}
.input-email-blog input{
    border-radius:5px 5px 0 0!important;
}

.btn-submit-email input{
    padding:0.5rem 2rem!important;
}
@media screen and (max-width:900px){
    .search-blog-container{
        max-width: 100%;
        width:100%
    }
    .blog-search-post-container{
        height:auto
    }
}

@media screen and (max-width:576px){
    .info{
        display:none
    }
    .post-item{
        height:217px
    }
    .post-item-header{
        height:100px;
    }
    .post-item-body{
        height:calc(100% - 100px);
    }
    .title-info{
        font-size: 15px!important;
    }
    .list-post-container{
        grid-row-gap: 1rem;
        column-gap: 0.75rem;
    }
  
}

.n2-ss-margin{
    margin:0!important;
    width:100%!important
}

@media screen and (max-width:768px){
    .blog-container{
        background-position: inherit;
    }
}