:root {

    /* CSS HEX */
--caribbean-current: #3c6e71ff;
--platinum: #d9d9d9ff;
--black: #010400ff;
--orange-pantone: #fb5607ff;
--chili-red: #ea2b1fff;
}


header {
    height: 50vh;
   
}
.blog-contnet  {
    width: 100%;
    background-color: var(--platinum);
    padding: 20px 0px;
}

.blog-content__cards {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin: 48px 0px;
}
.blog-content__cards__card {
    text-align: center;
    width:45%;
    height: 350px;
    border-radius: 16px;
    /*padding: 24px;*/
    /*
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    */
    background-color: rgb(255, 255, 255);
}
.blog-content__cards__card img {
    width: 100%;
    height: 50%;
    object-fit: fill;
    border-radius: 16px 16px 0px 0px;
}

.blog-content__cards__card h2 {
    margin: 16px 0;
}
.blog-content__cards__card p {
    line-height: 160%;
    margin-bottom: 16px;
}
.blog-content__cards__card a {
    color: var(--chili-red);
}

@media only screen and (max-width:  992px) {
    body {
      background-color: white;
    }
    .navigations {
        padding: 20px;
        display: flex;
        flex-direction: column;
        
    }
   
    .navigations__navbar nav ul {
        display: flex;
        justify-content: space-between;
        align-items: center;
        list-style: none;
        gap: 40px
    }
    .hero {
        width: 95%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        height: 25vh;
        /*
        background-image: url("./hero-mobile.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        */
       
    }
    .wrapper {
        width: 95%;
        margin: 0px auto;
    }
    .blog-contnet  {
        width: 100%;
    }
    
    .blog-content__cards {
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        flex-wrap: wrap;
        margin: 24px 0px;
    }
    .blog-content__cards__card {
        text-align: center;
        width:100%;
        margin: 24px 0px;
        background-color: rgb(255, 255, 255);
      
       
    }
    
    
    
}