FEATURE Handling the big buttons variation

resources/css/app.css

@@ -86,6 +86,7 @@
 @import './blocks/wp-block-table.css';
 @import './blocks/wp-block-details.css';
 @import './blocks/wp-block-image.css';
+@import './blocks/wp-block-buttons.css';
 
 @import './blocks/variants.css';
 

resources/css/blocks/wp-block-buttons.css

@@ -0,0 +1,49 @@
+.wp-block-buttons.is-style-big-buttons {
+  @apply mx-auto flex flex-col justify-center mt-4 mb-12;
+  @apply px-4;
+  @screen lg {
+    flex-direction: row;
+    @apply px-0;
+  }
+  .wp-block-button {
+    @apply shrink w-full;
+    flex-shrink: 1;
+    flex-grow: 1;
+    flex-basis: 100%;
+    @screen lg {
+      @apply w-fit;
+      flex-grow: 0;
+      flex-basis: calc(50% - var(--wp--style--block-gap, 0.5em) * 0.5);
+    }
+    .wp-block-button__link {
+      @apply fjalla uppercase text-left flex justify-between items-center bg-white text-primary;
+      @apply text-3xl;
+      &:after {
+        @apply content-[''] block w-16 h-16 bg-no-repeat;
+
+        transition: transform 0.3s ease-out;
+        background-image: url('../resources/img/carhop-fleche-full-green.svg');
+
+        margin-top: 0.5em;
+      }
+    }
+
+    &:hover {
+      .wp-block-button__link {
+        @apply bg-carhop-green-900 text-white;
+      }
+      .wp-block-button__link:after {
+        transform: translateX(10px);
+        filter: brightness(0) invert(1);
+      }
+    }
+  }
+}
+.wp-block-buttons {
+  @apply !max-w-screen-lg;
+}
+
+.wp-block-buttons.alignwide,
+.wp-block-buttons.alignfull {
+  @apply max-w-none;
+}