section.blog-section
{

    --tw-bg-opacity: .9;
    .category-name
    {
        text-transform: uppercase;
    }

    .post-container
    {
        cursor: pointer;

        div.featured-img
        {
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            width: 100%;
            height: 24rem;
        }

        div.side-post-img
        {
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            width: 100%;
            height: 9rem;
        }
    }
}
section.allposts-section
{
    .bottom-posts
    {
        max-width: 290px;

        div.btm-img-post
        {
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            width: 13rem;
            height: 13rem;
            max-width: 100%;
        }
    }

}

.btm-img-post
{
    transition: all 0.2s ease-in-out;
    &:hover
    {
        transform: scale(1.1, 1.1);
    }
}

@media screen and (min-width: 1280px) {
    section.blog-section
    {
        padding-left: 8rem;
        padding-right: 6rem;
    }
}


.card-bottom {
    min-width: 200px;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  
    .image {
        img {
            max-width: 100%;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }
    }
  
    .content {
        padding: 20px 30px;
    }
}


.card-bottom.is-loading-bottom {
    .image,
    h2,
    p {
        background: #eee;
        background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
        border-radius: 5px;
        background-size: 200% 100%;
        animation: 1.5s shine linear infinite;
    }

    h2, p{
        margin: 5px 0;
    }
  
    .image {
        height: 100px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
  
    h2 {
        height: 15px;
    }
  
    p {
        height: 40px;
    }
}
  
@keyframes shine {
    to {
        background-position-x: -200%;
    }
}