.container-box{ 
    flex-wrap: wrap;  
}
.container-box-blog{
    width: 100%;
}
.box-blog{
    margin:0 0.75rem;
    width: 26%;
    height: 100%; 
    justify-content: start;
    gap: 1rem;  
    margin-bottom: 40px;
}
.box-blog:hover{
    text-decoration: none !important;
}
.box-blog > div {
    width: 100%;
    background-position: center;
    background-size: cover;
    height: 530px;
    background-repeat: no-repeat;
}
.box-blog h3{
    font-family: 'Articulat-Thin';
    font-size: 32px;
    margin-top: 1rem;
} 
.box-blog{
    font-family: 'Articulat-Light';
    letter-spacing: 0.8px;
}
.box-blog p{
    font-size: 20px;
    margin-top:1rem;
}
.box-blog button{ 
margin-top: 2rem;
display: flex;
width: fit-content; 
border: none;
color: white;
cursor: pointer;
font-size: 25px;
}
.box-blog button:hover{
    text-decoration: underline !important;
}


@media screen  and (min-width:768px) and  (max-width:1300px){
    .box-blog h3{
        font-size: 27px;
    }

    .box-blog p{
        font-size: 18px;
    }
}

 
@media screen and (max-width:768px) {
    .container-box{
        flex-direction: column;
    }
    .box-case{
        width: 100%;
    }
}

@media screen and (max-width:480px) and (max-width:768px) {
    .box-blog h3{
        font-size: 25px;
    }

    .box-blog p{
        font-size: 18px;
    }
}

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

}

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

}