.banner {
    background-image: url("../assets/blog-banner.png");
}
.blogs__padding {
    padding: 0px 10rem 0px 10rem;
}

.blogs__cards__container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 3rem;
    margin-bottom: 3rem;
    gap: 1rem;
}
.blog__card {
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    transition-duration: 300ms;
}
.blog__card:hover {
    transform: scale(1.05);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
        rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
        rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
.blog__card__contents__container {
    padding: 1rem;
}
.blog__card__contents__container a {
    color: #019f30;
}
.blog__card__contents__container h3 {
    margin-bottom: 1rem;
}
.blog__card__contents__container p {
    text-indent: 20px;
}
.blogs__pagenation__container {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}
.blogs__pagenation__wrapper {
    background-color: rgb(242, 251, 246);
    gap: 0.7rem;
    display: flex;

    padding: 0.5rem;
    border-radius: 0.7rem;
}
.blogs__pagenation__container button {
    font-size: 1rem;
    border: none;
    outline: none;
    background-color: rgb(233, 233, 233);
    padding: 0.5rem 0.7rem;
    border-radius: 0.4rem;
    transition-duration: 300ms;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px,
        rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
    color: rgba(0, 0, 0, 0.664);
}

.blogs__pagenation__container button:hover {
    transform: scale(1.2);
    background-color: rgb(210, 249, 215);
}
.blogs__pagenation__container button.active {
    transform: scale(1.2);
    background-color: rgb(180, 247, 189);
    color: black;
}

.blogs__pagenation__container button.disabled:hover {
    transform: scale(1);
    background-color: rgb(233, 233, 233);
    cursor: not-allowed;
}
@media only screen and (max-width: 1485px) {
    .blogs__padding {
        padding: 0px 0.5rem 0px 0.5rem;
    }
}
@media only screen and (max-width: 840px) {
    .blogs__padding {
        padding: 0px 2rem 0px 2rem;
    }
    .blogs__cards__container {
        grid-template-columns: 1fr 1fr;
    }
}
@media only screen and (max-width: 600px) {
    .blogs__padding {
        padding: 0px 1rem 0px 1rem;
    }
    .blogs__cards__container {
        grid-template-columns: 1fr;
    }
    .blog__card__contents__container h3 {
        margin-bottom: 1rem;
    }
    .blog__card__contents__container p {
        font-size: small;
    }
}