@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

body {
    font-size: 16px;
    font-family: "Lato";
}

.section-padding {
    padding: 5rem 0;
}
.banner-wrapper-blogs{
    position: relative;
}
.banner-image-wrapper-blogs img{
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: auto 	281/78;
}
.banner-content-blogs h1{
    position: absolute;
    top: 40%;
    left: 4%;
    right: 0;
    color: #ffffff;
    font-size:  3.375em;
    font-family: "Lato";
}
.banner-heading{
    position: absolute;
    top: 38%;
    bottom: 0;
    left: 4%;
    right: 0;
    color: #ffffff;
}
.banner-content-blogs span{
    font-size: 3.375em;
    font-family: "Lato";
}
.banner-heading h1{
    font-size: 3.325em;
    font-family: "Lato";
    line-height: 0.7em;
}

.grid-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    max-width: 93%;
    margin: 0 auto;
    gap: 40px;

}

.blogs-cards {
    border: 1px solid #D0D0D0;
    padding-bottom: 30px;

}

.blogs-cards img {
    display: block;
    height: auto;
    width: 100%;
    aspect-ratio: auto 186/133;
}

.blogs-cards p {
    padding: 0px 20px;
    padding: 15px 20px 0px 20px;
    font-size: 1.5em;
    font-family: "Lato";
    color: #121212;
    font-weight: 500;
}

#dates {
    padding: 15px 20px 0px 20px;
    font-size: 1em;
    font-family: "Lato";
    color: #121212;
}

.blogs-cards a {
    padding: 15px 20px 0px 20px;
    position: relative;
    font-size: 0.9em;
    font-family: "Lato";
    color: #121212;
    text-decoration: none;
    font-weight: 600;

}

.blogs-cards a::after {
    content: " ";
    position: absolute;
    left: 14%;
    bottom: 0;
    width: 75%;
    height: 1.5px;
    background-color: #121212;
    top: 100%;
    margin-top: 5px;
}

.load-button {
    display: flex;
    justify-content: center;
    align-items: center;
}

.load-button button {
    font-size: 1.25em;
    font-family: "Lato";
    background: unset;
    border: 1.5px solid #121212;
    border-radius: 42px;
    padding: 8px 30px;
    margin-top: 50px;
}




/* ---------------------------MEDIA QUERY----------------------- */


@media screen and (min-width: 2500px) {
    body {
        max-width: 2500px;
    }
}

@media screen and (min-width: 2000px) and (max-width: 2499px) {

  
    #dates {
        font-size: 1.325em;
    }
    .blogs-cards p {
        font-size: 2em;
    }
    .blogs-cards a {
        font-size: 1.25em;
    }
    
.load-button button {
    font-size: 1.625em;
    padding: 10px 35px;
}
}

@media screen and (min-width: 1600px) and (max-width: 1999px) {
   
    #dates {
        font-size: 1.325em;
    }
    .blogs-cards p {
        font-size: 1.8em;
    }
    .blogs-cards a {
        font-size: 1.25em;
    }
    
.load-button button {
    font-size: 1.625em;
    padding: 10px 35px;
}
}

@media screen and (min-width: 1025px) and (max-width: 1280px) {
   
    #dates {
        padding: 15px 20px 0px 20px;
        font-size: 0.9em;
    }
    .blogs-cards p {
        font-size: 1.325em;
    }
    .blogs-cards a {
        font-size: 0.8em;
    }
    .load-button button {
        font-size: 1.15em;
        padding: 10px 35px;
    }
}
@media screen and (min-width: 992px) and (max-width: 1024px) {
    .banner-content-blogs p {
        font-size: 1em;
    }
    .banner-heading h1, .banner-heading span {
        font-size: 2.5em;
    }
    #dates {
        
        font-size: 0.9em;
    }
    .blogs-cards p {
        font-size: 1.325em;
    }
    .blogs-cards a {
        font-size: 0.8em;
    }
    .load-button button {
        font-size: 1.15em;
        padding: 10px 35px;
    }
}

@media screen and (min-width: 769px) and (max-width: 991px) {
    .banner-content-blogs p {
        font-size: 0.8em;
    }
    .banner-heading h1, .banner-heading span {
        font-size: 2.25em;
    }
    #dates {
        font-size: 0.9em;
    }
    .blogs-cards p {
        font-size: 1.2em;
    }
    .blogs-cards a {
        font-size: 0.8em;
    }
    .load-button button {
        font-size: 1.15em;
        padding: 10px 35px;
    }
}

@media screen and (min-width: 569px) and (max-width: 768px) {
    .banner-heading {
        top: 40%;
    }
    .banner-content-blogs p {
        font-size: 0.8em;
    }
    .banner-heading h1, .banner-heading span {
        font-size: 2.15em;
    }
    #dates {
        font-size: 0.9em;
    }
    .blogs-cards p {
        font-size: 1em;
    }
    .blogs-cards a {
        font-size: 0.8em;
    }
    .load-button button {
        font-size: 1.15em;
        padding: 10px 35px;
    }
}

@media screen and (min-width: 320px) and (max-width: 568px) {
    .banner-heading {
        top: 48%;
    }
    .banner-content-blogs p {
        font-size: 0.6em;
    }
    .banner-heading h1, .banner-heading span {
        font-size: 1.25em;
    }
    .banner-heading h1 {
        line-height: 0em;
    }
    .grid-wrapper {
        grid-template-columns: repeat(1, 1fr);
        max-width: 83%;
    }
    #dates {
        font-size: 0.9em;
    }
    .blogs-cards p {
        font-size: 1em;
    }
    .blogs-cards a {
        font-size: 0.8em;
    }
    .load-button button {
        font-size: 0.8em;
        padding: 5px 20px;
    }
}