From b0a9279f5fff94b5d4034c4ea96dce2af0d19d21 Mon Sep 17 00:00:00 2001
From: "davyd.burianuvatyi@ua.nestle.com" <venia7vedmak@gmail.com>
Date: Wed, 10 May 2023 15:22:10 +0300
Subject: [PATCH]  Create Cards variations

---
 assets/css/lb-cards-chevron.css               | 116 +++++++++++
 assets/css/lb-cards-color.css                 |  93 +++++++++
 assets/css/lb-cards-overlay.css               | 116 +++++++++++
 assets/css/lb-cards.css                       | 136 ++++++-------
 assets/scss/lb-cards-chevron.scss             | 182 ++++++++++++++++++
 assets/scss/lb-cards-color.scss               | 148 ++++++++++++++
 assets/scss/lb-cards-overlay.scss             | 178 +++++++++++++++++
 assets/scss/lb-cards.scss                     | 164 ++++++++++------
 lb_cards.libraries.yml                        |  23 ++-
 lb_cards.module                               |  14 +-
 lb_cards.ws_style.yml                         |   7 +
 lb_cards.ws_style_option.yml                  |  26 +++
 package.json                                  |   2 +-
 ...ock--lb-cards--variation-chevron.html.twig | 129 +++++++++++++
 ...block--lb-cards--variation-color.html.twig | 124 ++++++++++++
 ...ock--lb-cards--variation-overlay.html.twig | 124 ++++++++++++
 templates/block--lb-cards.html.twig           |  15 +-
 templates/chevron.html.twig                   |  10 +
 18 files changed, 1467 insertions(+), 140 deletions(-)
 create mode 100644 assets/css/lb-cards-chevron.css
 create mode 100644 assets/css/lb-cards-color.css
 create mode 100644 assets/css/lb-cards-overlay.css
 create mode 100644 assets/scss/lb-cards-chevron.scss
 create mode 100644 assets/scss/lb-cards-color.scss
 create mode 100644 assets/scss/lb-cards-overlay.scss
 create mode 100644 lb_cards.ws_style.yml
 create mode 100644 lb_cards.ws_style_option.yml
 create mode 100644 templates/block--lb-cards--variation-chevron.html.twig
 create mode 100644 templates/block--lb-cards--variation-color.html.twig
 create mode 100644 templates/block--lb-cards--variation-overlay.html.twig
 create mode 100644 templates/chevron.html.twig

