lp grid

css/components/landing_page.css

@@ -1,26 +1,91 @@
 figure.logo--ilives {
   background: none;
-    width: 24em;
-    margin: 0 auto;
-   height:300px; 
+  width: 24em;
+  margin: 0 auto;
+  height: 300px;
 }
 
 .page-node-type-landing-page #block-views-block-media-display-blocks-source {
   display: none;
-
 }
 article.node.node--type-landing-page h2 {
   margin: 0;
   text-align: center;
-
 }
 .hero-section {
-
   border: 10px solid #d0bca4;
 
   /*height:300px;*/
-
 }
 .logo-wrapper {
-    background: #3333335c;
+  background: #3333335c;
+}
+.path-frontpage .region--content {
+  margin-bottom: 0;
+
+
+}
+#block-olives-views-block-front-page-featured-books-block-2 .view-content,
+#block-olives-views-block-front-page-featured-books-block-1 .view-content {
+  .views-field-did-image {
+    float: none;
+    max-width: 100%;
+    margin: 0;
+    height: 100%;
+  }
+  .views-row {
+    padding: 15px;
+    border: 1px solid #ccc;
+    display: flex;
+    flex-direction: column;
+    .views-field-title h4 {
+      margin: 0;
+      /*margin-bottom: 1rem;*/
+      a {
+        text-decoration: none;
+      }
+    }
+    .views-field img {
+      width: 100%;
+    }
+  }
+}
+@media (min-width: 43.75rem) {
+  #block-olives-views-block-front-page-featured-books-block-1 .view-content {
+    .views-field.views-field-title {
+      height: 7em;
+    }
+    display: flex;
+    justify-content: space-between;
+    .views-row {
+      width: 32%;
+      /*justify-content: space-around;*/
+    }
+  }
+}
+@media (min-width: 43.75rem) {
+  .region--content-below {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .region--content-below
+    #block-olives-views-block-front-page-featured-books-block-1 {
+    flex-basis: calc(72% - (var(--grid-gap) / 2));
+    flex-grow: 1;
+    flex-shrink: 0;
+    margin-inline-end: var(--grid-gap);
+  }
+  .region--content-below
+    #block-olives-views-block-front-page-featured-books-block-2 {
+    flex-basis: calc(25% - (var(--grid-gap) / 2));
+    flex-grow: 1;
+    flex-shrink: 0;
+    margin-inline-end: var(--grid-gap);
+  }
+
+  .region--content-below > *:nth-child(2n),
+  .region--content-below > *:last-child {
+    margin-inline-end: 0;
+  }
 }