.sg_related_posts{
    margin-top: 1rem;

    .sg_related_posts_title{
        margin-right: 8px;
        margin-bottom: 8px;
    }

    ul.sg_related_posts_list{
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        margin: 0;
        padding: 0;
        line-height: 1.2;
        
        li{
            display: block;
            width: calc(100% - 16px);
            margin: 0 8px 8px;
            border-radius: 16px;;
            overflow: hidden;
            @media (min-width: 768px) {
                width: calc(50% - 16px);
            }
            @media (min-width: 992px) {
                width: calc(33% - 16px);
            }
            @media (min-width: 1200px) {
                width: calc(25% - 16px);
            }

            a{
                display: block;
                position: relative;
                img{
                    display: block;
                    width: 100%;
                    height: 180px;
                    object-fit: cover;
                }
                span{
                    display: block;
                    text-align: center;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    padding: 8px;
                    background: rgba(0,0,0,.4);
                    color: #FFF;
                }
            }
        }
    }
}