diff --git a/assets/css/lb-cards-chevron.css b/assets/css/lb-cards-chevron.css
new file mode 100644
index 0000000..28cbc83
--- /dev/null
+++ b/assets/css/lb-cards-chevron.css
@@ -0,0 +1,116 @@
+:root {
+  --ylb-color-btn-grey: #636466; }
+
+.block-lb-cards-chevron .section-description {
+  color: var(--ylb-color-dark-grey);
+  margin-bottom: 50px; }
+  .block-lb-cards-chevron .section-description h2 {
+    font-size: 50px;
+    line-height: 65px; }
+  .block-lb-cards-chevron .section-description p {
+    font-size: 24px;
+    line-height: 36px; }
+
+.block-lb-cards-chevron .btn {
+  border-radius: 8px;
+  font-size: 24px;
+  line-height: 30px;
+  border: none;
+  background-color: var(--wsPartnerColor, var(--ylb-color-btn-grey));
+  color: var(--ylb-color-white);
+  padding: 9px 20px; }
+  .block-lb-cards-chevron .btn:hover {
+    background-color: var(--ylb-color-grey);
+    border-color: var(--ylb-color-grey); }
+
+.block-lb-cards-chevron .row-cards .card {
+  border-radius: 10px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
+  border: none;
+  color: var(--ylb-color-dark-grey);
+  overflow: hidden; }
+  .block-lb-cards-chevron .row-cards .card h3 {
+    font-size: 32px;
+    line-height: 32px; }
+  .block-lb-cards-chevron .row-cards .card .card-img-wrapper {
+    position: relative; }
+    .block-lb-cards-chevron .row-cards .card .card-img-wrapper .chevron {
+      height: 100%;
+      width: 100%;
+      top: 0;
+      transform: scale(1.01);
+      left: -25%;
+      position: absolute; }
+      .block-lb-cards-chevron .row-cards .card .card-img-wrapper .chevron svg {
+        height: 100%;
+        width: 100%; }
+    .block-lb-cards-chevron .row-cards .card .card-img-wrapper .img-container {
+      padding: 15px;
+      position: relative;
+      height: 100%; }
+      @media (min-width: 400px) {
+        .block-lb-cards-chevron .row-cards .card .card-img-wrapper .img-container {
+          padding: 20px; } }
+    .block-lb-cards-chevron .row-cards .card .card-img-wrapper img {
+      min-height: 170px;
+      border-radius: 10px;
+      height: 100%;
+      width: 100%;
+      -o-object-fit: cover;
+         object-fit: cover; }
+  .block-lb-cards-chevron .row-cards .card .card-content {
+    gap: 25px;
+    padding: 20px; }
+    .block-lb-cards-chevron .row-cards .card .card-content .card-header {
+      border: none;
+      padding: 0;
+      background-color: transparent; }
+      .block-lb-cards-chevron .row-cards .card .card-content .card-header .category-tag {
+        font-family: Verdana, Geneva, sans-serif;
+        font-size: 14px;
+        line-height: 20px;
+        text-transform: uppercase;
+        min-height: 17px;
+        padding: 2px 4px;
+        border-radius: 5px;
+        color: var(--ylb-color-dark-grey);
+        width: -moz-fit-content;
+        width: fit-content; }
+    .block-lb-cards-chevron .row-cards .card .card-content .card-body .card-heading {
+      margin-bottom: 25px;
+      color: #231F20; }
+    .block-lb-cards-chevron .row-cards .card .card-content .card-text {
+      font-size: 18px;
+      line-height: 28px; }
+
+@media (min-width: 992px) {
+  .block-lb-cards-chevron .row-cards.row-cols-lg-1 .card {
+    flex-direction: row;
+    height: 390px; }
+    .block-lb-cards-chevron .row-cards.row-cols-lg-1 .card .card-content {
+      flex: 1; }
+      .block-lb-cards-chevron .row-cards.row-cols-lg-1 .card .card-content .card-body {
+        flex: unset; }
+    .block-lb-cards-chevron .row-cards.row-cols-lg-1 .card .card-img-wrapper {
+      height: unset;
+      width: 49%; }
+      .block-lb-cards-chevron .row-cards.row-cols-lg-1 .card .card-img-wrapper img {
+        width: 100%; } }
+
+@media (min-width: 1200px) {
+  .block-lb-cards-chevron .row-cards.row-cols-lg-1 .card .card-content {
+    padding: 40px 35px 40px 40px; } }
+
+@media (min-width: 1060px) {
+  .block-lb-cards-chevron .row-cards.row-cols-lg-2 .card .card-img-wrapper {
+    height: 400px; }
+  .block-lb-cards-chevron .row-cards.row-cols-lg-3 .card .card-img-wrapper {
+    height: 270px; }
+    .block-lb-cards-chevron .row-cards.row-cols-lg-3 .card .card-img-wrapper .chevron {
+      left: -15%; }
+  .block-lb-cards-chevron .row-cards.row-cols-lg-4 .card .card-img-wrapper {
+    height: 200px; }
+    .block-lb-cards-chevron .row-cards.row-cols-lg-4 .card .card-img-wrapper .img-container {
+      padding: 15px; } }
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxiLWNhcmRzLWNoZXZyb24uY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsNkJBQTZCLEVBQUU7O0FBRWpDO0VBQ0UsaUNBQWlDO0VBQ2pDLG1CQUFtQixFQUFFO0VBQ3JCO0lBQ0UsZUFBZTtJQUNmLGlCQUFpQixFQUFFO0VBQ3JCO0lBQ0UsZUFBZTtJQUNmLGlCQUFpQixFQUFFOztBQUV2QjtFQUNFLGtCQUFrQjtFQUNsQixlQUFlO0VBQ2YsaUJBQWlCO0VBQ2pCLFlBQVk7RUFDWixrRUFBa0U7RUFDbEUsNkJBQTZCO0VBQzdCLGlCQUFpQixFQUFFO0VBQ25CO0lBQ0UsdUNBQXVDO0lBQ3ZDLG1DQUFtQyxFQUFFOztBQUV6QztFQUNFLG1CQUFtQjtFQUNuQiwwQ0FBMEM7RUFDMUMsWUFBWTtFQUNaLGlDQUFpQztFQUNqQyxnQkFBZ0IsRUFBRTtFQUNsQjtJQUNFLGVBQWU7SUFDZixpQkFBaUIsRUFBRTtFQUNyQjtJQUNFLGtCQUFrQixFQUFFO0lBQ3BCO01BQ0UsWUFBWTtNQUNaLFdBQVc7TUFDWCxNQUFNO01BQ04sc0JBQXNCO01BQ3RCLFVBQVU7TUFDVixrQkFBa0IsRUFBRTtNQUNwQjtRQUNFLFlBQVk7UUFDWixXQUFXLEVBQUU7SUFDakI7TUFDRSxhQUFhO01BQ2Isa0JBQWtCO01BQ2xCLFlBQVksRUFBRTtNQUNkO1FBQ0U7VUFDRSxhQUFhLEVBQUUsRUFBRTtJQUN2QjtNQUNFLGlCQUFpQjtNQUNqQixtQkFBbUI7TUFDbkIsWUFBWTtNQUNaLFdBQVc7TUFDWCxvQkFBaUI7U0FBakIsaUJBQWlCLEVBQUU7RUFDdkI7SUFDRSxTQUFTO0lBQ1QsYUFBYSxFQUFFO0lBQ2Y7TUFDRSxZQUFZO01BQ1osVUFBVTtNQUNWLDZCQUE2QixFQUFFO01BQy9CO1FBQ0Usd0NBQXdDO1FBQ3hDLGVBQWU7UUFDZixpQkFBaUI7UUFDakIseUJBQXlCO1FBQ3pCLGdCQUFnQjtRQUNoQixnQkFBZ0I7UUFDaEIsa0JBQWtCO1FBQ2xCLGlDQUFpQztRQUNqQyx1QkFBa0I7UUFBbEIsa0JBQWtCLEVBQUU7SUFDeEI7TUFDRSxtQkFBbUI7TUFDbkIsY0FBYyxFQUFFO0lBQ2xCO01BQ0UsZUFBZTtNQUNmLGlCQUFpQixFQUFFOztBQUV6QjtFQUNFO0lBQ0UsbUJBQW1CO0lBQ25CLGFBQWEsRUFBRTtJQUNmO01BQ0UsT0FBTyxFQUFFO01BQ1Q7UUFDRSxXQUFXLEVBQUU7SUFDakI7TUFDRSxhQUFhO01BQ2IsVUFBVSxFQUFFO01BQ1o7UUFDRSxXQUFXLEVBQUUsRUFBRTs7QUFFdkI7RUFDRTtJQUNFLDRCQUE0QixFQUFFLEVBQUU7O0FBRXBDO0VBQ0U7SUFDRSxhQUFhLEVBQUU7RUFDakI7SUFDRSxhQUFhLEVBQUU7SUFDZjtNQUNFLFVBQVUsRUFBRTtFQUNoQjtJQUNFLGFBQWEsRUFBRTtJQUNmO01BQ0UsYUFBYSxFQUFFLEVBQUUiLCJmaWxlIjoibGItY2FyZHMtY2hldnJvbi5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyI6cm9vdCB7XG4gIC0teWxiLWNvbG9yLWJ0bi1ncmV5OiAjNjM2NDY2OyB9XG5cbi5ibG9jay1sYi1jYXJkcy1jaGV2cm9uIC5zZWN0aW9uLWRlc2NyaXB0aW9uIHtcbiAgY29sb3I6IHZhcigtLXlsYi1jb2xvci1kYXJrLWdyZXkpO1xuICBtYXJnaW4tYm90dG9tOiA1MHB4OyB9XG4gIC5ibG9jay1sYi1jYXJkcy1jaGV2cm9uIC5zZWN0aW9uLWRlc2NyaXB0aW9uIGgyIHtcbiAgICBmb250LXNpemU6IDUwcHg7XG4gICAgbGluZS1oZWlnaHQ6IDY1cHg7IH1cbiAgLmJsb2NrLWxiLWNhcmRzLWNoZXZyb24gLnNlY3Rpb24tZGVzY3JpcHRpb24gcCB7XG4gICAgZm9udC1zaXplOiAyNHB4O1xuICAgIGxpbmUtaGVpZ2h0OiAzNnB4OyB9XG5cbi5ibG9jay1sYi1jYXJkcy1jaGV2cm9uIC5idG4ge1xuICBib3JkZXItcmFkaXVzOiA4cHg7XG4gIGZvbnQtc2l6ZTogMjRweDtcbiAgbGluZS1oZWlnaHQ6IDMwcHg7XG4gIGJvcmRlcjogbm9uZTtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0td3NQYXJ0bmVyQ29sb3IsIHZhcigtLXlsYi1jb2xvci1idG4tZ3JleSkpO1xuICBjb2xvcjogdmFyKC0teWxiLWNvbG9yLXdoaXRlKTtcbiAgcGFkZGluZzogOXB4IDIwcHg7IH1cbiAgLmJsb2NrLWxiLWNhcmRzLWNoZXZyb24gLmJ0bjpob3ZlciB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0teWxiLWNvbG9yLWdyZXkpO1xuICAgIGJvcmRlci1jb2xvcjogdmFyKC0teWxiLWNvbG9yLWdyZXkpOyB9XG5cbi5ibG9jay1sYi1jYXJkcy1jaGV2cm9uIC5yb3ctY2FyZHMgLmNhcmQge1xuICBib3JkZXItcmFkaXVzOiAxMHB4O1xuICBib3gtc2hhZG93OiAwIDAgMTBweCAwIHJnYmEoMCwgMCwgMCwgMC4xNSk7XG4gIGJvcmRlcjogbm9uZTtcbiAgY29sb3I6IHZhcigtLXlsYi1jb2xvci1kYXJrLWdyZXkpO1xuICBvdmVyZmxvdzogaGlkZGVuOyB9XG4gIC5ibG9jay1sYi1jYXJkcy1jaGV2cm9uIC5yb3ctY2FyZHMgLmNhcmQgaDMge1xuICAgIGZvbnQtc2l6ZTogMzJweDtcbiAgICBsaW5lLWhlaWdodDogMzJweDsgfVxuICAuYmxvY2stbGItY2FyZHMtY2hldnJvbiAucm93LWNhcmRzIC5jYXJkIC5jYXJkLWltZy13cmFwcGVyIHtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7IH1cbiAgICAuYmxvY2stbGItY2FyZHMtY2hldnJvbiAucm93LWNhcmRzIC5jYXJkIC5jYXJkLWltZy13cmFwcGVyIC5jaGV2cm9uIHtcbiAgICAgIGhlaWdodDogMTAwJTtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgdG9wOiAwO1xuICAgICAgdHJhbnNmb3JtOiBzY2FsZSgxLjAxKTtcbiAgICAgIGxlZnQ6IC0yNSU7XG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7IH1cbiAgICAgIC5ibG9jay1sYi1jYXJkcy1jaGV2cm9uIC5yb3ctY2FyZHMgLmNhcmQgLmNhcmQtaW1nLXdyYXBwZXIgLmNoZXZyb24gc3ZnIHtcbiAgICAgICAgaGVpZ2h0OiAxMDAlO1xuICAgICAgICB3aWR0aDogMTAwJTsgfVxuICAgIC5ibG9jay1sYi1jYXJkcy1jaGV2cm9uIC5yb3ctY2FyZHMgLmNhcmQgLmNhcmQtaW1nLXdyYXBwZXIgLmltZy1jb250YWluZXIge1xuICAgICAgcGFkZGluZzogMTVweDtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIGhlaWdodDogMTAwJTsgfVxuICAgICAgQG1lZGlhIChtaW4td2lkdGg6IDQwMHB4KSB7XG4gICAgICAgIC5ibG9jay1sYi1jYXJkcy1jaGV2cm9uIC5yb3ctY2FyZHMgLmNhcmQgLmNhcmQtaW1nLXdyYXBwZXIgLmltZy1jb250YWluZXIge1xuICAgICAgICAgIHBhZGRpbmc6IDIwcHg7IH0gfVxuICAgIC5ibG9jay1sYi1jYXJkcy1jaGV2cm9uIC5yb3ctY2FyZHMgLmNhcmQgLmNhcmQtaW1nLXdyYXBwZXIgaW1nIHtcbiAgICAgIG1pbi1oZWlnaHQ6IDE3MHB4O1xuICAgICAgYm9yZGVyLXJhZGl1czogMTBweDtcbiAgICAgIGhlaWdodDogMTAwJTtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgb2JqZWN0LWZpdDogY292ZXI7IH1cbiAgLmJsb2NrLWxiLWNhcmRzLWNoZXZyb24gLnJvdy1jYXJkcyAuY2FyZCAuY2FyZC1jb250ZW50IHtcbiAgICBnYXA6IDI1cHg7XG4gICAgcGFkZGluZzogMjBweDsgfVxuICAgIC5ibG9jay1sYi1jYXJkcy1jaGV2cm9uIC5yb3ctY2FyZHMgLmNhcmQgLmNhcmQtY29udGVudCAuY2FyZC1oZWFkZXIge1xuICAgICAgYm9yZGVyOiBub25lO1xuICAgICAgcGFkZGluZzogMDtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50OyB9XG4gICAgICAuYmxvY2stbGItY2FyZHMtY2hldnJvbiAucm93LWNhcmRzIC5jYXJkIC5jYXJkLWNvbnRlbnQgLmNhcmQtaGVhZGVyIC5jYXRlZ29yeS10YWcge1xuICAgICAgICBmb250LWZhbWlseTogVmVyZGFuYSwgR2VuZXZhLCBzYW5zLXNlcmlmO1xuICAgICAgICBmb250LXNpemU6IDE0cHg7XG4gICAgICAgIGxpbmUtaGVpZ2h0OiAyMHB4O1xuICAgICAgICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICAgICAgICBtaW4taGVpZ2h0OiAxN3B4O1xuICAgICAgICBwYWRkaW5nOiAycHggNHB4O1xuICAgICAgICBib3JkZXItcmFkaXVzOiA1cHg7XG4gICAgICAgIGNvbG9yOiB2YXIoLS15bGItY29sb3ItZGFyay1ncmV5KTtcbiAgICAgICAgd2lkdGg6IGZpdC1jb250ZW50OyB9XG4gICAgLmJsb2NrLWxiLWNhcmRzLWNoZXZyb24gLnJvdy1jYXJkcyAuY2FyZCAuY2FyZC1jb250ZW50IC5jYXJkLWJvZHkgLmNhcmQtaGVhZGluZyB7XG4gICAgICBtYXJnaW4tYm90dG9tOiAyNXB4O1xuICAgICAgY29sb3I6ICMyMzFGMjA7IH1cbiAgICAuYmxvY2stbGItY2FyZHMtY2hldnJvbiAucm93LWNhcmRzIC5jYXJkIC5jYXJkLWNvbnRlbnQgLmNhcmQtdGV4dCB7XG4gICAgICBmb250LXNpemU6IDE4cHg7XG4gICAgICBsaW5lLWhlaWdodDogMjhweDsgfVxuXG5AbWVkaWEgKG1pbi13aWR0aDogOTkycHgpIHtcbiAgLmJsb2NrLWxiLWNhcmRzLWNoZXZyb24gLnJvdy1jYXJkcy5yb3ctY29scy1sZy0xIC5jYXJkIHtcbiAgICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICAgIGhlaWdodDogMzkwcHg7IH1cbiAgICAuYmxvY2stbGItY2FyZHMtY2hldnJvbiAucm93LWNhcmRzLnJvdy1jb2xzLWxnLTEgLmNhcmQgLmNhcmQtY29udGVudCB7XG4gICAgICBmbGV4OiAxOyB9XG4gICAgICAuYmxvY2stbGItY2FyZHMtY2hldnJvbiAucm93LWNhcmRzLnJvdy1jb2xzLWxnLTEgLmNhcmQgLmNhcmQtY29udGVudCAuY2FyZC1ib2R5IHtcbiAgICAgICAgZmxleDogdW5zZXQ7IH1cbiAgICAuYmxvY2stbGItY2FyZHMtY2hldnJvbiAucm93LWNhcmRzLnJvdy1jb2xzLWxnLTEgLmNhcmQgLmNhcmQtaW1nLXdyYXBwZXIge1xuICAgICAgaGVpZ2h0OiB1bnNldDtcbiAgICAgIHdpZHRoOiA0OSU7IH1cbiAgICAgIC5ibG9jay1sYi1jYXJkcy1jaGV2cm9uIC5yb3ctY2FyZHMucm93LWNvbHMtbGctMSAuY2FyZCAuY2FyZC1pbWctd3JhcHBlciBpbWcge1xuICAgICAgICB3aWR0aDogMTAwJTsgfSB9XG5cbkBtZWRpYSAobWluLXdpZHRoOiAxMjAwcHgpIHtcbiAgLmJsb2NrLWxiLWNhcmRzLWNoZXZyb24gLnJvdy1jYXJkcy5yb3ctY29scy1sZy0xIC5jYXJkIC5jYXJkLWNvbnRlbnQge1xuICAgIHBhZGRpbmc6IDQwcHggMzVweCA0MHB4IDQwcHg7IH0gfVxuXG5AbWVkaWEgKG1pbi13aWR0aDogMTA2MHB4KSB7XG4gIC5ibG9jay1sYi1jYXJkcy1jaGV2cm9uIC5yb3ctY2FyZHMucm93LWNvbHMtbGctMiAuY2FyZCAuY2FyZC1pbWctd3JhcHBlciB7XG4gICAgaGVpZ2h0OiA0MDBweDsgfVxuICAuYmxvY2stbGItY2FyZHMtY2hldnJvbiAucm93LWNhcmRzLnJvdy1jb2xzLWxnLTMgLmNhcmQgLmNhcmQtaW1nLXdyYXBwZXIge1xuICAgIGhlaWdodDogMjcwcHg7IH1cbiAgICAuYmxvY2stbGItY2FyZHMtY2hldnJvbiAucm93LWNhcmRzLnJvdy1jb2xzLWxnLTMgLmNhcmQgLmNhcmQtaW1nLXdyYXBwZXIgLmNoZXZyb24ge1xuICAgICAgbGVmdDogLTE1JTsgfVxuICAuYmxvY2stbGItY2FyZHMtY2hldnJvbiAucm93LWNhcmRzLnJvdy1jb2xzLWxnLTQgLmNhcmQgLmNhcmQtaW1nLXdyYXBwZXIge1xuICAgIGhlaWdodDogMjAwcHg7IH1cbiAgICAuYmxvY2stbGItY2FyZHMtY2hldnJvbiAucm93LWNhcmRzLnJvdy1jb2xzLWxnLTQgLmNhcmQgLmNhcmQtaW1nLXdyYXBwZXIgLmltZy1jb250YWluZXIge1xuICAgICAgcGFkZGluZzogMTVweDsgfSB9XG4iXX0= */
\ No newline at end of file
diff --git a/assets/css/lb-cards-color.css b/assets/css/lb-cards-color.css
new file mode 100644
index 0000000..eeca40e
--- /dev/null
+++ b/assets/css/lb-cards-color.css
@@ -0,0 +1,93 @@
+:root {
+  --ylb-color-btn-grey: #636466; }
+
+.block-lb-cards-color .section-description {
+  color: var(--ylb-color-dark-grey);
+  margin-bottom: 50px; }
+  .block-lb-cards-color .section-description h2 {
+    font-size: 50px;
+    line-height: 65px; }
+  .block-lb-cards-color .section-description p {
+    font-size: 24px;
+    line-height: 36px; }
+
+.block-lb-cards-color .btn {
+  border-radius: 8px;
+  font-size: 24px;
+  line-height: 30px;
+  border: none;
+  background-color: var(--ylb-color-white);
+  color: var(--wsPartnerColor, var(--ylb-color-btn-grey));
+  padding: 9px 20px; }
+  .block-lb-cards-color .btn:hover {
+    background-color: var(--ylb-color-grey);
+    border-color: var(--ylb-color-grey); }
+
+.block-lb-cards-color .row-cards .card {
+  border-radius: 10px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
+  border: none;
+  color: var(--ylb-color-dark-grey);
+  overflow: hidden; }
+  .block-lb-cards-color .row-cards .card h3 {
+    font-size: 32px;
+    line-height: 32px; }
+  .block-lb-cards-color .row-cards .card .card-img-wrapper img {
+    min-height: 200px;
+    height: 100%;
+    width: 100%;
+    -o-object-fit: cover;
+       object-fit: cover; }
+  .block-lb-cards-color .row-cards .card .card-content {
+    gap: 25px;
+    padding: 20px;
+    background-color: var(--wsPrimaryColor, #fff); }
+    .block-lb-cards-color .row-cards .card .card-content .card-header {
+      border: none;
+      padding: 0;
+      background-color: transparent; }
+      .block-lb-cards-color .row-cards .card .card-content .card-header .category-tag {
+        font-family: Verdana, Geneva, sans-serif;
+        font-size: 14px;
+        line-height: 20px;
+        text-transform: uppercase;
+        min-height: 17px;
+        padding: 2px 4px;
+        border-radius: 5px;
+        color: var(--ylb-color-white);
+        width: -moz-fit-content;
+        width: fit-content; }
+    .block-lb-cards-color .row-cards .card .card-content .card-body .card-heading {
+      margin-bottom: 25px;
+      color: var(--ylb-color-white); }
+    .block-lb-cards-color .row-cards .card .card-content .card-text {
+      font-size: 18px;
+      line-height: 28px; }
+
+@media (min-width: 992px) {
+  .block-lb-cards-color .row-cards.row-cols-lg-1 .card {
+    flex-direction: row;
+    height: 360px; }
+    .block-lb-cards-color .row-cards.row-cols-lg-1 .card .card-content {
+      flex: 1; }
+      .block-lb-cards-color .row-cards.row-cols-lg-1 .card .card-content .card-body {
+        flex: unset; }
+    .block-lb-cards-color .row-cards.row-cols-lg-1 .card .card-img-wrapper {
+      height: unset;
+      width: 49%; }
+      .block-lb-cards-color .row-cards.row-cols-lg-1 .card .card-img-wrapper img {
+        width: 100%; } }
+
+@media (min-width: 1200px) {
+  .block-lb-cards-color .row-cards.row-cols-lg-1 .card .card-content {
+    padding: 40px 35px 40px 40px; } }
+
+@media (min-width: 1060px) {
+  .block-lb-cards-color .row-cards.row-cols-lg-2 .card .card-img-wrapper {
+    height: 360px; }
+  .block-lb-cards-color .row-cards.row-cols-lg-3 .card .card-img-wrapper {
+    height: 270px; }
+  .block-lb-cards-color .row-cards.row-cols-lg-4 .card .card-img-wrapper {
+    height: 200px; } }
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxiLWNhcmRzLWNvbG9yLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLDZCQUE2QixFQUFFOztBQUVqQztFQUNFLGlDQUFpQztFQUNqQyxtQkFBbUIsRUFBRTtFQUNyQjtJQUNFLGVBQWU7SUFDZixpQkFBaUIsRUFBRTtFQUNyQjtJQUNFLGVBQWU7SUFDZixpQkFBaUIsRUFBRTs7QUFFdkI7RUFDRSxrQkFBa0I7RUFDbEIsZUFBZTtFQUNmLGlCQUFpQjtFQUNqQixZQUFZO0VBQ1osd0NBQXdDO0VBQ3hDLHVEQUF1RDtFQUN2RCxpQkFBaUIsRUFBRTtFQUNuQjtJQUNFLHVDQUF1QztJQUN2QyxtQ0FBbUMsRUFBRTs7QUFFekM7RUFDRSxtQkFBbUI7RUFDbkIsMENBQTBDO0VBQzFDLFlBQVk7RUFDWixpQ0FBaUM7RUFDakMsZ0JBQWdCLEVBQUU7RUFDbEI7SUFDRSxlQUFlO0lBQ2YsaUJBQWlCLEVBQUU7RUFDckI7SUFDRSxpQkFBaUI7SUFDakIsWUFBWTtJQUNaLFdBQVc7SUFDWCxvQkFBaUI7T0FBakIsaUJBQWlCLEVBQUU7RUFDckI7SUFDRSxTQUFTO0lBQ1QsYUFBYTtJQUNiLDZDQUE2QyxFQUFFO0lBQy9DO01BQ0UsWUFBWTtNQUNaLFVBQVU7TUFDViw2QkFBNkIsRUFBRTtNQUMvQjtRQUNFLHdDQUF3QztRQUN4QyxlQUFlO1FBQ2YsaUJBQWlCO1FBQ2pCLHlCQUF5QjtRQUN6QixnQkFBZ0I7UUFDaEIsZ0JBQWdCO1FBQ2hCLGtCQUFrQjtRQUNsQiw2QkFBNkI7UUFDN0IsdUJBQWtCO1FBQWxCLGtCQUFrQixFQUFFO0lBQ3hCO01BQ0UsbUJBQW1CO01BQ25CLDZCQUE2QixFQUFFO0lBQ2pDO01BQ0UsZUFBZTtNQUNmLGlCQUFpQixFQUFFOztBQUV6QjtFQUNFO0lBQ0UsbUJBQW1CO0lBQ25CLGFBQWEsRUFBRTtJQUNmO01BQ0UsT0FBTyxFQUFFO01BQ1Q7UUFDRSxXQUFXLEVBQUU7SUFDakI7TUFDRSxhQUFhO01BQ2IsVUFBVSxFQUFFO01BQ1o7UUFDRSxXQUFXLEVBQUUsRUFBRTs7QUFFdkI7RUFDRTtJQUNFLDRCQUE0QixFQUFFLEVBQUU7O0FBRXBDO0VBQ0U7SUFDRSxhQUFhLEVBQUU7RUFDakI7SUFDRSxhQUFhLEVBQUU7RUFDakI7SUFDRSxhQUFhLEVBQUUsRUFBRSIsImZpbGUiOiJsYi1jYXJkcy1jb2xvci5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyI6cm9vdCB7XG4gIC0teWxiLWNvbG9yLWJ0bi1ncmV5OiAjNjM2NDY2OyB9XG5cbi5ibG9jay1sYi1jYXJkcy1jb2xvciAuc2VjdGlvbi1kZXNjcmlwdGlvbiB7XG4gIGNvbG9yOiB2YXIoLS15bGItY29sb3ItZGFyay1ncmV5KTtcbiAgbWFyZ2luLWJvdHRvbTogNTBweDsgfVxuICAuYmxvY2stbGItY2FyZHMtY29sb3IgLnNlY3Rpb24tZGVzY3JpcHRpb24gaDIge1xuICAgIGZvbnQtc2l6ZTogNTBweDtcbiAgICBsaW5lLWhlaWdodDogNjVweDsgfVxuICAuYmxvY2stbGItY2FyZHMtY29sb3IgLnNlY3Rpb24tZGVzY3JpcHRpb24gcCB7XG4gICAgZm9udC1zaXplOiAyNHB4O1xuICAgIGxpbmUtaGVpZ2h0OiAzNnB4OyB9XG5cbi5ibG9jay1sYi1jYXJkcy1jb2xvciAuYnRuIHtcbiAgYm9yZGVyLXJhZGl1czogOHB4O1xuICBmb250LXNpemU6IDI0cHg7XG4gIGxpbmUtaGVpZ2h0OiAzMHB4O1xuICBib3JkZXI6IG5vbmU7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXlsYi1jb2xvci13aGl0ZSk7XG4gIGNvbG9yOiB2YXIoLS13c1BhcnRuZXJDb2xvciwgdmFyKC0teWxiLWNvbG9yLWJ0bi1ncmV5KSk7XG4gIHBhZGRpbmc6IDlweCAyMHB4OyB9XG4gIC5ibG9jay1sYi1jYXJkcy1jb2xvciAuYnRuOmhvdmVyIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS15bGItY29sb3ItZ3JleSk7XG4gICAgYm9yZGVyLWNvbG9yOiB2YXIoLS15bGItY29sb3ItZ3JleSk7IH1cblxuLmJsb2NrLWxiLWNhcmRzLWNvbG9yIC5yb3ctY2FyZHMgLmNhcmQge1xuICBib3JkZXItcmFkaXVzOiAxMHB4O1xuICBib3gtc2hhZG93OiAwIDAgMTBweCAwIHJnYmEoMCwgMCwgMCwgMC4xNSk7XG4gIGJvcmRlcjogbm9uZTtcbiAgY29sb3I6IHZhcigtLXlsYi1jb2xvci1kYXJrLWdyZXkpO1xuICBvdmVyZmxvdzogaGlkZGVuOyB9XG4gIC5ibG9jay1sYi1jYXJkcy1jb2xvciAucm93LWNhcmRzIC5jYXJkIGgzIHtcbiAgICBmb250LXNpemU6IDMycHg7XG4gICAgbGluZS1oZWlnaHQ6IDMycHg7IH1cbiAgLmJsb2NrLWxiLWNhcmRzLWNvbG9yIC5yb3ctY2FyZHMgLmNhcmQgLmNhcmQtaW1nLXdyYXBwZXIgaW1nIHtcbiAgICBtaW4taGVpZ2h0OiAyMDBweDtcbiAgICBoZWlnaHQ6IDEwMCU7XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgb2JqZWN0LWZpdDogY292ZXI7IH1cbiAgLmJsb2NrLWxiLWNhcmRzLWNvbG9yIC5yb3ctY2FyZHMgLmNhcmQgLmNhcmQtY29udGVudCB7XG4gICAgZ2FwOiAyNXB4O1xuICAgIHBhZGRpbmc6IDIwcHg7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0td3NQcmltYXJ5Q29sb3IsICNmZmYpOyB9XG4gICAgLmJsb2NrLWxiLWNhcmRzLWNvbG9yIC5yb3ctY2FyZHMgLmNhcmQgLmNhcmQtY29udGVudCAuY2FyZC1oZWFkZXIge1xuICAgICAgYm9yZGVyOiBub25lO1xuICAgICAgcGFkZGluZzogMDtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50OyB9XG4gICAgICAuYmxvY2stbGItY2FyZHMtY29sb3IgLnJvdy1jYXJkcyAuY2FyZCAuY2FyZC1jb250ZW50IC5jYXJkLWhlYWRlciAuY2F0ZWdvcnktdGFnIHtcbiAgICAgICAgZm9udC1mYW1pbHk6IFZlcmRhbmEsIEdlbmV2YSwgc2Fucy1zZXJpZjtcbiAgICAgICAgZm9udC1zaXplOiAxNHB4O1xuICAgICAgICBsaW5lLWhlaWdodDogMjBweDtcbiAgICAgICAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbiAgICAgICAgbWluLWhlaWdodDogMTdweDtcbiAgICAgICAgcGFkZGluZzogMnB4IDRweDtcbiAgICAgICAgYm9yZGVyLXJhZGl1czogNXB4O1xuICAgICAgICBjb2xvcjogdmFyKC0teWxiLWNvbG9yLXdoaXRlKTtcbiAgICAgICAgd2lkdGg6IGZpdC1jb250ZW50OyB9XG4gICAgLmJsb2NrLWxiLWNhcmRzLWNvbG9yIC5yb3ctY2FyZHMgLmNhcmQgLmNhcmQtY29udGVudCAuY2FyZC1ib2R5IC5jYXJkLWhlYWRpbmcge1xuICAgICAgbWFyZ2luLWJvdHRvbTogMjVweDtcbiAgICAgIGNvbG9yOiB2YXIoLS15bGItY29sb3Itd2hpdGUpOyB9XG4gICAgLmJsb2NrLWxiLWNhcmRzLWNvbG9yIC5yb3ctY2FyZHMgLmNhcmQgLmNhcmQtY29udGVudCAuY2FyZC10ZXh0IHtcbiAgICAgIGZvbnQtc2l6ZTogMThweDtcbiAgICAgIGxpbmUtaGVpZ2h0OiAyOHB4OyB9XG5cbkBtZWRpYSAobWluLXdpZHRoOiA5OTJweCkge1xuICAuYmxvY2stbGItY2FyZHMtY29sb3IgLnJvdy1jYXJkcy5yb3ctY29scy1sZy0xIC5jYXJkIHtcbiAgICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICAgIGhlaWdodDogMzYwcHg7IH1cbiAgICAuYmxvY2stbGItY2FyZHMtY29sb3IgLnJvdy1jYXJkcy5yb3ctY29scy1sZy0xIC5jYXJkIC5jYXJkLWNvbnRlbnQge1xuICAgICAgZmxleDogMTsgfVxuICAgICAgLmJsb2NrLWxiLWNhcmRzLWNvbG9yIC5yb3ctY2FyZHMucm93LWNvbHMtbGctMSAuY2FyZCAuY2FyZC1jb250ZW50IC5jYXJkLWJvZHkge1xuICAgICAgICBmbGV4OiB1bnNldDsgfVxuICAgIC5ibG9jay1sYi1jYXJkcy1jb2xvciAucm93LWNhcmRzLnJvdy1jb2xzLWxnLTEgLmNhcmQgLmNhcmQtaW1nLXdyYXBwZXIge1xuICAgICAgaGVpZ2h0OiB1bnNldDtcbiAgICAgIHdpZHRoOiA0OSU7IH1cbiAgICAgIC5ibG9jay1sYi1jYXJkcy1jb2xvciAucm93LWNhcmRzLnJvdy1jb2xzLWxnLTEgLmNhcmQgLmNhcmQtaW1nLXdyYXBwZXIgaW1nIHtcbiAgICAgICAgd2lkdGg6IDEwMCU7IH0gfVxuXG5AbWVkaWEgKG1pbi13aWR0aDogMTIwMHB4KSB7XG4gIC5ibG9jay1sYi1jYXJkcy1jb2xvciAucm93LWNhcmRzLnJvdy1jb2xzLWxnLTEgLmNhcmQgLmNhcmQtY29udGVudCB7XG4gICAgcGFkZGluZzogNDBweCAzNXB4IDQwcHggNDBweDsgfSB9XG5cbkBtZWRpYSAobWluLXdpZHRoOiAxMDYwcHgpIHtcbiAgLmJsb2NrLWxiLWNhcmRzLWNvbG9yIC5yb3ctY2FyZHMucm93LWNvbHMtbGctMiAuY2FyZCAuY2FyZC1pbWctd3JhcHBlciB7XG4gICAgaGVpZ2h0OiAzNjBweDsgfVxuICAuYmxvY2stbGItY2FyZHMtY29sb3IgLnJvdy1jYXJkcy5yb3ctY29scy1sZy0zIC5jYXJkIC5jYXJkLWltZy13cmFwcGVyIHtcbiAgICBoZWlnaHQ6IDI3MHB4OyB9XG4gIC5ibG9jay1sYi1jYXJkcy1jb2xvciAucm93LWNhcmRzLnJvdy1jb2xzLWxnLTQgLmNhcmQgLmNhcmQtaW1nLXdyYXBwZXIge1xuICAgIGhlaWdodDogMjAwcHg7IH0gfVxuIl19 */
\ No newline at end of file
diff --git a/assets/css/lb-cards-overlay.css b/assets/css/lb-cards-overlay.css
new file mode 100644
index 0000000..9a732e4
--- /dev/null
+++ b/assets/css/lb-cards-overlay.css
@@ -0,0 +1,116 @@
+:root {
+  --ylb-color-btn-grey: #636466; }
+
+.block-lb-cards-overlay .section-description {
+  color: var(--ylb-color-dark-grey);
+  margin-bottom: 50px; }
+  .block-lb-cards-overlay .section-description h2 {
+    font-size: 50px;
+    line-height: 65px; }
+  .block-lb-cards-overlay .section-description p {
+    font-size: 24px;
+    line-height: 36px; }
+
+.block-lb-cards-overlay .btn {
+  border-radius: 8px;
+  font-size: 24px;
+  line-height: 30px;
+  border: none;
+  background-color: var(--ylb-color-white);
+  color: var(--wsPartnerColor, var(--ylb-color-btn-grey));
+  padding: 9px 20px; }
+  .block-lb-cards-overlay .btn:hover {
+    background-color: var(--ylb-color-grey);
+    border-color: var(--ylb-color-grey); }
+
+.block-lb-cards-overlay .row-cards .card {
+  border-radius: 10px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
+  border: none;
+  color: var(--ylb-color-dark-grey);
+  overflow: hidden; }
+  .block-lb-cards-overlay .row-cards .card h3 {
+    font-size: 32px;
+    line-height: 32px; }
+  .block-lb-cards-overlay .row-cards .card .card-img-wrapper {
+    position: relative; }
+    .block-lb-cards-overlay .row-cards .card .card-img-wrapper:after {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      top: 0;
+      z-index: 1;
+      content: '';
+      background: linear-gradient(180deg, rgba(var(--wsTertiaryColorRGB), 0.1) 0.1%, rgba(var(--wsPrimaryColorRGB), 0.72) 64.9%, var(--wsPrimaryColor) 100%); }
+    .block-lb-cards-overlay .row-cards .card .card-img-wrapper img {
+      min-height: 230px;
+      height: 100%;
+      width: 100%;
+      -o-object-fit: cover;
+         object-fit: cover; }
+  .block-lb-cards-overlay .row-cards .card .card-content {
+    gap: 25px;
+    padding: 0 20px 20px;
+    margin-top: -55px;
+    background-color: var(--wsPrimaryColor); }
+    .block-lb-cards-overlay .row-cards .card .card-content .card-header {
+      border: none;
+      padding: 0;
+      background-color: transparent;
+      z-index: 1; }
+      .block-lb-cards-overlay .row-cards .card .card-content .card-header .category-tag {
+        font-family: Verdana, Geneva, sans-serif;
+        font-size: 14px;
+        line-height: 20px;
+        text-transform: uppercase;
+        min-height: 17px;
+        padding: 2px 4px;
+        border-radius: 5px;
+        color: var(--ylb-color-white);
+        width: -moz-fit-content;
+        width: fit-content; }
+    .block-lb-cards-overlay .row-cards .card .card-content .card-body {
+      z-index: 1; }
+      .block-lb-cards-overlay .row-cards .card .card-content .card-body .card-heading {
+        margin-bottom: 25px;
+        color: var(--ylb-color-white); }
+    .block-lb-cards-overlay .row-cards .card .card-content .card-text {
+      color: var(--ylb-color-white);
+      font-size: 18px;
+      line-height: 28px; }
+
+@media (min-width: 992px) {
+  .block-lb-cards-overlay .row-cards.row-cols-lg-1 .card {
+    flex-direction: row;
+    height: 360px; }
+    .block-lb-cards-overlay .row-cards.row-cols-lg-1 .card .card-content {
+      flex: 1;
+      padding: 20px;
+      margin-top: 0; }
+      .block-lb-cards-overlay .row-cards.row-cols-lg-1 .card .card-content .card-body {
+        flex: unset; }
+    .block-lb-cards-overlay .row-cards.row-cols-lg-1 .card .card-img-wrapper {
+      height: unset;
+      width: 49%; }
+      .block-lb-cards-overlay .row-cards.row-cols-lg-1 .card .card-img-wrapper:after {
+        opacity: 1;
+        background: linear-gradient(90deg, rgba(var(--wsTertiaryColorRGB), 0.1) 0.1%, rgba(var(--wsPrimaryColorRGB), 0.72) 64.9%, var(--wsPrimaryColor) 100%); }
+      .block-lb-cards-overlay .row-cards.row-cols-lg-1 .card .card-img-wrapper img {
+        width: 100%; } }
+
+@media (min-width: 1200px) {
+  .block-lb-cards-overlay .row-cards.row-cols-lg-1 .card .card-content {
+    padding: 40px 35px 40px 40px; } }
+
+@media (min-width: 1060px) {
+  .block-lb-cards-overlay .row-cards.row-cols-lg-2 .card .card-img-wrapper {
+    height: 415px; }
+  .block-lb-cards-overlay .row-cards.row-cols-lg-2 .card .card-content {
+    margin-top: 0; }
+  .block-lb-cards-overlay .row-cards.row-cols-lg-3 .card .card-img-wrapper {
+    height: 270px; }
+  .block-lb-cards-overlay .row-cards.row-cols-lg-4 .card .card-img-wrapper {
+    height: 230px; } }
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxiLWNhcmRzLW92ZXJsYXkuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsNkJBQTZCLEVBQUU7O0FBRWpDO0VBQ0UsaUNBQWlDO0VBQ2pDLG1CQUFtQixFQUFFO0VBQ3JCO0lBQ0UsZUFBZTtJQUNmLGlCQUFpQixFQUFFO0VBQ3JCO0lBQ0UsZUFBZTtJQUNmLGlCQUFpQixFQUFFOztBQUV2QjtFQUNFLGtCQUFrQjtFQUNsQixlQUFlO0VBQ2YsaUJBQWlCO0VBQ2pCLFlBQVk7RUFDWix3Q0FBd0M7RUFDeEMsdURBQXVEO0VBQ3ZELGlCQUFpQixFQUFFO0VBQ25CO0lBQ0UsdUNBQXVDO0lBQ3ZDLG1DQUFtQyxFQUFFOztBQUV6QztFQUNFLG1CQUFtQjtFQUNuQiwwQ0FBMEM7RUFDMUMsWUFBWTtFQUNaLGlDQUFpQztFQUNqQyxnQkFBZ0IsRUFBRTtFQUNsQjtJQUNFLGVBQWU7SUFDZixpQkFBaUIsRUFBRTtFQUNyQjtJQUNFLGtCQUFrQixFQUFFO0lBQ3BCO01BQ0Usa0JBQWtCO01BQ2xCLE9BQU87TUFDUCxRQUFRO01BQ1IsU0FBUztNQUNULE1BQU07TUFDTixVQUFVO01BQ1YsV0FBVztNQUNYLHNKQUFzSixFQUFFO0lBQzFKO01BQ0UsaUJBQWlCO01BQ2pCLFlBQVk7TUFDWixXQUFXO01BQ1gsb0JBQWlCO1NBQWpCLGlCQUFpQixFQUFFO0VBQ3ZCO0lBQ0UsU0FBUztJQUNULG9CQUFvQjtJQUNwQixpQkFBaUI7SUFDakIsdUNBQXVDLEVBQUU7SUFDekM7TUFDRSxZQUFZO01BQ1osVUFBVTtNQUNWLDZCQUE2QjtNQUM3QixVQUFVLEVBQUU7TUFDWjtRQUNFLHdDQUF3QztRQUN4QyxlQUFlO1FBQ2YsaUJBQWlCO1FBQ2pCLHlCQUF5QjtRQUN6QixnQkFBZ0I7UUFDaEIsZ0JBQWdCO1FBQ2hCLGtCQUFrQjtRQUNsQiw2QkFBNkI7UUFDN0IsdUJBQWtCO1FBQWxCLGtCQUFrQixFQUFFO0lBQ3hCO01BQ0UsVUFBVSxFQUFFO01BQ1o7UUFDRSxtQkFBbUI7UUFDbkIsNkJBQTZCLEVBQUU7SUFDbkM7TUFDRSw2QkFBNkI7TUFDN0IsZUFBZTtNQUNmLGlCQUFpQixFQUFFOztBQUV6QjtFQUNFO0lBQ0UsbUJBQW1CO0lBQ25CLGFBQWEsRUFBRTtJQUNmO01BQ0UsT0FBTztNQUNQLGFBQWE7TUFDYixhQUFhLEVBQUU7TUFDZjtRQUNFLFdBQVcsRUFBRTtJQUNqQjtNQUNFLGFBQWE7TUFDYixVQUFVLEVBQUU7TUFDWjtRQUNFLFVBQVU7UUFDVixxSkFBcUosRUFBRTtNQUN6SjtRQUNFLFdBQVcsRUFBRSxFQUFFOztBQUV2QjtFQUNFO0lBQ0UsNEJBQTRCLEVBQUUsRUFBRTs7QUFFcEM7RUFDRTtJQUNFLGFBQWEsRUFBRTtFQUNqQjtJQUNFLGFBQWEsRUFBRTtFQUNqQjtJQUNFLGFBQWEsRUFBRTtFQUNqQjtJQUNFLGFBQWEsRUFBRSxFQUFFIiwiZmlsZSI6ImxiLWNhcmRzLW92ZXJsYXkuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiOnJvb3Qge1xuICAtLXlsYi1jb2xvci1idG4tZ3JleTogIzYzNjQ2NjsgfVxuXG4uYmxvY2stbGItY2FyZHMtb3ZlcmxheSAuc2VjdGlvbi1kZXNjcmlwdGlvbiB7XG4gIGNvbG9yOiB2YXIoLS15bGItY29sb3ItZGFyay1ncmV5KTtcbiAgbWFyZ2luLWJvdHRvbTogNTBweDsgfVxuICAuYmxvY2stbGItY2FyZHMtb3ZlcmxheSAuc2VjdGlvbi1kZXNjcmlwdGlvbiBoMiB7XG4gICAgZm9udC1zaXplOiA1MHB4O1xuICAgIGxpbmUtaGVpZ2h0OiA2NXB4OyB9XG4gIC5ibG9jay1sYi1jYXJkcy1vdmVybGF5IC5zZWN0aW9uLWRlc2NyaXB0aW9uIHAge1xuICAgIGZvbnQtc2l6ZTogMjRweDtcbiAgICBsaW5lLWhlaWdodDogMzZweDsgfVxuXG4uYmxvY2stbGItY2FyZHMtb3ZlcmxheSAuYnRuIHtcbiAgYm9yZGVyLXJhZGl1czogOHB4O1xuICBmb250LXNpemU6IDI0cHg7XG4gIGxpbmUtaGVpZ2h0OiAzMHB4O1xuICBib3JkZXI6IG5vbmU7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXlsYi1jb2xvci13aGl0ZSk7XG4gIGNvbG9yOiB2YXIoLS13c1BhcnRuZXJDb2xvciwgdmFyKC0teWxiLWNvbG9yLWJ0bi1ncmV5KSk7XG4gIHBhZGRpbmc6IDlweCAyMHB4OyB9XG4gIC5ibG9jay1sYi1jYXJkcy1vdmVybGF5IC5idG46aG92ZXIge1xuICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXlsYi1jb2xvci1ncmV5KTtcbiAgICBib3JkZXItY29sb3I6IHZhcigtLXlsYi1jb2xvci1ncmV5KTsgfVxuXG4uYmxvY2stbGItY2FyZHMtb3ZlcmxheSAucm93LWNhcmRzIC5jYXJkIHtcbiAgYm9yZGVyLXJhZGl1czogMTBweDtcbiAgYm94LXNoYWRvdzogMCAwIDEwcHggMCByZ2JhKDAsIDAsIDAsIDAuMTUpO1xuICBib3JkZXI6IG5vbmU7XG4gIGNvbG9yOiB2YXIoLS15bGItY29sb3ItZGFyay1ncmV5KTtcbiAgb3ZlcmZsb3c6IGhpZGRlbjsgfVxuICAuYmxvY2stbGItY2FyZHMtb3ZlcmxheSAucm93LWNhcmRzIC5jYXJkIGgzIHtcbiAgICBmb250LXNpemU6IDMycHg7XG4gICAgbGluZS1oZWlnaHQ6IDMycHg7IH1cbiAgLmJsb2NrLWxiLWNhcmRzLW92ZXJsYXkgLnJvdy1jYXJkcyAuY2FyZCAuY2FyZC1pbWctd3JhcHBlciB7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlOyB9XG4gICAgLmJsb2NrLWxiLWNhcmRzLW92ZXJsYXkgLnJvdy1jYXJkcyAuY2FyZCAuY2FyZC1pbWctd3JhcHBlcjphZnRlciB7XG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICBsZWZ0OiAwO1xuICAgICAgcmlnaHQ6IDA7XG4gICAgICBib3R0b206IDA7XG4gICAgICB0b3A6IDA7XG4gICAgICB6LWluZGV4OiAxO1xuICAgICAgY29udGVudDogJyc7XG4gICAgICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQoMTgwZGVnLCByZ2JhKHZhcigtLXdzVGVydGlhcnlDb2xvclJHQiksIDAuMSkgMC4xJSwgcmdiYSh2YXIoLS13c1ByaW1hcnlDb2xvclJHQiksIDAuNzIpIDY0LjklLCB2YXIoLS13c1ByaW1hcnlDb2xvcikgMTAwJSk7IH1cbiAgICAuYmxvY2stbGItY2FyZHMtb3ZlcmxheSAucm93LWNhcmRzIC5jYXJkIC5jYXJkLWltZy13cmFwcGVyIGltZyB7XG4gICAgICBtaW4taGVpZ2h0OiAyMzBweDtcbiAgICAgIGhlaWdodDogMTAwJTtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgb2JqZWN0LWZpdDogY292ZXI7IH1cbiAgLmJsb2NrLWxiLWNhcmRzLW92ZXJsYXkgLnJvdy1jYXJkcyAuY2FyZCAuY2FyZC1jb250ZW50IHtcbiAgICBnYXA6IDI1cHg7XG4gICAgcGFkZGluZzogMCAyMHB4IDIwcHg7XG4gICAgbWFyZ2luLXRvcDogLTU1cHg7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0td3NQcmltYXJ5Q29sb3IpOyB9XG4gICAgLmJsb2NrLWxiLWNhcmRzLW92ZXJsYXkgLnJvdy1jYXJkcyAuY2FyZCAuY2FyZC1jb250ZW50IC5jYXJkLWhlYWRlciB7XG4gICAgICBib3JkZXI6IG5vbmU7XG4gICAgICBwYWRkaW5nOiAwO1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgICB6LWluZGV4OiAxOyB9XG4gICAgICAuYmxvY2stbGItY2FyZHMtb3ZlcmxheSAucm93LWNhcmRzIC5jYXJkIC5jYXJkLWNvbnRlbnQgLmNhcmQtaGVhZGVyIC5jYXRlZ29yeS10YWcge1xuICAgICAgICBmb250LWZhbWlseTogVmVyZGFuYSwgR2VuZXZhLCBzYW5zLXNlcmlmO1xuICAgICAgICBmb250LXNpemU6IDE0cHg7XG4gICAgICAgIGxpbmUtaGVpZ2h0OiAyMHB4O1xuICAgICAgICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICAgICAgICBtaW4taGVpZ2h0OiAxN3B4O1xuICAgICAgICBwYWRkaW5nOiAycHggNHB4O1xuICAgICAgICBib3JkZXItcmFkaXVzOiA1cHg7XG4gICAgICAgIGNvbG9yOiB2YXIoLS15bGItY29sb3Itd2hpdGUpO1xuICAgICAgICB3aWR0aDogZml0LWNvbnRlbnQ7IH1cbiAgICAuYmxvY2stbGItY2FyZHMtb3ZlcmxheSAucm93LWNhcmRzIC5jYXJkIC5jYXJkLWNvbnRlbnQgLmNhcmQtYm9keSB7XG4gICAgICB6LWluZGV4OiAxOyB9XG4gICAgICAuYmxvY2stbGItY2FyZHMtb3ZlcmxheSAucm93LWNhcmRzIC5jYXJkIC5jYXJkLWNvbnRlbnQgLmNhcmQtYm9keSAuY2FyZC1oZWFkaW5nIHtcbiAgICAgICAgbWFyZ2luLWJvdHRvbTogMjVweDtcbiAgICAgICAgY29sb3I6IHZhcigtLXlsYi1jb2xvci13aGl0ZSk7IH1cbiAgICAuYmxvY2stbGItY2FyZHMtb3ZlcmxheSAucm93LWNhcmRzIC5jYXJkIC5jYXJkLWNvbnRlbnQgLmNhcmQtdGV4dCB7XG4gICAgICBjb2xvcjogdmFyKC0teWxiLWNvbG9yLXdoaXRlKTtcbiAgICAgIGZvbnQtc2l6ZTogMThweDtcbiAgICAgIGxpbmUtaGVpZ2h0OiAyOHB4OyB9XG5cbkBtZWRpYSAobWluLXdpZHRoOiA5OTJweCkge1xuICAuYmxvY2stbGItY2FyZHMtb3ZlcmxheSAucm93LWNhcmRzLnJvdy1jb2xzLWxnLTEgLmNhcmQge1xuICAgIGZsZXgtZGlyZWN0aW9uOiByb3c7XG4gICAgaGVpZ2h0OiAzNjBweDsgfVxuICAgIC5ibG9jay1sYi1jYXJkcy1vdmVybGF5IC5yb3ctY2FyZHMucm93LWNvbHMtbGctMSAuY2FyZCAuY2FyZC1jb250ZW50IHtcbiAgICAgIGZsZXg6IDE7XG4gICAgICBwYWRkaW5nOiAyMHB4O1xuICAgICAgbWFyZ2luLXRvcDogMDsgfVxuICAgICAgLmJsb2NrLWxiLWNhcmRzLW92ZXJsYXkgLnJvdy1jYXJkcy5yb3ctY29scy1sZy0xIC5jYXJkIC5jYXJkLWNvbnRlbnQgLmNhcmQtYm9keSB7XG4gICAgICAgIGZsZXg6IHVuc2V0OyB9XG4gICAgLmJsb2NrLWxiLWNhcmRzLW92ZXJsYXkgLnJvdy1jYXJkcy5yb3ctY29scy1sZy0xIC5jYXJkIC5jYXJkLWltZy13cmFwcGVyIHtcbiAgICAgIGhlaWdodDogdW5zZXQ7XG4gICAgICB3aWR0aDogNDklOyB9XG4gICAgICAuYmxvY2stbGItY2FyZHMtb3ZlcmxheSAucm93LWNhcmRzLnJvdy1jb2xzLWxnLTEgLmNhcmQgLmNhcmQtaW1nLXdyYXBwZXI6YWZ0ZXIge1xuICAgICAgICBvcGFjaXR5OiAxO1xuICAgICAgICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQoOTBkZWcsIHJnYmEodmFyKC0td3NUZXJ0aWFyeUNvbG9yUkdCKSwgMC4xKSAwLjElLCByZ2JhKHZhcigtLXdzUHJpbWFyeUNvbG9yUkdCKSwgMC43MikgNjQuOSUsIHZhcigtLXdzUHJpbWFyeUNvbG9yKSAxMDAlKTsgfVxuICAgICAgLmJsb2NrLWxiLWNhcmRzLW92ZXJsYXkgLnJvdy1jYXJkcy5yb3ctY29scy1sZy0xIC5jYXJkIC5jYXJkLWltZy13cmFwcGVyIGltZyB7XG4gICAgICAgIHdpZHRoOiAxMDAlOyB9IH1cblxuQG1lZGlhIChtaW4td2lkdGg6IDEyMDBweCkge1xuICAuYmxvY2stbGItY2FyZHMtb3ZlcmxheSAucm93LWNhcmRzLnJvdy1jb2xzLWxnLTEgLmNhcmQgLmNhcmQtY29udGVudCB7XG4gICAgcGFkZGluZzogNDBweCAzNXB4IDQwcHggNDBweDsgfSB9XG5cbkBtZWRpYSAobWluLXdpZHRoOiAxMDYwcHgpIHtcbiAgLmJsb2NrLWxiLWNhcmRzLW92ZXJsYXkgLnJvdy1jYXJkcy5yb3ctY29scy1sZy0yIC5jYXJkIC5jYXJkLWltZy13cmFwcGVyIHtcbiAgICBoZWlnaHQ6IDQxNXB4OyB9XG4gIC5ibG9jay1sYi1jYXJkcy1vdmVybGF5IC5yb3ctY2FyZHMucm93LWNvbHMtbGctMiAuY2FyZCAuY2FyZC1jb250ZW50IHtcbiAgICBtYXJnaW4tdG9wOiAwOyB9XG4gIC5ibG9jay1sYi1jYXJkcy1vdmVybGF5IC5yb3ctY2FyZHMucm93LWNvbHMtbGctMyAuY2FyZCAuY2FyZC1pbWctd3JhcHBlciB7XG4gICAgaGVpZ2h0OiAyNzBweDsgfVxuICAuYmxvY2stbGItY2FyZHMtb3ZlcmxheSAucm93LWNhcmRzLnJvdy1jb2xzLWxnLTQgLmNhcmQgLmNhcmQtaW1nLXdyYXBwZXIge1xuICAgIGhlaWdodDogMjMwcHg7IH0gfVxuIl19 */
\ No newline at end of file
diff --git a/assets/css/lb-cards.css b/assets/css/lb-cards.css
index be1ea23..c496d59 100644
--- a/assets/css/lb-cards.css
+++ b/assets/css/lb-cards.css
@@ -1,90 +1,92 @@
 :root {
   --ylb-color-btn-grey: #636466; }
 
-.block-lb-cards .section-description {
+.block-lb-cards-standard .section-description {
   color: var(--ylb-color-dark-grey);
   margin-bottom: 50px; }
-  .block-lb-cards .section-description h2 {
+  .block-lb-cards-standard .section-description h2 {
     font-size: 50px;
     line-height: 65px; }
-  .block-lb-cards .section-description p {
+  .block-lb-cards-standard .section-description p {
     font-size: 24px;
     line-height: 36px; }
 
-.block-lb-cards .btn {
+.block-lb-cards-standard .btn {
   border-radius: 8px;
   font-size: 24px;
   line-height: 30px;
-  border-color: var(--ylb-color-btn-grey);
-  background-color: var(--ylb-color-btn-grey);
+  border: none;
+  background-color: var(--wsPartnerColor, var(--ylb-color-btn-grey));
   color: var(--ylb-color-white);
-  padding: 10px 34px; }
-  .block-lb-cards .btn:hover {
+  padding: 9px 20px; }
+  .block-lb-cards-standard .btn:hover {
     background-color: var(--ylb-color-grey);
     border-color: var(--ylb-color-grey); }
 
-.block-lb-cards .card {
-  border-radius: 8px;
-  color: var(--ylb-color-white);
-  background-color: var(--ylb-color-dark-grey); }
-  .block-lb-cards .card h3 {
+.block-lb-cards-standard .row-cards .card {
+  border-radius: 10px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
+  border: none;
+  color: var(--ylb-color-dark-grey);
+  overflow: hidden; }
+  .block-lb-cards-standard .row-cards .card h3 {
     font-size: 32px;
     line-height: 32px; }
-
-.block-lb-cards .card-header {
-  border: none;
-  background-color: transparent; }
-  .block-lb-cards .card-header .category-tag {
-    font-family: Verdana, Geneva, sans-serif;
-    font-size: 14px;
-    line-height: 17px;
-    text-transform: uppercase;
-    min-height: 17px; }
-
-.block-lb-cards .card-text {
-  font-size: 18px;
-  line-height: 28px; }
-
-.block-lb-cards .card-content {
-  padding: 18px 10px; }
+  .block-lb-cards-standard .row-cards .card .card-img-wrapper img {
+    height: 100%;
+    min-height: 200px;
+    width: 100%;
+    -o-object-fit: cover;
+       object-fit: cover; }
+  .block-lb-cards-standard .row-cards .card .card-content {
+    gap: 25px;
+    padding: 20px; }
+    .block-lb-cards-standard .row-cards .card .card-content .card-header {
+      border: none;
+      padding: 0;
+      background-color: transparent; }
+      .block-lb-cards-standard .row-cards .card .card-content .card-header .category-tag {
+        font-family: Verdana, Geneva, sans-serif;
+        font-size: 14px;
+        line-height: 20px;
+        text-transform: uppercase;
+        min-height: 17px;
+        padding: 2px 4px;
+        border-radius: 5px;
+        color: var(--ylb-color-dark-grey);
+        width: -moz-fit-content;
+        width: fit-content; }
+    .block-lb-cards-standard .row-cards .card .card-content .card-body .card-heading {
+      margin-bottom: 25px;
+      color: #231F20; }
+    .block-lb-cards-standard .row-cards .card .card-content .card-text {
+      font-size: 18px;
+      line-height: 28px; }
 
 @media (min-width: 992px) {
-  .block-lb-cards .row-cols-md-1 .card {
-    flex-direction: row; }
-    .block-lb-cards .row-cols-md-1 .card img {
-      width: 33%; } }
+  .block-lb-cards-standard .row-cards.row-cols-lg-1 .card {
+    flex-direction: row;
+    height: 360px; }
+    .block-lb-cards-standard .row-cards.row-cols-lg-1 .card .card-content {
+      flex: 1; }
+      .block-lb-cards-standard .row-cards.row-cols-lg-1 .card .card-content .card-body {
+        flex: unset; }
+    .block-lb-cards-standard .row-cards.row-cols-lg-1 .card .card-img-wrapper {
+      height: unset;
+      width: 49%; }
+      .block-lb-cards-standard .row-cards.row-cols-lg-1 .card .card-img-wrapper img {
+        width: 100%; } }
 
-.block-lb-cards .row-cols-md-2 .card,
-.block-lb-cards .row-cols-md-3 .card,
-.block-lb-cards .row-cols-md-4 .card {
-  position: relative;
-  overflow: hidden; }
-  .block-lb-cards .row-cols-md-2 .card:before,
-  .block-lb-cards .row-cols-md-3 .card:before,
-  .block-lb-cards .row-cols-md-4 .card:before {
-    content: "";
-    display: block;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(35, 31, 32, 0.6);
-    z-index: 1; }
-  .block-lb-cards .row-cols-md-2 .card img,
-  .block-lb-cards .row-cols-md-3 .card img,
-  .block-lb-cards .row-cols-md-4 .card img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 0; }
-  .block-lb-cards .row-cols-md-2 .card .card-content,
-  .block-lb-cards .row-cols-md-3 .card .card-content,
-  .block-lb-cards .row-cols-md-4 .card .card-content {
-    z-index: 2; }
+@media (min-width: 1200px) {
+  .block-lb-cards-standard .row-cards.row-cols-lg-1 .card .card-content {
+    padding: 40px 35px 40px 40px; } }
+
+@media (min-width: 1060px) {
+  .block-lb-cards-standard .row-cards.row-cols-lg-2 .card .card-img-wrapper {
+    height: 360px; }
+  .block-lb-cards-standard .row-cards.row-cols-lg-3 .card .card-img-wrapper {
+    height: 270px; }
+  .block-lb-cards-standard .row-cards.row-cols-lg-4 .card .card-img-wrapper {
+    height: 200px; } }
 
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxiLWNhcmRzLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLDZCQUE2QixFQUFFOztBQUVqQztFQUNFLGlDQUFpQztFQUNqQyxtQkFBbUIsRUFBRTtFQUNyQjtJQUNFLGVBQWU7SUFDZixpQkFBaUIsRUFBRTtFQUNyQjtJQUNFLGVBQWU7SUFDZixpQkFBaUIsRUFBRTs7QUFFdkI7RUFDRSxrQkFBa0I7RUFDbEIsZUFBZTtFQUNmLGlCQUFpQjtFQUNqQix1Q0FBdUM7RUFDdkMsMkNBQTJDO0VBQzNDLDZCQUE2QjtFQUM3QixrQkFBa0IsRUFBRTtFQUNwQjtJQUNFLHVDQUF1QztJQUN2QyxtQ0FBbUMsRUFBRTs7QUFFekM7RUFDRSxrQkFBa0I7RUFDbEIsNkJBQTZCO0VBQzdCLDRDQUE0QyxFQUFFO0VBQzlDO0lBQ0UsZUFBZTtJQUNmLGlCQUFpQixFQUFFOztBQUV2QjtFQUNFLFlBQVk7RUFDWiw2QkFBNkIsRUFBRTtFQUMvQjtJQUNFLHdDQUF3QztJQUN4QyxlQUFlO0lBQ2YsaUJBQWlCO0lBQ2pCLHlCQUF5QjtJQUN6QixnQkFBZ0IsRUFBRTs7QUFFdEI7RUFDRSxlQUFlO0VBQ2YsaUJBQWlCLEVBQUU7O0FBRXJCO0VBQ0Usa0JBQWtCLEVBQUU7O0FBRXRCO0VBQ0U7SUFDRSxtQkFBbUIsRUFBRTtJQUNyQjtNQUNFLFVBQVUsRUFBRSxFQUFFOztBQUVwQjs7O0VBR0Usa0JBQWtCO0VBQ2xCLGdCQUFnQixFQUFFO0VBQ2xCOzs7SUFHRSxXQUFXO0lBQ1gsY0FBYztJQUNkLGtCQUFrQjtJQUNsQixXQUFXO0lBQ1gsWUFBWTtJQUNaLE1BQU07SUFDTixPQUFPO0lBQ1AsUUFBUTtJQUNSLFNBQVM7SUFDVCx1Q0FBdUM7SUFDdkMsVUFBVSxFQUFFO0VBQ2Q7OztJQUdFLGtCQUFrQjtJQUNsQixNQUFNO0lBQ04sT0FBTztJQUNQLFFBQVE7SUFDUixTQUFTO0lBQ1QsVUFBVSxFQUFFO0VBQ2Q7OztJQUdFLFVBQVUsRUFBRSIsImZpbGUiOiJsYi1jYXJkcy5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyI6cm9vdCB7XG4gIC0teWxiLWNvbG9yLWJ0bi1ncmV5OiAjNjM2NDY2OyB9XG5cbi5ibG9jay1sYi1jYXJkcyAuc2VjdGlvbi1kZXNjcmlwdGlvbiB7XG4gIGNvbG9yOiB2YXIoLS15bGItY29sb3ItZGFyay1ncmV5KTtcbiAgbWFyZ2luLWJvdHRvbTogNTBweDsgfVxuICAuYmxvY2stbGItY2FyZHMgLnNlY3Rpb24tZGVzY3JpcHRpb24gaDIge1xuICAgIGZvbnQtc2l6ZTogNTBweDtcbiAgICBsaW5lLWhlaWdodDogNjVweDsgfVxuICAuYmxvY2stbGItY2FyZHMgLnNlY3Rpb24tZGVzY3JpcHRpb24gcCB7XG4gICAgZm9udC1zaXplOiAyNHB4O1xuICAgIGxpbmUtaGVpZ2h0OiAzNnB4OyB9XG5cbi5ibG9jay1sYi1jYXJkcyAuYnRuIHtcbiAgYm9yZGVyLXJhZGl1czogOHB4O1xuICBmb250LXNpemU6IDI0cHg7XG4gIGxpbmUtaGVpZ2h0OiAzMHB4O1xuICBib3JkZXItY29sb3I6IHZhcigtLXlsYi1jb2xvci1idG4tZ3JleSk7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXlsYi1jb2xvci1idG4tZ3JleSk7XG4gIGNvbG9yOiB2YXIoLS15bGItY29sb3Itd2hpdGUpO1xuICBwYWRkaW5nOiAxMHB4IDM0cHg7IH1cbiAgLmJsb2NrLWxiLWNhcmRzIC5idG46aG92ZXIge1xuICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXlsYi1jb2xvci1ncmV5KTtcbiAgICBib3JkZXItY29sb3I6IHZhcigtLXlsYi1jb2xvci1ncmV5KTsgfVxuXG4uYmxvY2stbGItY2FyZHMgLmNhcmQge1xuICBib3JkZXItcmFkaXVzOiA4cHg7XG4gIGNvbG9yOiB2YXIoLS15bGItY29sb3Itd2hpdGUpO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS15bGItY29sb3ItZGFyay1ncmV5KTsgfVxuICAuYmxvY2stbGItY2FyZHMgLmNhcmQgaDMge1xuICAgIGZvbnQtc2l6ZTogMzJweDtcbiAgICBsaW5lLWhlaWdodDogMzJweDsgfVxuXG4uYmxvY2stbGItY2FyZHMgLmNhcmQtaGVhZGVyIHtcbiAgYm9yZGVyOiBub25lO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDsgfVxuICAuYmxvY2stbGItY2FyZHMgLmNhcmQtaGVhZGVyIC5jYXRlZ29yeS10YWcge1xuICAgIGZvbnQtZmFtaWx5OiBWZXJkYW5hLCBHZW5ldmEsIHNhbnMtc2VyaWY7XG4gICAgZm9udC1zaXplOiAxNHB4O1xuICAgIGxpbmUtaGVpZ2h0OiAxN3B4O1xuICAgIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG4gICAgbWluLWhlaWdodDogMTdweDsgfVxuXG4uYmxvY2stbGItY2FyZHMgLmNhcmQtdGV4dCB7XG4gIGZvbnQtc2l6ZTogMThweDtcbiAgbGluZS1oZWlnaHQ6IDI4cHg7IH1cblxuLmJsb2NrLWxiLWNhcmRzIC5jYXJkLWNvbnRlbnQge1xuICBwYWRkaW5nOiAxOHB4IDEwcHg7IH1cblxuQG1lZGlhIChtaW4td2lkdGg6IDk5MnB4KSB7XG4gIC5ibG9jay1sYi1jYXJkcyAucm93LWNvbHMtbWQtMSAuY2FyZCB7XG4gICAgZmxleC1kaXJlY3Rpb246IHJvdzsgfVxuICAgIC5ibG9jay1sYi1jYXJkcyAucm93LWNvbHMtbWQtMSAuY2FyZCBpbWcge1xuICAgICAgd2lkdGg6IDMzJTsgfSB9XG5cbi5ibG9jay1sYi1jYXJkcyAucm93LWNvbHMtbWQtMiAuY2FyZCxcbi5ibG9jay1sYi1jYXJkcyAucm93LWNvbHMtbWQtMyAuY2FyZCxcbi5ibG9jay1sYi1jYXJkcyAucm93LWNvbHMtbWQtNCAuY2FyZCB7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgb3ZlcmZsb3c6IGhpZGRlbjsgfVxuICAuYmxvY2stbGItY2FyZHMgLnJvdy1jb2xzLW1kLTIgLmNhcmQ6YmVmb3JlLFxuICAuYmxvY2stbGItY2FyZHMgLnJvdy1jb2xzLW1kLTMgLmNhcmQ6YmVmb3JlLFxuICAuYmxvY2stbGItY2FyZHMgLnJvdy1jb2xzLW1kLTQgLmNhcmQ6YmVmb3JlIHtcbiAgICBjb250ZW50OiBcIlwiO1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBoZWlnaHQ6IDEwMCU7XG4gICAgdG9wOiAwO1xuICAgIGxlZnQ6IDA7XG4gICAgcmlnaHQ6IDA7XG4gICAgYm90dG9tOiAwO1xuICAgIGJhY2tncm91bmQtY29sb3I6IHJnYmEoMzUsIDMxLCAzMiwgMC42KTtcbiAgICB6LWluZGV4OiAxOyB9XG4gIC5ibG9jay1sYi1jYXJkcyAucm93LWNvbHMtbWQtMiAuY2FyZCBpbWcsXG4gIC5ibG9jay1sYi1jYXJkcyAucm93LWNvbHMtbWQtMyAuY2FyZCBpbWcsXG4gIC5ibG9jay1sYi1jYXJkcyAucm93LWNvbHMtbWQtNCAuY2FyZCBpbWcge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB0b3A6IDA7XG4gICAgbGVmdDogMDtcbiAgICByaWdodDogMDtcbiAgICBib3R0b206IDA7XG4gICAgei1pbmRleDogMDsgfVxuICAuYmxvY2stbGItY2FyZHMgLnJvdy1jb2xzLW1kLTIgLmNhcmQgLmNhcmQtY29udGVudCxcbiAgLmJsb2NrLWxiLWNhcmRzIC5yb3ctY29scy1tZC0zIC5jYXJkIC5jYXJkLWNvbnRlbnQsXG4gIC5ibG9jay1sYi1jYXJkcyAucm93LWNvbHMtbWQtNCAuY2FyZCAuY2FyZC1jb250ZW50IHtcbiAgICB6LWluZGV4OiAyOyB9XG4iXX0= */
\ No newline at end of file
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxiLWNhcmRzLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLDZCQUE2QixFQUFFOztBQUVqQztFQUNFLGlDQUFpQztFQUNqQyxtQkFBbUIsRUFBRTtFQUNyQjtJQUNFLGVBQWU7SUFDZixpQkFBaUIsRUFBRTtFQUNyQjtJQUNFLGVBQWU7SUFDZixpQkFBaUIsRUFBRTs7QUFFdkI7RUFDRSxrQkFBa0I7RUFDbEIsZUFBZTtFQUNmLGlCQUFpQjtFQUNqQixZQUFZO0VBQ1osa0VBQWtFO0VBQ2xFLDZCQUE2QjtFQUM3QixpQkFBaUIsRUFBRTtFQUNuQjtJQUNFLHVDQUF1QztJQUN2QyxtQ0FBbUMsRUFBRTs7QUFFekM7RUFDRSxtQkFBbUI7RUFDbkIsMENBQTBDO0VBQzFDLFlBQVk7RUFDWixpQ0FBaUM7RUFDakMsZ0JBQWdCLEVBQUU7RUFDbEI7SUFDRSxlQUFlO0lBQ2YsaUJBQWlCLEVBQUU7RUFDckI7SUFDRSxZQUFZO0lBQ1osaUJBQWlCO0lBQ2pCLFdBQVc7SUFDWCxvQkFBaUI7T0FBakIsaUJBQWlCLEVBQUU7RUFDckI7SUFDRSxTQUFTO0lBQ1QsYUFBYSxFQUFFO0lBQ2Y7TUFDRSxZQUFZO01BQ1osVUFBVTtNQUNWLDZCQUE2QixFQUFFO01BQy9CO1FBQ0Usd0NBQXdDO1FBQ3hDLGVBQWU7UUFDZixpQkFBaUI7UUFDakIseUJBQXlCO1FBQ3pCLGdCQUFnQjtRQUNoQixnQkFBZ0I7UUFDaEIsa0JBQWtCO1FBQ2xCLGlDQUFpQztRQUNqQyx1QkFBa0I7UUFBbEIsa0JBQWtCLEVBQUU7SUFDeEI7TUFDRSxtQkFBbUI7TUFDbkIsY0FBYyxFQUFFO0lBQ2xCO01BQ0UsZUFBZTtNQUNmLGlCQUFpQixFQUFFOztBQUV6QjtFQUNFO0lBQ0UsbUJBQW1CO0lBQ25CLGFBQWEsRUFBRTtJQUNmO01BQ0UsT0FBTyxFQUFFO01BQ1Q7UUFDRSxXQUFXLEVBQUU7SUFDakI7TUFDRSxhQUFhO01BQ2IsVUFBVSxFQUFFO01BQ1o7UUFDRSxXQUFXLEVBQUUsRUFBRTs7QUFFdkI7RUFDRTtJQUNFLDRCQUE0QixFQUFFLEVBQUU7O0FBRXBDO0VBQ0U7SUFDRSxhQUFhLEVBQUU7RUFDakI7SUFDRSxhQUFhLEVBQUU7RUFDakI7SUFDRSxhQUFhLEVBQUUsRUFBRSIsImZpbGUiOiJsYi1jYXJkcy5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyI6cm9vdCB7XG4gIC0teWxiLWNvbG9yLWJ0bi1ncmV5OiAjNjM2NDY2OyB9XG5cbi5ibG9jay1sYi1jYXJkcy1zdGFuZGFyZCAuc2VjdGlvbi1kZXNjcmlwdGlvbiB7XG4gIGNvbG9yOiB2YXIoLS15bGItY29sb3ItZGFyay1ncmV5KTtcbiAgbWFyZ2luLWJvdHRvbTogNTBweDsgfVxuICAuYmxvY2stbGItY2FyZHMtc3RhbmRhcmQgLnNlY3Rpb24tZGVzY3JpcHRpb24gaDIge1xuICAgIGZvbnQtc2l6ZTogNTBweDtcbiAgICBsaW5lLWhlaWdodDogNjVweDsgfVxuICAuYmxvY2stbGItY2FyZHMtc3RhbmRhcmQgLnNlY3Rpb24tZGVzY3JpcHRpb24gcCB7XG4gICAgZm9udC1zaXplOiAyNHB4O1xuICAgIGxpbmUtaGVpZ2h0OiAzNnB4OyB9XG5cbi5ibG9jay1sYi1jYXJkcy1zdGFuZGFyZCAuYnRuIHtcbiAgYm9yZGVyLXJhZGl1czogOHB4O1xuICBmb250LXNpemU6IDI0cHg7XG4gIGxpbmUtaGVpZ2h0OiAzMHB4O1xuICBib3JkZXI6IG5vbmU7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXdzUGFydG5lckNvbG9yLCB2YXIoLS15bGItY29sb3ItYnRuLWdyZXkpKTtcbiAgY29sb3I6IHZhcigtLXlsYi1jb2xvci13aGl0ZSk7XG4gIHBhZGRpbmc6IDlweCAyMHB4OyB9XG4gIC5ibG9jay1sYi1jYXJkcy1zdGFuZGFyZCAuYnRuOmhvdmVyIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS15bGItY29sb3ItZ3JleSk7XG4gICAgYm9yZGVyLWNvbG9yOiB2YXIoLS15bGItY29sb3ItZ3JleSk7IH1cblxuLmJsb2NrLWxiLWNhcmRzLXN0YW5kYXJkIC5yb3ctY2FyZHMgLmNhcmQge1xuICBib3JkZXItcmFkaXVzOiAxMHB4O1xuICBib3gtc2hhZG93OiAwIDAgMTBweCAwIHJnYmEoMCwgMCwgMCwgMC4xNSk7XG4gIGJvcmRlcjogbm9uZTtcbiAgY29sb3I6IHZhcigtLXlsYi1jb2xvci1kYXJrLWdyZXkpO1xuICBvdmVyZmxvdzogaGlkZGVuOyB9XG4gIC5ibG9jay1sYi1jYXJkcy1zdGFuZGFyZCAucm93LWNhcmRzIC5jYXJkIGgzIHtcbiAgICBmb250LXNpemU6IDMycHg7XG4gICAgbGluZS1oZWlnaHQ6IDMycHg7IH1cbiAgLmJsb2NrLWxiLWNhcmRzLXN0YW5kYXJkIC5yb3ctY2FyZHMgLmNhcmQgLmNhcmQtaW1nLXdyYXBwZXIgaW1nIHtcbiAgICBoZWlnaHQ6IDEwMCU7XG4gICAgbWluLWhlaWdodDogMjAwcHg7XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgb2JqZWN0LWZpdDogY292ZXI7IH1cbiAgLmJsb2NrLWxiLWNhcmRzLXN0YW5kYXJkIC5yb3ctY2FyZHMgLmNhcmQgLmNhcmQtY29udGVudCB7XG4gICAgZ2FwOiAyNXB4O1xuICAgIHBhZGRpbmc6IDIwcHg7IH1cbiAgICAuYmxvY2stbGItY2FyZHMtc3RhbmRhcmQgLnJvdy1jYXJkcyAuY2FyZCAuY2FyZC1jb250ZW50IC5jYXJkLWhlYWRlciB7XG4gICAgICBib3JkZXI6IG5vbmU7XG4gICAgICBwYWRkaW5nOiAwO1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7IH1cbiAgICAgIC5ibG9jay1sYi1jYXJkcy1zdGFuZGFyZCAucm93LWNhcmRzIC5jYXJkIC5jYXJkLWNvbnRlbnQgLmNhcmQtaGVhZGVyIC5jYXRlZ29yeS10YWcge1xuICAgICAgICBmb250LWZhbWlseTogVmVyZGFuYSwgR2VuZXZhLCBzYW5zLXNlcmlmO1xuICAgICAgICBmb250LXNpemU6IDE0cHg7XG4gICAgICAgIGxpbmUtaGVpZ2h0OiAyMHB4O1xuICAgICAgICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICAgICAgICBtaW4taGVpZ2h0OiAxN3B4O1xuICAgICAgICBwYWRkaW5nOiAycHggNHB4O1xuICAgICAgICBib3JkZXItcmFkaXVzOiA1cHg7XG4gICAgICAgIGNvbG9yOiB2YXIoLS15bGItY29sb3ItZGFyay1ncmV5KTtcbiAgICAgICAgd2lkdGg6IGZpdC1jb250ZW50OyB9XG4gICAgLmJsb2NrLWxiLWNhcmRzLXN0YW5kYXJkIC5yb3ctY2FyZHMgLmNhcmQgLmNhcmQtY29udGVudCAuY2FyZC1ib2R5IC5jYXJkLWhlYWRpbmcge1xuICAgICAgbWFyZ2luLWJvdHRvbTogMjVweDtcbiAgICAgIGNvbG9yOiAjMjMxRjIwOyB9XG4gICAgLmJsb2NrLWxiLWNhcmRzLXN0YW5kYXJkIC5yb3ctY2FyZHMgLmNhcmQgLmNhcmQtY29udGVudCAuY2FyZC10ZXh0IHtcbiAgICAgIGZvbnQtc2l6ZTogMThweDtcbiAgICAgIGxpbmUtaGVpZ2h0OiAyOHB4OyB9XG5cbkBtZWRpYSAobWluLXdpZHRoOiA5OTJweCkge1xuICAuYmxvY2stbGItY2FyZHMtc3RhbmRhcmQgLnJvdy1jYXJkcy5yb3ctY29scy1sZy0xIC5jYXJkIHtcbiAgICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICAgIGhlaWdodDogMzYwcHg7IH1cbiAgICAuYmxvY2stbGItY2FyZHMtc3RhbmRhcmQgLnJvdy1jYXJkcy5yb3ctY29scy1sZy0xIC5jYXJkIC5jYXJkLWNvbnRlbnQge1xuICAgICAgZmxleDogMTsgfVxuICAgICAgLmJsb2NrLWxiLWNhcmRzLXN0YW5kYXJkIC5yb3ctY2FyZHMucm93LWNvbHMtbGctMSAuY2FyZCAuY2FyZC1jb250ZW50IC5jYXJkLWJvZHkge1xuICAgICAgICBmbGV4OiB1bnNldDsgfVxuICAgIC5ibG9jay1sYi1jYXJkcy1zdGFuZGFyZCAucm93LWNhcmRzLnJvdy1jb2xzLWxnLTEgLmNhcmQgLmNhcmQtaW1nLXdyYXBwZXIge1xuICAgICAgaGVpZ2h0OiB1bnNldDtcbiAgICAgIHdpZHRoOiA0OSU7IH1cbiAgICAgIC5ibG9jay1sYi1jYXJkcy1zdGFuZGFyZCAucm93LWNhcmRzLnJvdy1jb2xzLWxnLTEgLmNhcmQgLmNhcmQtaW1nLXdyYXBwZXIgaW1nIHtcbiAgICAgICAgd2lkdGg6IDEwMCU7IH0gfVxuXG5AbWVkaWEgKG1pbi13aWR0aDogMTIwMHB4KSB7XG4gIC5ibG9jay1sYi1jYXJkcy1zdGFuZGFyZCAucm93LWNhcmRzLnJvdy1jb2xzLWxnLTEgLmNhcmQgLmNhcmQtY29udGVudCB7XG4gICAgcGFkZGluZzogNDBweCAzNXB4IDQwcHggNDBweDsgfSB9XG5cbkBtZWRpYSAobWluLXdpZHRoOiAxMDYwcHgpIHtcbiAgLmJsb2NrLWxiLWNhcmRzLXN0YW5kYXJkIC5yb3ctY2FyZHMucm93LWNvbHMtbGctMiAuY2FyZCAuY2FyZC1pbWctd3JhcHBlciB7XG4gICAgaGVpZ2h0OiAzNjBweDsgfVxuICAuYmxvY2stbGItY2FyZHMtc3RhbmRhcmQgLnJvdy1jYXJkcy5yb3ctY29scy1sZy0zIC5jYXJkIC5jYXJkLWltZy13cmFwcGVyIHtcbiAgICBoZWlnaHQ6IDI3MHB4OyB9XG4gIC5ibG9jay1sYi1jYXJkcy1zdGFuZGFyZCAucm93LWNhcmRzLnJvdy1jb2xzLWxnLTQgLmNhcmQgLmNhcmQtaW1nLXdyYXBwZXIge1xuICAgIGhlaWdodDogMjAwcHg7IH0gfVxuIl19 */
\ No newline at end of file
diff --git a/assets/scss/lb-cards-chevron.scss b/assets/scss/lb-cards-chevron.scss
new file mode 100644
index 0000000..e885627
--- /dev/null
+++ b/assets/scss/lb-cards-chevron.scss
@@ -0,0 +1,182 @@
+@import "_functions";
+@import "_mixins";
+@import "_variables";
+
+:root {
+  --ylb-color-btn-grey: #636466;
+}
+
+.block-lb-cards-chevron {
+  .section-description {
+    color: var(--ylb-color-dark-grey);
+    margin-bottom: 50px;
+
+    h2 {
+      font-size: 50px;
+      line-height: 65px;
+    }
+
+    p {
+      font-size: 24px;
+      line-height: 36px;
+    }
+  }
+
+  .btn {
+    border-radius: 8px;
+    font-size: 24px;
+    line-height: 30px;
+    border: none;
+    background-color: var(--wsPartnerColor, var(--ylb-color-btn-grey));
+    color: var(--ylb-color-white);
+    padding: 9px 20px;
+
+    &:hover {
+      background-color: var(--ylb-color-grey);
+      border-color: var(--ylb-color-grey);
+    }
+  }
+
+  .row-cards {
+    .card {
+      border-radius: 10px;
+      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
+      border: none;
+      color: var(--ylb-color-dark-grey);
+      overflow: hidden;
+
+      h3 {
+        font-size: 32px;
+        line-height: 32px;
+      }
+
+      .card-img-wrapper {
+        position: relative;
+
+        .chevron {
+          height: 100%;
+          width: 100%;
+          top: 0;
+          transform: scale(1.01);
+          left: -25%;
+          position: absolute;
+
+          svg {
+            height: 100%;
+            width: 100%;
+          }
+        }
+
+        .img-container {
+          padding: 15px;
+          position: relative;
+          height: 100%;
+
+          @media (min-width: 400px) {
+            padding: 20px;
+          }
+        }
+
+        img {
+          min-height: 170px;
+          border-radius: 10px;
+          height: 100%;
+          width: 100%;
+          object-fit: cover;
+        }
+      }
+
+      .card-content {
+        gap: 25px;
+        padding: 20px;
+
+        .card-header {
+          border: none;
+          padding: 0;
+          background-color: transparent;
+
+          .category-tag {
+            font-family: Verdana, Geneva, sans-serif;
+            font-size: 14px;
+            line-height: 20px;
+            text-transform: uppercase;
+            min-height: 17px;
+            padding: 2px 4px;
+            border-radius: 5px;
+            color: var(--ylb-color-dark-grey);
+            width: fit-content;
+          }
+        }
+
+        .card-body {
+          .card-heading {
+            margin-bottom: 25px;
+            color: #231F20;
+          }
+        }
+
+        .card-text {
+          font-size: 18px;
+          line-height: 28px;
+        }
+      }
+    }
+
+    &.row-cols-lg-1 {
+      @include media-breakpoint-up('lg') {
+        .card {
+          flex-direction: row;
+          height: 390px;
+
+
+          .card-content {
+            flex: 1;
+
+            .card-body {
+              flex: unset;
+            }
+          }
+
+          .card-img-wrapper {
+            height: unset;
+            width: 49%;
+
+            img {
+              width: 100%;
+            }
+          }
+        }
+      }
+
+      @include media-breakpoint-up('xl') {
+        .card {
+          .card-content {
+            padding: 40px 35px 40px 40px;
+          }
+        }
+      }
+    }
+
+    @media (min-width: 1060px) {
+      &.row-cols-lg-2 .card .card-img-wrapper {
+        height: 400px;
+      }
+
+      &.row-cols-lg-3 .card .card-img-wrapper {
+        height: 270px;
+
+        .chevron {
+          left: -15%;
+        }
+      }
+
+      &.row-cols-lg-4 .card .card-img-wrapper {
+        height: 200px;
+
+        .img-container {
+          padding: 15px;
+        }
+      }
+    }
+  }
+}
diff --git a/assets/scss/lb-cards-color.scss b/assets/scss/lb-cards-color.scss
new file mode 100644
index 0000000..1a6c7c8
--- /dev/null
+++ b/assets/scss/lb-cards-color.scss
@@ -0,0 +1,148 @@
+@import "_functions";
+@import "_mixins";
+@import "_variables";
+
+:root {
+  --ylb-color-btn-grey: #636466;
+}
+
+.block-lb-cards-color {
+
+  .section-description {
+    color: var(--ylb-color-dark-grey);
+    margin-bottom: 50px;
+
+    h2 {
+      font-size: 50px;
+      line-height: 65px;
+    }
+
+    p {
+      font-size: 24px;
+      line-height: 36px;
+    }
+  }
+
+  .btn {
+    border-radius: 8px;
+    font-size: 24px;
+    line-height: 30px;
+    border: none;
+    background-color: var(--ylb-color-white);
+    color: var(--wsPartnerColor, var(--ylb-color-btn-grey));
+    padding: 9px 20px;
+
+    &:hover {
+      background-color: var(--ylb-color-grey);
+      border-color: var(--ylb-color-grey);
+    }
+  }
+
+  .row-cards {
+    .card {
+      border-radius: 10px;
+      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
+      border: none;
+      color: var(--ylb-color-dark-grey);
+      overflow: hidden;
+
+      h3 {
+        font-size: 32px;
+        line-height: 32px;
+      }
+
+      .card-img-wrapper {
+        img {
+          min-height: 200px;
+          height: 100%;
+          width: 100%;
+          object-fit: cover;
+        }
+      }
+
+      .card-content {
+        gap: 25px;
+        padding: 20px;
+        background-color: var(--wsPrimaryColor, #fff);
+
+        .card-header {
+          border: none;
+          padding: 0;
+          background-color: transparent;
+
+          .category-tag {
+            font-family: Verdana, Geneva, sans-serif;
+            font-size: 14px;
+            line-height: 20px;
+            text-transform: uppercase;
+            min-height: 17px;
+            padding: 2px 4px;
+            border-radius: 5px;
+            color: var(--ylb-color-white);
+            width: fit-content;
+          }
+        }
+
+        .card-body {
+          .card-heading {
+            margin-bottom: 25px;
+            color: var(--ylb-color-white);
+          }
+        }
+
+        .card-text {
+          font-size: 18px;
+          line-height: 28px;
+        }
+      }
+    }
+
+    &.row-cols-lg-1 {
+      @include media-breakpoint-up('lg') {
+        .card {
+          flex-direction: row;
+          height: 360px;
+
+          .card-content {
+            flex: 1;
+
+            .card-body {
+              flex: unset;
+            }
+          }
+
+          .card-img-wrapper {
+            height: unset;
+            width: 49%;
+
+            img {
+              width: 100%;
+            }
+          }
+        }
+      }
+
+      @include media-breakpoint-up('xl') {
+        .card {
+          .card-content {
+            padding: 40px 35px 40px 40px;
+          }
+        }
+      }
+    }
+
+    @media (min-width: 1060px) {
+      &.row-cols-lg-2 .card .card-img-wrapper {
+        height: 360px;
+      }
+
+      &.row-cols-lg-3 .card .card-img-wrapper {
+        height: 270px;
+      }
+
+      &.row-cols-lg-4 .card .card-img-wrapper {
+        height: 200px;
+      }
+    }
+  }
+}
diff --git a/assets/scss/lb-cards-overlay.scss b/assets/scss/lb-cards-overlay.scss
new file mode 100644
index 0000000..05cfcf2
--- /dev/null
+++ b/assets/scss/lb-cards-overlay.scss
@@ -0,0 +1,178 @@
+@import "_functions";
+@import "_mixins";
+@import "_variables";
+
+:root {
+  --ylb-color-btn-grey: #636466;
+}
+
+.block-lb-cards-overlay {
+
+  .section-description {
+    color: var(--ylb-color-dark-grey);
+    margin-bottom: 50px;
+
+    h2 {
+      font-size: 50px;
+      line-height: 65px;
+    }
+
+    p {
+      font-size: 24px;
+      line-height: 36px;
+    }
+  }
+
+  .btn {
+    border-radius: 8px;
+    font-size: 24px;
+    line-height: 30px;
+    border: none;
+    background-color: var(--ylb-color-white);
+    color: var(--wsPartnerColor, var(--ylb-color-btn-grey));
+    padding: 9px 20px;
+
+    &:hover {
+      background-color: var(--ylb-color-grey);
+      border-color: var(--ylb-color-grey);
+    }
+  }
+
+  .row-cards {
+
+    .card {
+      border-radius: 10px;
+      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
+      border: none;
+      color: var(--ylb-color-dark-grey);
+      overflow: hidden;
+
+      h3 {
+        font-size: 32px;
+        line-height: 32px;
+      }
+
+      .card-img-wrapper {
+        position: relative;
+
+        &:after {
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          top: 0;
+          z-index: 1;
+          content: '';
+          background: linear-gradient(180deg, rgba(var(--wsTertiaryColorRGB), 0.1) 0.1%, rgba(var(--wsPrimaryColorRGB), 0.72) 64.9%, var(--wsPrimaryColor) 100%);
+        }
+
+        img {
+          min-height: 230px;
+          height: 100%;
+          width: 100%;
+          object-fit: cover;
+        }
+      }
+
+      .card-content {
+        gap: 25px;
+        padding: 0 20px 20px;
+        margin-top: -55px;
+        background-color: var(--wsPrimaryColor);
+
+        .card-header {
+          border: none;
+          padding: 0;
+          background-color: transparent;
+          z-index: 1;
+
+          .category-tag {
+            font-family: Verdana, Geneva, sans-serif;
+            font-size: 14px;
+            line-height: 20px;
+            text-transform: uppercase;
+            min-height: 17px;
+            padding: 2px 4px;
+            border-radius: 5px;
+            color: var(--ylb-color-white);
+            width: fit-content;
+          }
+        }
+
+        .card-body {
+          z-index: 1;
+
+          .card-heading {
+            margin-bottom: 25px;
+            color: var(--ylb-color-white);
+          }
+        }
+
+        .card-text {
+          color: var(--ylb-color-white);
+          font-size: 18px;
+          line-height: 28px;
+        }
+      }
+    }
+
+    &.row-cols-lg-1 {
+      @include media-breakpoint-up('lg') {
+        .card {
+          flex-direction: row;
+          height: 360px;
+
+          .card-content {
+            flex: 1;
+            padding: 20px;
+            margin-top: 0;
+
+            .card-body {
+              flex: unset;
+            }
+          }
+
+          .card-img-wrapper {
+            height: unset;
+            width: 49%;
+
+            &:after {
+              opacity: 1;
+              background: linear-gradient(90deg, rgba(var(--wsTertiaryColorRGB), 0.1) 0.1%, rgba(var(--wsPrimaryColorRGB), 0.72) 64.9%, var(--wsPrimaryColor) 100%)
+            }
+
+            img {
+              width: 100%;
+            }
+          }
+        }
+      }
+
+      @include media-breakpoint-up('xl') {
+        .card {
+          .card-content {
+            padding: 40px 35px 40px 40px;
+          }
+        }
+      }
+    }
+
+    @media (min-width: 1060px) {
+      &.row-cols-lg-2 .card {
+        .card-img-wrapper {
+          height: 415px;
+        }
+        .card-content {
+          margin-top: 0;
+        }
+      }
+      &.row-cols-lg-3 .card .card-img-wrapper {
+        height: 270px;
+      }
+
+      &.row-cols-lg-4 .card .card-img-wrapper {
+        height: 230px;
+      }
+    }
+  }
+}
diff --git a/assets/scss/lb-cards.scss b/assets/scss/lb-cards.scss
index 7e154bd..efc9081 100644
--- a/assets/scss/lb-cards.scss
+++ b/assets/scss/lb-cards.scss
@@ -6,14 +6,16 @@
   --ylb-color-btn-grey: #636466;
 }
 
-.block-lb-cards {
+.block-lb-cards-standard {
   .section-description {
     color: var(--ylb-color-dark-grey);
     margin-bottom: 50px;
+
     h2 {
       font-size: 50px;
       line-height: 65px;
     }
+
     p {
       font-size: 24px;
       line-height: 36px;
@@ -24,86 +26,120 @@
     border-radius: 8px;
     font-size: 24px;
     line-height: 30px;
-    border-color: var(--ylb-color-btn-grey);
-    background-color: var(--ylb-color-btn-grey);
+    border: none;
+    background-color: var(--wsPartnerColor, var(--ylb-color-btn-grey));
     color: var(--ylb-color-white);
-    padding: 10px 34px;
+    padding: 9px 20px;
+
     &:hover {
       background-color: var(--ylb-color-grey);
       border-color: var(--ylb-color-grey);
     }
   }
 
-  .card {
-    border-radius: 8px;
-    color: var(--ylb-color-white);
-    background-color: var(--ylb-color-dark-grey);
-    h3 {
-      font-size: 32px;
-      line-height: 32px;
-    }
-  }
+  .row-cards {
+    .card {
+      border-radius: 10px;
+      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
+      border: none;
+      color: var(--ylb-color-dark-grey);
+      overflow: hidden;
 
-  .card-header {
-    border: none;
-    background-color: transparent;
-    .category-tag {
-      font-family: Verdana, Geneva, sans-serif;
-      font-size: 14px;
-      line-height: 17px;
-      text-transform: uppercase;
-      min-height: 17px;
+      h3 {
+        font-size: 32px;
+        line-height: 32px;
+      }
+
+      .card-img-wrapper {
+        img {
+          height: 100%;
+          min-height: 200px;
+          width: 100%;
+          object-fit: cover;
+        }
+      }
+
+      .card-content {
+        gap: 25px;
+        padding: 20px;
+
+        .card-header {
+          border: none;
+          padding: 0;
+          background-color: transparent;
+
+          .category-tag {
+            font-family: Verdana, Geneva, sans-serif;
+            font-size: 14px;
+            line-height: 20px;
+            text-transform: uppercase;
+            min-height: 17px;
+            padding: 2px 4px;
+            border-radius: 5px;
+            color: var(--ylb-color-dark-grey);
+            width: fit-content;
+          }
+        }
+
+        .card-body {
+          .card-heading {
+            margin-bottom: 25px;
+            color: #231F20;
+          }
+        }
+
+        .card-text {
+          font-size: 18px;
+          line-height: 28px;
+        }
+      }
     }
-  }
 
-  .card-text {
-    font-size: 18px;
-    line-height: 28px;
-  }
+    &.row-cols-lg-1 {
+      @include media-breakpoint-up('lg') {
+        .card {
+          flex-direction: row;
+          height: 360px;
 
-  .card-content {
-    padding: 18px 10px;
-  }
+          .card-content {
+            flex: 1;
 
-  @include media-breakpoint-up('lg'){
-    .row-cols-md-1 {
-      .card {
-        flex-direction: row;
-        img {
-          width: 33%;
+            .card-body {
+              flex: unset;
+            }
+          }
+
+          .card-img-wrapper {
+            height: unset;
+            width: 49%;
+
+            img {
+              width: 100%;
+            }
+          }
+        }
+      }
+
+      @include media-breakpoint-up('xl') {
+        .card {
+          .card-content {
+            padding: 40px 35px 40px 40px;
+          }
         }
       }
     }
-  }
-  .row-cols-md-2,
-  .row-cols-md-3,
-  .row-cols-md-4 {
-    .card {
-      position: relative;
-      overflow: hidden;
-      &:before {
-        content: "";
-        display: block;
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background-color: rgba(35,31,32,0.6);
-        z-index: 1;
+
+    @media (min-width: 1060px) {
+      &.row-cols-lg-2 .card .card-img-wrapper {
+        height: 360px;
       }
-      img {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        z-index: 0;
+
+      &.row-cols-lg-3 .card .card-img-wrapper {
+        height: 270px;
       }
-      .card-content {
-        z-index: 2;
+
+      &.row-cols-lg-4 .card .card-img-wrapper {
+        height: 200px;
       }
     }
   }
diff --git a/lb_cards.libraries.yml b/lb_cards.libraries.yml
index 915ac18..8c56be4 100644
--- a/lb_cards.libraries.yml
+++ b/lb_cards.libraries.yml
@@ -1,6 +1,27 @@
-# Custom module library for general purposes.
+# Custom module library for standard variation.
 lb_cards:
   version: 1.0
   css:
     theme:
       assets/css/lb-cards.css: { preprocess: true }
+
+# Custom module library for chevron variation.
+lb_cards_chevron:
+  version: 1.0
+  css:
+    theme:
+      assets/css/lb-cards-chevron.css: { preprocess: true }
+
+# Custom module library for color variation.
+lb_cards_color:
+  version: 1.0
+  css:
+    theme:
+      assets/css/lb-cards-color.css: { preprocess: true }
+
+# Custom module library for overlay variation.
+lb_cards_overlay:
+  version: 1.0
+  css:
+    theme:
+      assets/css/lb-cards-overlay.css: { preprocess: true }
diff --git a/lb_cards.module b/lb_cards.module
index 24e6695..3b6e37b 100644
--- a/lb_cards.module
+++ b/lb_cards.module
@@ -29,7 +29,19 @@ function lb_cards_theme($existing, $type, $theme, $path) {
     'block__lb_cards' => [
       'base hook' => 'block',
       'template' => 'block--lb-cards',
-    ]
+    ],
+    'block__lb_cards__variation_overlay' => [
+      'base hook' => 'block',
+      'template' => 'block--lb-cards--variation-overlay',
+    ],
+    'block__lb_cards__variation_chevron' => [
+      'base hook' => 'block',
+      'template' => 'block--lb-cards--variation-chevron',
+    ],
+    'block__lb_cards__variation_color' => [
+      'base hook' => 'block',
+      'template' => 'block--lb-cards--variation-color',
+    ],
   ];
 }
 
diff --git a/lb_cards.ws_style.yml b/lb_cards.ws_style.yml
new file mode 100644
index 0000000..0245b33
--- /dev/null
+++ b/lb_cards.ws_style.yml
@@ -0,0 +1,7 @@
+lb_cards:
+  label: Cards variation
+  name: lb_cards
+  global: false
+  applies_to: ['inline_block:lb_cards']
+  library: null
+
diff --git a/lb_cards.ws_style_option.yml b/lb_cards.ws_style_option.yml
new file mode 100644
index 0000000..f85e056
--- /dev/null
+++ b/lb_cards.ws_style_option.yml
@@ -0,0 +1,26 @@
+lb_cards.ws_style_option:
+  - label: Standard variation
+    name: lb_cards_standard
+    group: lb_cards
+    image: null
+    library: null
+    template: block--lb-cards
+  - label: Overlay variation
+    name: lb_cards_overlay
+    group: lb_cards
+    image: null
+    library: null
+    template: block--lb-cards--variation-overlay
+  - label: Chevron variation
+    name: lb_cards_chevron
+    group: lb_cards
+    image: null
+    library: null
+    template: block--lb-cards--variation-chevron
+  - label: Color variation
+    name: lb_cards_color
+    group: lb_cards
+    image: null
+    library: null
+    template: block--lb-cards--variation-color
+
diff --git a/package.json b/package.json
index bb967d0..f7e482e 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "private": true,
   "version": "1.0.0",
   "scripts": {
-    "css:compile": "node-sass --include-path node_modules/bootstrap/scss --importer node_modules/node-sass-magic-importer/dist/cli.js assets/scss/lb-cards.scss -o assets/css",
+    "css:compile": "node-sass --include-path node_modules/bootstrap/scss --importer node_modules/node-sass-magic-importer/dist/cli.js assets/scss/ -o assets/css",
     "css:prefix": "postcss --use autoprefixer -b '> 10%' assets/css/*.css -r",
     "css:build": "npm run css:compile && npm run css:prefix",
     "css:watch": "nodemon -e scss -x \"npm run css:build\" --ignore assets/css",
diff --git a/templates/block--lb-cards--variation-chevron.html.twig b/templates/block--lb-cards--variation-chevron.html.twig
new file mode 100644
index 0000000..4a5da4c
--- /dev/null
+++ b/templates/block--lb-cards--variation-chevron.html.twig
@@ -0,0 +1,129 @@
+{#
+/**
+ * @file
+ * Theme override to display a block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - content: The content of this block.
+ * - attributes: array of HTML attributes populated by modules, intended to
+ *   be added to the main container tag of this template.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ * - block_content: Block content entity instance.
+ *
+ * @see template_preprocess_block()
+ */
+#}
+{%
+  set classes = [
+  'block',
+  'block-' ~ configuration.provider|clean_class,
+  'block-' ~ plugin_id|clean_class,
+  'block-lb-cards',
+  'block-lb-cards-chevron'
+]
+%}
+
+{% set card_id = 'cards-' ~ configuration['block_revision_id'] %}
+{{ attach_library('lb_cards/lb_cards_chevron') }}
+<div{{ attributes.addClass(classes).setAttribute('id', plugin_id|clean_class ~ configuration['block_revision_id']) }}>
+  {{ title_prefix }}
+  {{ title_suffix }}
+  {% block content %}
+    {% if block_content.field_section_title.value or block_content.field_subtitle.value %}
+      <div class="row section-description">
+        <div class="col-12">
+          {% if block_content.field_section_title.value %}
+            <h2>{{ block_content.field_section_title.value }}</h2>
+          {% endif %}
+          {% if block_content.field_subtitle.value %}
+            <p>{{ block_content.field_subtitle.value }}</p>
+          {% endif %}
+        </div>
+      </div>
+    {% endif %}
+    <div class="row-cards row row-cols-1 {{ row_class }} g-4" id="{{ card_id }}">
+      {% if items %}
+        {% for key, item in items %}
+
+        {# Setup our image style. #}
+        {% set media_image = null %}
+        {% set image = null %}
+        {# @todo: make this a setting from the module, check if d8 is installed vs. d9, pass media_image as a variable instead. #}
+        {% if item.field_card_image.entity.field_media_image.entity.uri.value %}
+          {# lightning_media_image 8.x-4x source_field: [field_media_image] #}
+          {% set media_image = item.field_card_image.entity.field_media_image.entity.uri.value %}
+          {% set image_alt = item.field_card_image.entity.field_media_image.entity.alt %}
+        {% endif %}
+
+        {% if media_image %}
+          {% set image = file_url(media_image|image_style('card_image')) %}
+        {% endif %}
+
+        {% set safe_hash = configuration['block_revision_id'] ~ '--' ~ loop.index %}
+        <div class="col mb-4">
+          <div class="card d-flex">
+            {% if image %}
+              <div class="card-img-wrapper">
+                <div class="chevron">
+                  {% include "@lb_cards/chevron.html.twig" %}
+                </div>
+                <div class="img-container">
+                  <img src="{{ image }}" alt="{{ image_alt }}">
+                </div>
+              </div>
+            {% endif %}
+            <div class="card-content w-100 d-flex flex-column align-content-between">
+              <div class="card-header">
+                <div class="category-tag">
+                  {% if item.field_card_topic_tag is not empty %}
+                    {{ item.field_card_topic_tag.entity.label() }}
+                  {% endif %}
+                </div>
+              </div>
+              <div class="card-body p-0">
+                {% if item.field_card_title.value %}
+                  <h3 class="card-heading" id="heading-{{ safe_hash }}">
+                    {{ item.field_card_title.value }}
+                  </h3>
+                {% endif %}
+
+                {% if item.field_card_description.value %}
+                  <div class="card-text">
+                   {{ item.field_card_description.value|nl2br }}
+                  </div>
+                {% endif %}
+              </div>
+              <div class="card-footer bg-transparent border-0 p-0">
+                {% if item.field_card_cta.uri %}
+                  <a href="{{ item.field_card_cta.0.url }}"
+                     class="btn btn-primary">
+                    {{ item.field_card_cta.title }}
+                  </a>
+                {% endif %}
+              </div>
+            </div>
+          </div>
+        </div>
+        {% endfor %}
+      {% endif %}
+    </div>
+  {% endblock %}
+  {% if block_content.field_cta.uri is not empty %}
+    <div class="row section-cta justify-content-center my-5">
+      <a href="{{ block_content.field_cta.0.url }}" class="btn btn-gray-500">{{ block_content.field_cta.title }}</a>
+    </div>
+  {% endif %}
+</div>
diff --git a/templates/block--lb-cards--variation-color.html.twig b/templates/block--lb-cards--variation-color.html.twig
new file mode 100644
index 0000000..e5ce5b8
--- /dev/null
+++ b/templates/block--lb-cards--variation-color.html.twig
@@ -0,0 +1,124 @@
+{#
+/**
+ * @file
+ * Theme override to display a block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - content: The content of this block.
+ * - attributes: array of HTML attributes populated by modules, intended to
+ *   be added to the main container tag of this template.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ * - block_content: Block content entity instance.
+ *
+ * @see template_preprocess_block()
+ */
+#}
+{%
+  set classes = [
+  'block',
+  'block-' ~ configuration.provider|clean_class,
+  'block-' ~ plugin_id|clean_class,
+  'block-lb-cards',
+  'block-lb-cards-color'
+]
+%}
+
+{% set card_id = 'cards-' ~ configuration['block_revision_id'] %}
+{{ attach_library('lb_cards/lb_cards_color') }}
+<div{{ attributes.addClass(classes).setAttribute('id', plugin_id|clean_class ~ configuration['block_revision_id']) }}>
+  {{ title_prefix }}
+  {{ title_suffix }}
+  {% block content %}
+    {% if block_content.field_section_title.value or block_content.field_subtitle.value %}
+      <div class="row section-description">
+        <div class="col-12">
+          {% if block_content.field_section_title.value %}
+            <h2>{{ block_content.field_section_title.value }}</h2>
+          {% endif %}
+          {% if block_content.field_subtitle.value %}
+            <p>{{ block_content.field_subtitle.value }}</p>
+          {% endif %}
+        </div>
+      </div>
+    {% endif %}
+    <div class="row-cards row row-cols-1 {{ row_class }} g-4" id="{{ card_id }}">
+      {% if items %}
+        {% for key, item in items %}
+
+        {# Setup our image style. #}
+        {% set media_image = null %}
+        {% set image = null %}
+        {# @todo: make this a setting from the module, check if d8 is installed vs. d9, pass media_image as a variable instead. #}
+        {% if item.field_card_image.entity.field_media_image.entity.uri.value %}
+          {# lightning_media_image 8.x-4x source_field: [field_media_image] #}
+          {% set media_image = item.field_card_image.entity.field_media_image.entity.uri.value %}
+          {% set image_alt = item.field_card_image.entity.field_media_image.entity.alt %}
+        {% endif %}
+
+        {% if media_image %}
+          {% set image = file_url(media_image|image_style('card_image')) %}
+        {% endif %}
+
+        {% set safe_hash = configuration['block_revision_id'] ~ '--' ~ loop.index %}
+        <div class="col mb-4">
+          <div class="card text-white d-flex">
+            {% if image %}
+              <div class="card-img-wrapper">
+                <img src="{{ image }}" alt="{{ image_alt }}">
+              </div>
+            {% endif %}
+            <div class="card-content w-100 d-flex flex-column align-content-between">
+              <div class="card-header">
+                <div class="category-tag">
+                  {% if item.field_card_topic_tag is not empty %}
+                    {{ item.field_card_topic_tag.entity.label() }}
+                  {% endif %}
+                </div>
+              </div>
+              <div class="card-body p-0">
+                {% if item.field_card_title.value %}
+                  <h3 class="card-heading" id="heading-{{ safe_hash }}">
+                    {{ item.field_card_title.value }}
+                  </h3>
+                {% endif %}
+
+                {% if item.field_card_description.value %}
+                  <div class="card-text">
+                   {{ item.field_card_description.value|nl2br }}
+                  </div>
+                {% endif %}
+              </div>
+              <div class="card-footer bg-transparent border-0 p-0">
+                {% if item.field_card_cta.uri %}
+                  <a href="{{ item.field_card_cta.0.url }}"
+                     class="btn btn-primary">
+                    {{ item.field_card_cta.title }}
+                  </a>
+                {% endif %}
+              </div>
+            </div>
+          </div>
+        </div>
+        {% endfor %}
+      {% endif %}
+    </div>
+  {% endblock %}
+  {% if block_content.field_cta.uri is not empty %}
+    <div class="row section-cta justify-content-center my-5">
+      <a href="{{ block_content.field_cta.0.url }}" class="btn btn-gray-500">{{ block_content.field_cta.title }}</a>
+    </div>
+  {% endif %}
+</div>
diff --git a/templates/block--lb-cards--variation-overlay.html.twig b/templates/block--lb-cards--variation-overlay.html.twig
new file mode 100644
index 0000000..b49b464
--- /dev/null
+++ b/templates/block--lb-cards--variation-overlay.html.twig
@@ -0,0 +1,124 @@
+{#
+/**
+ * @file
+ * Theme override to display a block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - content: The content of this block.
+ * - attributes: array of HTML attributes populated by modules, intended to
+ *   be added to the main container tag of this template.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ * - block_content: Block content entity instance.
+ *
+ * @see template_preprocess_block()
+ */
+#}
+{%
+  set classes = [
+  'block',
+  'block-' ~ configuration.provider|clean_class,
+  'block-' ~ plugin_id|clean_class,
+  'block-lb-cards',
+  'block-lb-cards-overlay'
+]
+%}
+
+{% set card_id = 'cards-' ~ configuration['block_revision_id'] %}
+{{ attach_library('lb_cards/lb_cards_overlay') }}
+<div{{ attributes.addClass(classes).setAttribute('id', plugin_id|clean_class ~ configuration['block_revision_id']) }}>
+  {{ title_prefix }}
+  {{ title_suffix }}
+  {% block content %}
+    {% if block_content.field_section_title.value or block_content.field_subtitle.value %}
+      <div class="row section-description">
+        <div class="col-12">
+          {% if block_content.field_section_title.value %}
+            <h2>{{ block_content.field_section_title.value }}</h2>
+          {% endif %}
+          {% if block_content.field_subtitle.value %}
+            <p>{{ block_content.field_subtitle.value }}</p>
+          {% endif %}
+        </div>
+      </div>
+    {% endif %}
+    <div class="row-cards row row-cols-1 {{ row_class }} g-4" id="{{ card_id }}">
+      {% if items %}
+        {% for key, item in items %}
+
+        {# Setup our image style. #}
+        {% set media_image = null %}
+        {% set image = null %}
+        {# @todo: make this a setting from the module, check if d8 is installed vs. d9, pass media_image as a variable instead. #}
+        {% if item.field_card_image.entity.field_media_image.entity.uri.value %}
+          {# lightning_media_image 8.x-4x source_field: [field_media_image] #}
+          {% set media_image = item.field_card_image.entity.field_media_image.entity.uri.value %}
+          {% set image_alt = item.field_card_image.entity.field_media_image.entity.alt %}
+        {% endif %}
+
+        {% if media_image %}
+          {% set image = file_url(media_image|image_style('card_image')) %}
+        {% endif %}
+
+        {% set safe_hash = configuration['block_revision_id'] ~ '--' ~ loop.index %}
+        <div class="col mb-4">
+          <div class="card d-flex">
+            {% if image %}
+              <div class="card-img-wrapper">
+                <img src="{{ image }}" alt="{{ image_alt }}">
+              </div>
+            {% endif %}
+            <div class="card-content w-100 d-flex flex-column align-content-between">
+              <div class="card-header">
+                <div class="category-tag">
+                  {% if item.field_card_topic_tag is not empty %}
+                    {{ item.field_card_topic_tag.entity.label() }}
+                  {% endif %}
+                </div>
+              </div>
+              <div class="card-body p-0">
+                {% if item.field_card_title.value %}
+                  <h3 class="card-heading" id="heading-{{ safe_hash }}">
+                    {{ item.field_card_title.value }}
+                  </h3>
+                {% endif %}
+
+                {% if item.field_card_description.value %}
+                  <div class="card-text">
+                   {{ item.field_card_description.value|nl2br }}
+                  </div>
+                {% endif %}
+              </div>
+              <div class="card-footer bg-transparent border-0 p-0">
+                {% if item.field_card_cta.uri %}
+                  <a href="{{ item.field_card_cta.0.url }}"
+                     class="btn btn-primary">
+                    {{ item.field_card_cta.title }}
+                  </a>
+                {% endif %}
+              </div>
+            </div>
+          </div>
+        </div>
+        {% endfor %}
+      {% endif %}
+    </div>
+  {% endblock %}
+  {% if block_content.field_cta.uri is not empty %}
+    <div class="row section-cta justify-content-center my-5">
+      <a href="{{ block_content.field_cta.0.url }}" class="btn btn-gray-500">{{ block_content.field_cta.title }}</a>
+    </div>
+  {% endif %}
+</div>
diff --git a/templates/block--lb-cards.html.twig b/templates/block--lb-cards.html.twig
index a84ca60..4d149de 100644
--- a/templates/block--lb-cards.html.twig
+++ b/templates/block--lb-cards.html.twig
@@ -31,7 +31,8 @@
   'block',
   'block-' ~ configuration.provider|clean_class,
   'block-' ~ plugin_id|clean_class,
-  'block-lb-cards'
+  'block-lb-cards',
+  'block-lb-cards-standard'
 ]
 %}
 
@@ -53,7 +54,7 @@
         </div>
       </div>
     {% endif %}
-    <div class="row row-cols-1 {{ row_class }} g-4" id="{{ card_id }}">
+    <div class="row-cards row row-cols-1 {{ row_class }} g-4" id="{{ card_id }}">
       {% if items %}
         {% for key, item in items %}
 
@@ -73,9 +74,11 @@
 
         {% set safe_hash = configuration['block_revision_id'] ~ '--' ~ loop.index %}
         <div class="col mb-4">
-          <div class="card h-100" {% if columns > 1 %} style="background-image: url({{ image }}); background-size: cover;"{% endif %}>
+          <div class="card d-flex">
             {% if image %}
-              <img class="card-img-top {% if columns > 1 %}d-none{% endif %}" src="{{ image }}" alt="{{ image_alt }}">
+              <div class="card-img-wrapper">
+                <img src="{{ image }}" alt="{{ image_alt }}">
+              </div>
             {% endif %}
             <div class="card-content w-100 d-flex flex-column align-content-between">
               <div class="card-header">
@@ -85,7 +88,7 @@
                   {% endif %}
                 </div>
               </div>
-              <div class="card-body">
+              <div class="card-body p-0">
                 {% if item.field_card_title.value %}
                   <h3 class="card-heading" id="heading-{{ safe_hash }}">
                     {{ item.field_card_title.value }}
@@ -98,7 +101,7 @@
                   </div>
                 {% endif %}
               </div>
-              <div class="card-footer bg-transparent border-0 pb-0">
+              <div class="card-footer bg-transparent border-0 p-0">
                 {% if item.field_card_cta.uri %}
                   <a href="{{ item.field_card_cta.0.url }}"
                      class="btn btn-primary">
diff --git a/templates/chevron.html.twig b/templates/chevron.html.twig
new file mode 100644
index 0000000..ee8dc48
--- /dev/null
+++ b/templates/chevron.html.twig
@@ -0,0 +1,10 @@
+<svg preserveAspectRatio="none" viewBox="0 0 863 610" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g id="UI-KIt" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="banner" transform="translate(-1.000000, -1386.000000)">
+      <g id="chevron" transform="translate(1.000000, 1386.000000)">
+        <path d="M853.164443,287.453806 L851.894623,285.264012 L709.950849,38.2331146 L707.466419,33.9089651 C694.699258,12.5350138 671.554009,-0.384834781 646.735904,0.00874206473 L529.553617,0.00874206473 C516.509619,0.0393090701 505.951495,10.6658834 505.95153,23.7638452 C505.878831,27.6926463 506.830464,31.572251 508.712008,35.0177214 L651.67716,283.656316 C665.197627,306.800159 665.418515,335.423093 652.25686,358.774553 L528.035354,574.982027 C526.15381,578.427498 525.202177,582.307103 525.274876,586.235903 C525.274876,599.355483 535.866608,609.991006 548.932172,609.991006 L669.12338,609.991006 C693.942917,610.390316 717.090828,597.468982 729.853895,576.090783 L732.338325,571.766633 L851.867019,363.874832 L854.075401,360.021904 C860.132215,349.149681 863.208928,336.858896 862.991745,324.403109 C863.043758,311.439517 859.682037,298.692489 853.247258,287.453806 L853.164443,287.453806 Z" id="Shape" fill="var(--wsTertiaryColor, #000)"></path>
+        <path d="M710.164443,287.453806 L708.894623,285.264012 L566.950849,38.2331146 L564.466419,33.9089651 C551.699258,12.5350138 528.554009,-0.384834781 503.735904,0.00874206473 L0,0.0177360411 L0.378555001,610 L526.12338,609.991006 C550.942917,610.390316 574.090828,597.468982 586.853895,576.090783 L589.338325,571.766633 L708.867019,363.874832 L711.075401,360.021904 C717.132215,349.149681 720.208928,336.858896 719.991745,324.403109 C720.043758,311.439517 716.682037,298.692489 710.247258,287.453806 L710.164443,287.453806 Z" id="Shape" fill="var(--wsSecondaryColor, $fff)"></path>
+      </g>
+    </g>
+  </g>
+</svg>
-- 
GitLab