update

static/custom.css

@@ -31,3 +31,67 @@ section {
 footer {
     margin-top : 3em;
 }
+
+.media-flex {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  overflow-x: clip;
+}
+
+@media screen and (min-width: 769px){
+  .divide {
+        height: 100%;
+  }
+  
+}
+
+.divide {
+ padding-left: 1em;
+ padding-right: 2em;
+ border-top-width: 0px;
+ border-bottom-width: 0px;
+ border-right-width: 1px;
+ border-style: solid;
+ border-color: rgb(226 232 240);
+ border-left-width: 0px;
+}
+
+.note:hover {
+box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  
+}
+
+.plus-articles {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin: 1em;
+  box-shadow: 10px 15px 25px 0 rgba(0,0,0,.2);
+  padding: 1em;
+}
+
+@media screen and (max-width: 768px) {
+  .overlay {
+      background-image: linear-gradient(to bottom, rgba(190, 184, 184, 0), rgb(190, 184, 184));
+      display: flex;
+      justify-content: center;
+      padding: 1em;
+  }
+}
+
+.overlay:hover {
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+
+@media screen and (min-width: 769px) {
+  .overlay {
+  display: flex;
+  align-items: center;
+  position: relative;
+  right: 11em;
+  border-radius: 0.25em;
+  padding: 1em;
+  background-image: linear-gradient(to right, rgba(190, 184, 184, 0), rgb(190, 184, 184));
+  }  
+}