diff --git a/shared/templates/styleguide2/includes/organisms/cards/flip_card_list.html b/shared/templates/styleguide2/includes/organisms/cards/flip_card_list.html
index 00185b09a69658d60ef972572af0bbf1cc87c9bb..66d8766ce6cefd3ecfa40e27533674d55e3d2928 100644
--- a/shared/templates/styleguide2/includes/organisms/cards/flip_card_list.html
+++ b/shared/templates/styleguide2/includes/organisms/cards/flip_card_list.html
@@ -1,6 +1,12 @@
 {% load wagtailcore_tags %}
 
-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 content-stretch gap-4">
+<div
+  class="
+    {% block classes %}
+      grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 content-stretch gap-4
+    {% endblock %}
+  "
+>
   {% for block in self.cards %}
     {% include_block block %}
   {% endfor %}
diff --git a/uniweb/models.py b/uniweb/models.py
index 1013f26333493eefd81baff756fea738f63fafcd..ce46305015e40d231ece9823e071899afe43943e 100644
--- a/uniweb/models.py
+++ b/uniweb/models.py
@@ -324,7 +324,7 @@ CONTENT_STREAM_BLOCKS = [
     ("calendar_agenda", CalendarAgendaBlock()),
     ("button", ButtonBlock()),
     ("chart", ChartBlock(template="uniweb/blocks/chart.html")),
-    ("cards", FlipCardsBlock()),
+    ("cards", FlipCardsBlock(template="uniweb/blocks/flip_cards.html")),
 ]
 
 
diff --git a/uniweb/templates/uniweb/base.html b/uniweb/templates/uniweb/base.html
index 7e3e303e2143cf95a70315188f721a1c0b701f86..4b754f05136d71e87c7c3495b9c345d19d2f28af 100644
--- a/uniweb/templates/uniweb/base.html
+++ b/uniweb/templates/uniweb/base.html
@@ -168,11 +168,108 @@
       grid-template-columns: repeat(2, minmax(0, 1fr))
       }
     }
-    @media (min-width: 1024px){
-      .lg\:grid-cols-3{
-        grid-template-columns: repeat(3, minmax(0, 1fr))
-        }
+  @media (min-width: 1024px){
+    .lg\:grid-cols-3{
+      grid-template-columns: repeat(3, minmax(0, 1fr))
       }
+    }
+
+  .mb-\[0\.03rem\]{
+    margin-bottom: 0.03rem
+    }
+
+  .flex{
+    display: flex
+    }
+
+  .items-center{
+    align-items: center
+    }
+
+  .rounded-full{
+    border-radius: 9999px
+    }
+
+  .bg-black{
+    --tw-bg-opacity: 1;
+    background-color: rgb(0 0 0 / var(--tw-bg-opacity))
+    }
+
+  .py-3{
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem
+    }
+
+  .pl-8{
+    padding-left: 2rem
+    }
+
+  .pr-3{
+    padding-right: 0.75rem
+    }
+
+  .font-semibold{
+    font-weight: 600
+    }
+
+  .uppercase{
+    text-transform: uppercase
+    }
+
+  .tracking-normal{
+    letter-spacing: 0em
+    }
+
+  .text-white{
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity))
+    }
+
+  .opacity-0{
+    opacity: 0
+    }
+
+  .duration-200{
+    transition-duration: 200ms
+    }
+
+  .hover\:no-underline:hover{
+    text-decoration-line: none
+    }
+
+  .group:hover .group-hover\:-translate-x-2{
+    --tw-translate-x: -0.5rem;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+    }
+
+  .group:hover .group-hover\:opacity-100{
+    opacity: 1
+    }
+
+  .py-8 {
+    padding-top: 2rem;
+    padding-bottom: 2rem
+  }
+
+  @media (min-width: 1280px){
+    .xl\:py-4{
+      padding-top: 1rem;
+      padding-bottom: 1rem
+      }
+
+    .xl\:pl-8{
+      padding-left: 2rem
+      }
+
+    .xl\:pr-3{
+      padding-right: 0.75rem
+      }
+
+    .xl\:text-lg{
+      font-size: 1.125rem;
+      line-height: 1.75rem
+      }
+    }
   </style>
 
   <style type="text/css">
diff --git a/uniweb/templates/uniweb/blocks/flip_cards.html b/uniweb/templates/uniweb/blocks/flip_cards.html
new file mode 100644
index 0000000000000000000000000000000000000000..bfb07ac65bd30a31f2ab31e125443f7f52ceb3be
--- /dev/null
+++ b/uniweb/templates/uniweb/blocks/flip_cards.html
@@ -0,0 +1,5 @@
+{% extends "styleguide2/includes/organisms/cards/flip_card_list.html" %}
+
+{% block classes %}
+    grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 content-stretch gap-4 py-8
+{% endblock %}