.s_latest_posts:not([data-vcss]), .s_latest_posts_big_picture:not([data-vcss]) {
    .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;
    }
}

.s_latest_posts:not([data-vcss]) {
    // 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;
            word-spacing: -0.15em;
        }
    }

    .js_get_posts {
        .s_latest_posts_post > div:not(.o_record_cover_container):not(.js-loading) p {
            margin: 0;
        }

        &.effect-dexter .s_latest_posts_post {
            &::before {
                content: "";
                @include o-position-absolute(0, $grid-gutter-width/2, 0, $grid-gutter-width/2);
                background: linear-gradient(to bottom, darken(theme-color('secondary'), 10%) 0%,darken(theme-color('secondary'), 30%) 100%);
            }
            .thumb {
                transition: opacity 0.35s;
            }
            > div:not(.o_record_cover_container):not(.js-loading) {
                padding: 3em;
                text-align: left;
                &:after {
                    @include o-position-absolute(auto, 2em, 2em, 2em);
                    height: calc(50% - 2em);
                    border: 2px solid #fff;
                    content: "";
                    transition: transform 0.35s;
                    transform: translate3d(0, -100%, 0);
                }
            }
            p {
                @include o-position-absolute(auto, 60px, 60px, 60px);
                opacity: 0;
                transition: e(  "opacity 0.35s linear 0s, transform 0.35s linear 0s");
                -webkit-transform: translate3d(0,-100px,0);
                transform: translate3d(0,-100px,0);
            }
            &:hover {
                .thumb {
                    opacity: 0.4!important;
                }
                > div:not(.o_record_cover_container):not(.js-loading)::after {
                    transform: translate3d(0, 0, 0);
                }
                p {
                    opacity: 1;
                    transform: translate3d(0, 0, 0);
                }
            }
        }
        &.effect-chico {
            .o_record_cover_image {
                transition: opacity 0.35s, transform 0.35s;
                transform: scale(1.12);
            }
            .s_latest_posts_post > div:not(.o_record_cover_container):not(.js-loading) {
                padding: 3em;
                &::before {
                    @include o-position-absolute(7%, 7%, 7%, 7%);
                    border: 1px solid #fff;
                    content: "";
                    transform: scale(1.1);
                    opacity: 0;
                    transition: opacity 0.35s, transform 0.35s;
                }
            }
            p {
                opacity: 0;
                transition: opacity 0.35s, transform 0.35s;
                margin: 10% auto 0 !important;
                max-width: 200px;
                transform: scale(1.5);
            }
            h2 {
                padding: 0;
            }
            .s_latest_posts_post:hover {
                .o_record_cover_image {
                    transform: scale(1);
                }
                > div:not(.o_record_cover_container):not(.js-loading)::before, p {
                    opacity: 1;
                    transform: scale(1);
                }
            }
        }
        &.effect-marley {
            .s_latest_posts_post > div:not(.o_record_cover_container):not(.js-loading) {
                text-align: right;
                h2, p {
                    @include o-position-absolute(auto, 30px, auto, 30px);
                    padding: 10px 0;
                }
                p {
                    bottom: 30px;
                    line-height: 1.5;
                    -webkit-transform: translate3d(0,100%,0);
                    transform: translate3d(0,100%,0);
                    opacity: 0;
                    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
                    transition: opacity 0.35s, transform 0.35s;
                }
                h2 {
                    top: 30px;
                    -webkit-transition: -webkit-transform 0.35s;
                    transition: transform 0.35s;
                    -webkit-transform: translate3d(0,20px,0);
                    transform: translate3d(0,20px,0);
                    &:after {
                        @include o-position-absolute(100%, auto, auto, 0);
                        width: 100%;
                        height: 4px;
                        background: #fff;
                        content: "";
                        -webkit-transform: translate3d(0,40px,0);
                        transform: translate3d(0,40px,0);
                        opacity: 0;
                        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
                        transition: opacity 0.35s, transform 0.35s;
                    }
                }
            }
            .s_latest_posts_post:hover > div:not(.o_record_cover_container):not(.js-loading) {
                h2 {
                    -webkit-transform: translate3d(0,0,0);
                    transform: translate3d(0,0,0);
                }
                h2::after, p {
                    opacity: 1;
                    -webkit-transform: translate3d(0,0,0);
                    transform: translate3d(0,0,0);
                }
            }
        }
        &.effect-steve .s_latest_posts_post {
            z-index: auto;
            &::before {
                content: "";
                @include o-position-absolute(0, $grid-gutter-width/2, 0, $grid-gutter-width/2);
                background: #000;
            }
            > div:not(.o_record_cover_container):not(.js-loading) {
                z-index: 1;
            }
            .thumb {
                opacity: 1;
                transition: transform 0.35s;
                transform: perspective(1000px) translate3d(0,0,0);
            }
            h2, p {
                background: #fff;
                color: #2d434e;
            }
            h2 {
                position: relative;
                margin-top: 0.1em;
                padding: 0.25em;
                &:before {
                    box-shadow: 0 1px 10px rgba(0,0,0,0.5);
                }
            }
            p {
                margin-top: 1em !important;
                padding: 0.5em;
                font-weight: 800;
                opacity: 0;
                transition: opacity 0.35s, transform 0.35s;
                transform: scale3d(0.9,0.9,1);
            }
            &:hover {
                h2:before {
                    opacity: 0;
                }
                .thumb {
                    transform: perspective(1000px) translate3d(0,0,21px);
                }
                p {
                    opacity: 1;
                    transform: scale3d(1,1,1);
                }
            }
        }

        &.first_is_big .s_latest_posts_post:first-child {
            flex: 0 0 100%;
            max-width: 100%;
        }
    }
}

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

    .js_get_posts {
        position: relative;
        width: 100%;
        display: flex;
        padding: 0;
        margin: 0;
        overflow: visible;
        text-align: left;
        .s_latest_posts_post {
            //display: table-cell;
            flex-grow: 1;
            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 {
                bottom: 0;
                display: block;
                background: theme-color('primary');
                width: 100%;
                height: 150px;
                position: absolute;
                overflow: hidden;
                > div {
                    height: 100%;
                    width: 100%;
                    background-size: cover;
                    background-position: center;
                    opacity: 1;
                    transform: scale(1);
                    transform-origin: 50%;
                    transition: all 400ms;
                    backface-visibility: hidden;
                    &:hover {
                        opacity: 0.8;
                        transform: scale(1.1);
                    }
                }
            }
            @include media-breakpoint-down(sm) {
                display: inline-block;
                margin-bottom: 2em;
                width: 50%;
            }
            @media only screen and (max-width : 480px) { // FIXME
                width: 100%;
            }
        }
        @include media-breakpoint-down(sm) {
            display: block;
        }
    }
}