add more practical info content, opening hours + some association sketching

web/src/components/associations/associationItem.module.scss

@@ -1,12 +1,18 @@
-.venueItem {
+.associationItem {
   position: relative;
   list-style: none;
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  align-items: flex-start;
+  gap: 1rem;
+  background: var(--color-white);
+  color: var(--color-black);
+  padding: 1rem;
 }
 
 .image {
   width: 100%;
-  padding-top: 60%;
-  background: var(--color-placeholder);
+  padding-top: 100%;
   position: relative;
 
   img {
@@ -14,19 +20,21 @@
     top: 0;
     width: 100%;
     height: 100%;
-    object-fit: cover;
+    object-fit: contain;
   }
 }
 
 .text {
-  padding: .8rem 0;
+  padding: 0;
 }
 
-.excerpt {}
+.title {
+  font-size: 1.2rem;
+  margin-bottom: 1rem;
+}
 
-.title,
-.details {
-  font-size: 1.6rem;
+.excerpt {
+  font-size: var(--font-size-caption);
 }
 
 .details {

web/src/components/associations/associationList.module.scss

@@ -1,6 +1,6 @@
 .associationList {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(3, 1fr);
   column-gap: var(--spacing-gap-column);
   row-gap: var(--spacing-gap-row);
   padding-bottom: var(--spacing-section-bottom);