diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 5903fb58ebb..04dd0f00ae8 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -71,6 +71,7 @@
                     <t id="sale_product_search_section_hook"/>
                     <t id="blog_latest_posts_list_hook"/>
                     <t id="blog_latest_posts_big_hook"/>
+                    <t id="blog_latest_posts_horizontal_hook"/>
                     <t id="event_local_events_hook"/>
                     <t id="snippet_google_map_hook"/>
                     <t id="mass_mailing_newsletter_block_hook"/>
diff --git a/addons/website_blog/static/src/img/s_latest_posts_horizontal.jpg b/addons/website_blog/static/src/img/s_latest_posts_horizontal.jpg
new file mode 100644
index 00000000000..1e992e61828
Binary files /dev/null and b/addons/website_blog/static/src/img/s_latest_posts_horizontal.jpg differ
diff --git a/addons/website_blog/static/src/scss/primary_variables.scss b/addons/website_blog/static/src/scss/primary_variables.scss
deleted file mode 100644
index c8b936b59f1..00000000000
--- a/addons/website_blog/static/src/scss/primary_variables.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-
-@mixin s-latest-posts-js-get-posts-hook {};
-@mixin s-latest-posts-figure-hook {};
diff --git a/addons/website_blog/static/src/snippets/s_latest_posts/000.scss b/addons/website_blog/static/src/snippets/s_latest_posts/000.scss
index 49f0b68dbc8..06a2906b447 100644
--- a/addons/website_blog/static/src/snippets/s_latest_posts/000.scss
+++ b/addons/website_blog/static/src/snippets/s_latest_posts/000.scss
@@ -55,11 +55,281 @@
             margin-bottom: 0.5em;
             word-spacing: -0.15em;
         }
-
-        @include s-latest-posts-figure-hook;
     }
 
     .js_get_posts {
-        @include s-latest-posts-js-get-posts-hook;
+        .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('beta'), 10%) 0%,darken(theme-color('beta'), 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('alpha');
+                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;
+        }
     }
 }
diff --git a/addons/website_blog/views/snippets/s_latest_posts.xml b/addons/website_blog/views/snippets/s_latest_posts.xml
index e362ee2035a..5bfd47394b1 100644
--- a/addons/website_blog/views/snippets/s_latest_posts.xml
+++ b/addons/website_blog/views/snippets/s_latest_posts.xml
@@ -22,6 +22,12 @@
     </section>
 </template>
 
+<template id="s_latest_posts_big_orizontal" name="Latest Posts Horizontal">
+        <section class="s_latest_posts_big_orizontal">
+        <div class="js_get_posts container-fluid"  data-loading="true" data-template="website_blog.s_latest_posts_big_orizontal_template"/>
+    </section>
+</template>
+
 <template id="s_latest_posts_list_template">
     <div t-foreach="posts" t-as="p" class="d-flex col-12 mt-3 s_latest_posts_post">
         <a class="s_latest_posts_post_cover flex-grow-0 flex-shrink-0 align-self-baseline position-relative" t-attf-href="/blog/#{p.blog_id.id}/post/#{p.id}" t-att-title="'Read' + p.name">
@@ -64,6 +70,23 @@
     </figure>
 </template>
 
+<template id="s_latest_posts_big_orizontal_template">
+    <t t-foreach="posts" t-as="p">
+        <figure class="post s_latest_posts_post">
+            <figcaption>
+                <h4 class="mb0"><a t-att-href="'/blog/%s/post/%s' % (p.blog_id.id, p.id)"><t t-esc="p.name"/></a></h4>
+                <h5 class="mt0 mb4" t-field="p.write_date" t-field-options='{"format": "dd/MM"}' />
+            </figcaption>
+            <a t-att-href="'/blog/%s/post/%s' % (p.blog_id.id, p.id)">
+                <t t-call="website.record_cover">
+                    <t t-set="_record" t-value="p"/>
+                    <t t-set="additionnal_classes" t-value="'loading_container thumb'"/>
+                </t>
+            </a>
+        </figure>
+    </t>
+</template>
+
 <!-- Options -->
 <template id="s_latest_posts_options" inherit_id="website.snippet_options">
     <xpath expr="//div[@data-js='background']" position="before">
@@ -88,6 +111,20 @@
                 <we-button data-select-data-attribute="10">10 posts max</we-button>
             </we-select>
         </div>
+
+        <div data-js='s_latest_posts_style' data-selector=".s_latest_posts_big_picture .js_get_posts">
+            <we-select string="List Style">
+                <we-button data-select-class="">Default</we-button>
+                <we-button data-select-class="effect-marley">Marley</we-button>
+                <we-button data-select-class="effect-dexter">Dexter</we-button>
+                <we-button data-select-class="effect-chico">Silly-Chico</we-button>
+                <we-button data-select-class="effect-steve">Lonely Steve</we-button>
+            </we-select>
+        </div>
+
+        <div data-js='s_latest_posts_options' data-selector=".s_latest_posts_big_picture .js_get_posts">
+            <we-checkbox string="First is bigger" data-select-class="first_is_big"/>
+        </div>
     </xpath>
     <xpath expr="//div[@data-js='layout_column']" position="attributes">
         <attribute name="data-exclude" add=".s_latest_posts, .s_latest_posts_big_picture" separator=","/>
diff --git a/addons/website_blog/views/snippets/snippets.xml b/addons/website_blog/views/snippets/snippets.xml
index 3775ad6c2b3..79cef9f6f08 100644
--- a/addons/website_blog/views/snippets/snippets.xml
+++ b/addons/website_blog/views/snippets/snippets.xml
@@ -8,6 +8,9 @@
     <xpath expr="//t[@id='blog_latest_posts_big_hook']" position="replace">
         <t t-snippet="website_blog.s_latest_posts_big_picture" t-thumbnail="/website_blog/static/src/img/s_latest_posts_big_picture.jpg"/>
     </xpath>
+    <xpath expr="//t[@id='blog_latest_posts_horizontal_hook']" position="replace">
+        <t t-snippet="website_blog.s_latest_posts_big_orizontal" t-thumbnail="/website_blog/static/src/img/s_latest_posts_horizontal.jpg"/>
+    </xpath>
 </template>
 
 </odoo>
diff --git a/addons/website_blog/views/website_blog_templates.xml b/addons/website_blog/views/website_blog_templates.xml
index dfe07876f64..b2321cf55a8 100644
--- a/addons/website_blog/views/website_blog_templates.xml
+++ b/addons/website_blog/views/website_blog_templates.xml
@@ -1,12 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 
-<template id="_assets_primary_variables" inherit_id="web._assets_primary_variables">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/website_blog/static/src/scss/primary_variables.scss"/>
-    </xpath>
-</template>
-
 <template id="assets_wysiwyg" inherit_id="website.assets_wysiwyg" name="Blog posts snippet options">
     <xpath expr="." position="inside">
         <script type="text/javascript" src="/website_blog/static/src/snippets/s_latest_posts/options.js"/>