.s_latest_posts[data-vcss='001'] {
    .s_latest_posts_loader {
        @include o-position-absolute(0, 0, 0, 0);
        transform: translateZ(1px);

        > div {
            animation: o-wblog-loader 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
            max: {width: 30px; height: 30px;}
        }
    }

    .s_latest_posts_post_title  {
        font-weight: $headings-font-weight;
        // Tweek line-height to help fit multi-line titles.
        line-height: 1;
    }

    .s_latest_posts_post_subtitle {
        font-size: 1em;
    }

    // The two following rules prevent having an empty spot on medium breakpoint
    // for non-list layouts (lg:3x1, md:2x2, sm: 1x3) list is always 1x3.
    .s_latest_posts_post:nth-child(4) {
        display: none !important;
    }
    @include media-breakpoint-only(md) {
        :not(.s_latest_posts_list) > .s_latest_posts_post:nth-child(4) {
            display: block !important;
        }
    }

    .s_latest_posts_list {
        // Set sizes relative to the container font-size.
        // (handle parents with, for example, '.small' or '.h1' classes)
        .s_latest_posts_post_cover {
            @include size(3.5em);
            max: {width: 85px; height: 85px}
        }

        .s_latest_posts_post_title  {
            font-size: 1.25em;
        }
    }

    .s_latest_posts_big_picture {
        .s_latest_posts_post {
            min-height: 150px;

            figcaption {
                position: relative;
                justify-content: center;
            }

            .s_latest_posts_post_cover {
                min-height: 100%;

                .o_record_cover_container {
                    top: 0;
                }
            }

            .s_latest_posts_post_title  {
                @include font-size($h3-font-size);
                margin-bottom: 0.5em;
            }
        }

        &.js_get_posts {
            .s_latest_posts_post_subtitle {
                margin: 0;
            }

            &.s_latest_posts_effect_marley {
                figcaption {
                    text-align: right;
                    .s_latest_posts_post_title, .s_latest_posts_post_subtitle {
                        padding: 10px 0;
                    }
                    .s_latest_posts_post_subtitle {
                        bottom: 30px;
                        line-height: 1.5;
                        transform: translate3d(0,100%,0);
                        opacity: 0;
                        transition: opacity 0.35s, transform 0.35s;
                    }
                    .s_latest_posts_post_title {
                        top: 30px;
                        transition: transform 0.35s;
                        transform: translate3d(0,20px,0);
                        &:after {
                            @include o-position-absolute(100%, auto, auto, 0);
                            width: 100%;
                            height: 2px;
                            background: #fff;
                            content: "";
                            transform: translate3d(0,40px,0);
                            opacity: 0;
                            transition: opacity 0.35s, transform 0.35s;
                        }
                    }
                }
                .s_latest_posts_post:hover figcaption {
                    .s_latest_posts_post_title {
                        transform: translate3d(0,0,0);
                    }
                    .s_latest_posts_post_title::after, .s_latest_posts_post_subtitle {
                        opacity: 1;
                        transform: translate3d(0,0,0);
                    }
                }
            }
            &.s_latest_posts_effect_dexter .s_latest_posts_post {
                .o_record_cover_container {
                    transition: opacity 0.35s;
                }
                figcaption {
                    &::before {
                        content: "";
                        @include o-position-absolute(0, 0, 0, 0);
                        background: linear-gradient(to bottom, darken(theme-color('secondary'), 10%) 0%, darken(theme-color('secondary'), 30%) 100%);
                        z-index: -1;
                    }
                    padding: 3em;
                    text-align: left;
                    &:after {
                        @include o-position-absolute(10px, 10px, 10px, 10px);
                        border: 2px solid #fff;
                        border-top-width: 4px;
                        border-bottom-width: 4px;
                        content: "";
                        transition: transform-origin 0.35s;
                        transform: scaleY(0.5);
                        transform-origin: top;
                    }
                }
                .s_latest_posts_post_subtitle {
                    @include o-position-absolute(auto, 20px, 20px, 20px);
                    opacity: 0;
                    transition: opacity 0.35s linear, transform 0.35s;
                    transform: translate3d(0,-100px,0);
                }
                .s_latest_posts_post_title {
                    @include o-position-absolute(20px, 20px, auto, 20px);
                }
                &:hover {
                    .o_record_cover_container {
                        opacity: 0.4 !important;
                    }
                    figcaption::after {
                        transform-origin: bottom;
                    }
                    .s_latest_posts_post_subtitle {
                        opacity: 1;
                        transform: translate3d(0, 0, 0);
                    }
                }
            }
            &.s_latest_posts_effect_chico {
                .o_record_cover_image {
                    transition: opacity 0.35s, transform 0.35s;
                    transform: scale(1.12);
                }
                .s_latest_posts_post figcaption {
                    &::before {
                        @include o-position-absolute(15px,15px,15px,15px);
                        border: 1px solid #fff;
                        content: "";
                        transform: scale(1.1);
                        opacity: 0;
                        transition: opacity 0.35s, transform 0.35s;
                    }
                }
                .s_latest_posts_post_subtitle {
                    opacity: 0;
                    transition: opacity 0.35s, transform 0.35s;
                    margin-left: auto;
                    margin-right: auto;
                    max-width: 200px;
                    transform: scale(1.5);
                }
                .s_latest_posts_post_title {
                    padding: 0;
                }
                .s_latest_posts_post:hover {
                    .o_record_cover_image {
                        transform: scale(1);
                    }
                    figcaption::before, .s_latest_posts_post_subtitle {
                        opacity: 1;
                        transform: scale(1);
                    }
                }
            }
        }
    }

    .s_latest_posts_horizontal {
        .o_record_cover_container {
            width: auto;
            height: auto;
            padding: 0;
        }

        &.js_get_posts {
            position: relative;
            overflow: visible;
            text-align: left;
            .s_latest_posts_post {
                position: relative;
                figcaption:after {
                    position: relative;
                    width: 100%;
                    height: 150px;
                    content: "";
                    display: block;
                }
                h4 {
                    position: relative;
                    text-align: left;
                    padding-right: 5%;
                    &:before {
                        content: "";
                        z-index: 0;
                        display: inline;
                        float: left;
                        width: 20%;
                        position: absolute;
                        top: 49%;
                        left: 0;
                        border-bottom: 1px solid $body-color;
                    }
                    a {
                        z-index: 1;
                        display: block;
                        line-height: 1;
                        padding-left: 25%;
                        position: relative;
                    }
                }
                h5 {
                    padding-left: 24%;
                }
                > a {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    display: block;
                    background: theme-color('primary');
                    width: 100%;
                    height: 150px;
                    overflow: hidden;
                    > div {
                        height: 100%;
                        width: 100%;
                        background-size: cover;
                        background-position: center;
                        opacity: 1;
                        transform-origin: 50%;
                        transition: all 400ms;
                        backface-visibility: hidden;
                        &:hover {
                            opacity: 0.8;
                            transform: scale(1.1);
                        }
                    }
                }
                @media only screen and (max-width : 480px) { // FIXME
                    width: 100%;
                }
            }
            @include media-breakpoint-down(sm) {
                display: block;
            }
        }
    }

    .s_latest_posts_card {
        .card {
            height: 100%;
            box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.17);

            .s_latest_posts_post_cover {
                height: 170px;

                .o_record_cover_container {
                    background-color: transparent !important;

                    .o_record_cover_image {
                        @extend .card-img-top;
                    }
                }
            }

            a:hover {
                text-decoration: none;
            }

            h4 {
                font-size: 19px;
                font-weight: 600;
            }

            .card-footer {
                background-color: transparent;
                border-top: 2px solid rgba(0, 0, 0, 0.06);

                .text-muted {
                    color: rgba(52, 58, 64, 0.4) !important;
                }
            }
        }
    }
}