Style the recommendations block

References #146

web/themes/custom/opdavies/assets/css/components/recommendation.pcss

@@ -0,0 +1,5 @@
+.recommendation {
+  .photo img {
+    @apply rounded-full
+  }
+}

web/themes/custom/opdavies/assets/css/custom-components.pcss

@@ -3,6 +3,7 @@
 @import './components/lead.pcss';
 @import './components/markup.pcss';
 @import './components/note.pcss';
+@import './components/recommendation.pcss';
 @import './components/table.pcss';
 @import './components/video.pcss';
 @import './components/widget.pcss';

web/themes/custom/opdavies/assets/css/custom-utilities.pcss

@@ -1,3 +1,9 @@
 .no-js .js-hidden {
   display: none
 }
+
+@responsive {
+  .first-of-type\:mt-0:first-of-type {
+    @apply mt-0 !important
+  }
+}

web/themes/custom/opdavies/templates/block/block--inline-block--recommendation.html.twig

@@ -0,0 +1,26 @@
+<article class="recommendation mt-8 first-of-type:mt-0">
+  <h2>{{ label }}</h2>
+
+  <div
+    class="
+      mt-1 flex flex-col-reverse
+      sm:mt-0 sm:flex-row sm:space-y-0 sm:space-x-8
+    "
+  >
+    <div class="mt-4 sm:mt-0">
+      <div>
+        {{ content.field_role }}
+      </div>
+
+      <div class="mt-2 sm:mt-4">
+        {{ content|without('field_company', 'field_role', 'field_photo') }}
+      </div>
+    </div>
+
+    {% if content.field_photo %}
+      <div class="photo flex-shrink-0 flex justify-center">
+        {{ content.field_photo }}
+      </div>
+    {% endif %}
+  </div>
+</article>