Fix: Corrections liens

Fixes #14
Fixes #8

components/featured.php

@@ -22,7 +22,7 @@
 		    <div class="preview-overlay">
 		      <div class="preview-categories">
 		        <?php $category = get_the_category();
-              echo"<span class='badge bg-primary'>" . $category[0]->cat_name . "</span>"; ?>
+              echo"<span class='badge bg-secondary'>" . $category[0]->cat_name . "</span>"; ?>
             </div>
 		    
 		      <h2 class="preview-title"><?php the_title();/*3*/ ?></h2>

components/footer-content.php

@@ -1,4 +1,4 @@
-<footer class="bg-dark">
+<footer class="bg-dark fg-light">
   <nav class="container menu toolbar bg-light fg-dark">
   <ul class="f-end">
     <?php

components/previews.php

@@ -1,27 +1,26 @@
 <?php while(have_posts()) : the_post(); ?>
-  <div class="preview">
+  <a href="<?php the_permalink(); ?>" class="preview">
+    
     <div class="preview-thumbnail">
-      <a href="<?php the_permalink(); ?>">
+      <?php the_post_thumbnail( ); ?>
-        <?php the_post_thumbnail( ); ?>
-      </a>
     </div>
     <div class="preview-text">
-      <h2><a href="<?php the_permalink(); ?>" class="preview-title-link m-0 p-0"><?php the_title(); ?></a></h2>
+      <h2><?php the_title(); ?></h2>
     
       <div class="flex-that">
         <div>
           <?php
             if (!has_category('chapters')) {
               $category = get_the_category();
-              echo"<span class='badge bg-primary small-text m-0'>" . $category[0]->cat_name . "</span>";
+              echo"<span class='badge bg-secondary small-text m-0'>" . $category[0]->cat_name . "</span>";
             }
           ?>
         </div>
         <div>
-          <time><span class="badge bg-primary small-text m-0"><?php the_time('d/m/Y') ?></span></time>
+          <time><span class="badge bg-secondary small-text m-0"><?php the_time('d/m/Y') ?></span></time>
         </div>
       </div>
       <div class="preview-excerpt" aria-excerpt="true"><?php the_excerpt(); ?></div>
     </div>
-  </div>
+  </a>
 <?php endwhile; ?>

scss/components/_breadcrumb.scss

@@ -20,6 +20,8 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
         @include button($button-large);
         @include button-fullcontrol($color-background-alt, accentuate($color-background-alt), get-color("dark2"));
         margin:0 $button-group-margin 0 $button-group-margin;
+        outline-color: accentuate($color-background-alt)!important;
+        text-decoration: none;
 
         &.active {
             @include button-fullcontrol($color-secondary, $color-secondary, $color-font-light);

scss/components/_menus.scss

@@ -21,6 +21,7 @@
     margin: 0;
     justify-content: space-between;
     align-items: center;
+    text-decoration: none;
 
     word-wrap: none;
     text-overflow: ellipsis;

scss/components/_pagination.scss

@@ -10,16 +10,16 @@ nav.pagination {
       padding-right: $button_small;
       margin-right : $button_small / 8;
       margin-left: $button_small / 8;
+      text-decoration: none;
+
 
       &:not(.current) {
         @include button-color($color-background-alt);
+        outline-color: mix($color-background-alt, getTextColorFromBackground($color-background-alt), 85%);
       }
 
       &.current {
         @include background-color($color-primary);
-        &:hover {
-          @include background-color($color-primary);
-        }
       }
   }
 }

scss/components/_toasts.scss

@@ -2,9 +2,6 @@
   @include panel($card-smallpad);
   padding:$card-smallpad;
   font-size: 0.8rem;
-  a:not(:hover) {
-    background-color: rgba(0,0,0,0.2)!important;
-  }
   a {
     margin: 0;
   }

scss/core/_typography.scss

@@ -29,18 +29,32 @@ em {
   font-weight: $fontweight_base;
 }
 
-a, a:visited, mark {
+mark {
-  text-decoration: none;
   padding: 0.05rem 0.25rem;
   border-radius: 0.1rem;
 }
 
-a, a:visited {
+a {
-  @include background-color($color-link);
+  color: darken($color-link, 25%);
   outline-color: $color-link;
+  padding: 0.05rem;
+  border-radius: 0.1rem;
+  text-decoration: underline dashed;
+
+  &:visited {
+    color: darken($color-link, 25%);
+  }
+
   &:hover, &:active {
-    color: $color-link;
+    &, &.fg-dark, .fg-light & {
-    background-color: transparent;
+      background-color: transparentize($color-font, 0.9);
+      text-decoration:none;
+    }
+
+    .fg-light &, &.fg-light {
+      background-color: transparentize($color-font-light, 0.8);
+      text-decoration: none;
+    }
   }
 }
 
@@ -96,6 +110,9 @@ h1, h2, h3, h4, h5, h6, h7 {
 	margin:0;
 	font-weight: $fontweight_base;
   padding-bottom: $lineheight;
+  a {
+    border: none;
+  }
 }
 
 sup, sub {

scss/custom/_featured.scss

@@ -17,6 +17,7 @@
         padding:0;
         border-radius: $card-radius;
         overflow: hidden;
+        text-decoration: none;
         .preview-item {
             width: 100%;
             height: auto;

scss/custom/_global.scss

@@ -213,13 +213,8 @@ footer {
     padding-bottom:1.5rem;
     .columns {
       font-size:0.8rem;
-      a,
+      a {
-      a:visited {
+        color: $color-footer-text;
-        &:hover,
-        &:active,
-        &:visited {
-          color: $color-footer-text;
-        }
       }
     }
 }

scss/custom/_previews.scss

@@ -2,37 +2,41 @@
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: auto;
-    grid-gap: $lineheight;
+    grid-gap: $lineheight / 3;
+    margin: -$lineheight / 3;
     padding-bottom: $lineheight;
 
     @include md() {
         grid-template-columns: 1fr 1fr;
     }
 
-    @include xl() {
+    @include lg() {
         grid-template-columns: 1fr 1fr 1fr;
     }
 
-    @include xxl() {
+    @include xl() {
         grid-template-columns: 1fr 1fr 1fr 1fr;
     }
 }
 
 .preview-list {
+    .preview {
+        display: block;
+    }
     @include sm() {
-        .preview-thumbnail a {
+        .preview-thumbnail img {
             width: 240px;
             margin-right: $lineheight /2;
         }
     
         .preview {
             display: flex;
-            align-items: center;
+            align-items: start;
             margin-bottom: $lineheight;
         }
     }
     @include xl() {
-        .preview-thumbnail a {
+        .preview-thumbnail img {
             width: 320px;
         }
     }
@@ -40,13 +44,15 @@
 
 .preview {
     font-size: 0.8rem;
+    text-decoration: none;
+    padding: $lineheight / 3;
+    border-radius: $card-radius;
 }
 
-.preview-thumbnail a {
+.preview-thumbnail {
     display:block;
     width: 100%;
     background-color:transparent;
-    margin:auto;
     object-fit: cover;
     padding:0;
     line-height:0;
@@ -65,12 +71,17 @@
     font-family: $titlefont;
     font-weight: 800;
     height:3rem;
+    color: $color-font;
     a {
         background-color:transparent!important;
         color:$color-font;
     }
 }
 
+.preview-featured h2 {
+    color: $color-font-light;
+}
+
 .preview-excerpt {
     margin-top: $lineheight / 2;
     font-size:0.8rem;

scss/mixins/_btns.scss

@@ -37,6 +37,7 @@
           @include colorize-shape($hover-color);
           color:lighten($text-color, 5%);
           outline-color: $hover-color;
+          box-shadow:none;
         }
     }
 }

scss/utils/_colorize.scss

@@ -19,17 +19,9 @@
 @mixin bg-color($background-color) {
   @include background-color($background-color);
 
-  &>a,
+  a {
-  &>a:visited {
+    color:currentColor;
-    color: $background-color;
+    outline-color: currentColor;
-    background-color: getTextColorFromBackground($background-color);
-
-    &:hover,
-    &:active,
-    &:visited {
-      color: getTextColorFromBackground($background-color);
-      background: none;
-    }
   }
 }
 

style.css

@@ -395,18 +395,24 @@ em {
   font-style: italic;
   font-weight: 400; }
 
-a, a:visited, mark {
+mark {
-  text-decoration: none;
   padding: 0.05rem 0.25rem;
   border-radius: 0.1rem; }
 
-a, a:visited {
+a {
-  background-color: #e33d22;
+  color: #761d0f;
-  color: #fefefe;
+  outline-color: #e33d22;
-  outline-color: #e33d22; }
+  padding: 0.05rem;
-  a:hover, a:active, a:visited:hover, a:visited:active {
+  border-radius: 0.1rem;
-    color: #e33d22;
+  text-decoration: underline dashed; }
-    background-color: transparent; }
+  a:visited {
+    color: #761d0f; }
+  a:hover, a:hover.fg-dark, .fg-light a:hover, a:active, a:active.fg-dark, .fg-light a:active {
+    background-color: rgba(33, 37, 41, 0.1);
+    text-decoration: none; }
+  .fg-light a:hover, a:hover.fg-light, .fg-light a:active, a:active.fg-light {
+    background-color: rgba(254, 254, 254, 0.2);
+    text-decoration: none; }
 
 a:focus-visible, input:focus-visible {
   outline-style: dashed;
@@ -447,6 +453,8 @@ h1, h2, h3, h4, h5, h6, h7 {
   margin: 0;
   font-weight: 400;
   padding-bottom: 1.6rem; }
+  h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, h7 a {
+    border: none; }
 
 sup > a, sub > a {
   color: #e33d22;
@@ -1088,7 +1096,8 @@ strong.btn-fake {
   strong.btn-fake:hover, strong.btn-fake:active, strong.btn-fake:visited:hover, strong.btn-fake:visited:active, strong.btn-fake:not(.disabled):not(:disabled):hover, strong.btn-fake:not(.disabled):not(:disabled):active {
     background-color: transparent;
     color: #0d0d0d;
-    outline-color: transparent; }
+    outline-color: transparent;
+    box-shadow: none; }
 
 .btn-readmore, .btn-link {
   background-color: transparent;
@@ -1100,7 +1109,8 @@ strong.btn-fake {
   .btn-readmore:hover, .btn-readmore:active, .btn-readmore:visited:hover, .btn-readmore:visited:active, .btn-readmore:not(.disabled):not(:disabled):hover, .btn-readmore:not(.disabled):not(:disabled):active, .btn-link:hover, .btn-link:active, .btn-link:visited:hover, .btn-link:visited:active, .btn-link:not(.disabled):not(:disabled):hover, .btn-link:not(.disabled):not(:disabled):active {
     background-color: #dbe0e5;
     color: #e65139;
-    outline-color: #dbe0e5; }
+    outline-color: #dbe0e5;
+    box-shadow: none; }
   .btn-readmore:not(:hover), .btn-link:not(:hover) {
     border-color: transparent; }
 
@@ -1158,7 +1168,9 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
     background-color: #f1f3f5;
     outline-color: #f1f3f5;
     color: #212529;
-    margin: 0 0 0 0; }
+    margin: 0 0 0 0;
+    outline-color: #dbe0e5 !important;
+    text-decoration: none; }
     .breadcrumb li.breadcrumb-item a:hover, .breadcrumb li.breadcrumb-item a:active, .breadcrumb li.breadcrumb-item > span:hover, .breadcrumb li.breadcrumb-item > span:active {
       background-color: transparent; }
     .breadcrumb li.breadcrumb-item a:visited, .breadcrumb li.breadcrumb-item > span:visited {
@@ -1167,7 +1179,8 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
     .breadcrumb li.breadcrumb-item a:hover, .breadcrumb li.breadcrumb-item a:active, .breadcrumb li.breadcrumb-item a:visited:hover, .breadcrumb li.breadcrumb-item a:visited:active, .breadcrumb li.breadcrumb-item a:not(.disabled):not(:disabled):hover, .breadcrumb li.breadcrumb-item a:not(.disabled):not(:disabled):active, .breadcrumb li.breadcrumb-item > span:hover, .breadcrumb li.breadcrumb-item > span:active, .breadcrumb li.breadcrumb-item > span:visited:hover, .breadcrumb li.breadcrumb-item > span:visited:active, .breadcrumb li.breadcrumb-item > span:not(.disabled):not(:disabled):hover, .breadcrumb li.breadcrumb-item > span:not(.disabled):not(:disabled):active {
       background-color: #dbe0e5;
       color: #2c3237;
-      outline-color: #dbe0e5; }
+      outline-color: #dbe0e5;
+      box-shadow: none; }
     .breadcrumb li.breadcrumb-item a.active, .breadcrumb li.breadcrumb-item > span.active {
       background-color: #343a40;
       outline-color: #343a40;
@@ -1178,7 +1191,8 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
       .breadcrumb li.breadcrumb-item a.active:hover, .breadcrumb li.breadcrumb-item a.active:active, .breadcrumb li.breadcrumb-item a.active:visited:hover, .breadcrumb li.breadcrumb-item a.active:visited:active, .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled):hover, .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled):active, .breadcrumb li.breadcrumb-item > span.active:hover, .breadcrumb li.breadcrumb-item > span.active:active, .breadcrumb li.breadcrumb-item > span.active:visited:hover, .breadcrumb li.breadcrumb-item > span.active:visited:active, .breadcrumb li.breadcrumb-item > span.active:not(.disabled):not(:disabled):hover, .breadcrumb li.breadcrumb-item > span.active:not(.disabled):not(:disabled):active {
         background-color: #343a40;
         color: white;
-        outline-color: #343a40; }
+        outline-color: #343a40;
+        box-shadow: none; }
   .breadcrumb li.breadcrumb-item:not(:first-child) a, .breadcrumb li.breadcrumb-item:not(:first-child) > span {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0; }
@@ -1208,27 +1222,27 @@ nav.pagination {
     padding-left: 0.4rem;
     padding-right: 0.4rem;
     margin-right: 0.05rem;
-    margin-left: 0.05rem; }
+    margin-left: 0.05rem;
+    text-decoration: none; }
     nav.pagination .page-numbers:hover, nav.pagination .page-numbers:active, nav.pagination .next:hover, nav.pagination .next:active, nav.pagination .prev:hover, nav.pagination .prev:active {
       background-color: transparent; }
     nav.pagination .page-numbers:not(.current), nav.pagination .next:not(.current), nav.pagination .prev:not(.current) {
       background-color: #f1f3f5;
       outline-color: #f1f3f5;
       color: #212529;
-      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
+      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0);
+      outline-color: #d2d4d6; }
       nav.pagination .page-numbers:not(.current):visited, nav.pagination .next:not(.current):visited, nav.pagination .prev:not(.current):visited {
         background-color: #f1f3f5;
         color: #212529; }
       nav.pagination .page-numbers:not(.current):hover, nav.pagination .page-numbers:not(.current):active, nav.pagination .page-numbers:not(.current):visited:hover, nav.pagination .page-numbers:not(.current):visited:active, nav.pagination .page-numbers:not(.current):not(.disabled):not(:disabled):hover, nav.pagination .page-numbers:not(.current):not(.disabled):not(:disabled):active, nav.pagination .next:not(.current):hover, nav.pagination .next:not(.current):active, nav.pagination .next:not(.current):visited:hover, nav.pagination .next:not(.current):visited:active, nav.pagination .next:not(.current):not(.disabled):not(:disabled):hover, nav.pagination .next:not(.current):not(.disabled):not(:disabled):active, nav.pagination .prev:not(.current):hover, nav.pagination .prev:not(.current):active, nav.pagination .prev:not(.current):visited:hover, nav.pagination .prev:not(.current):visited:active, nav.pagination .prev:not(.current):not(.disabled):not(:disabled):hover, nav.pagination .prev:not(.current):not(.disabled):not(:disabled):active {
         background-color: #d2d4d6;
         color: #2c3237;
-        outline-color: #d2d4d6; }
+        outline-color: #d2d4d6;
+        box-shadow: none; }
     nav.pagination .page-numbers.current, nav.pagination .next.current, nav.pagination .prev.current {
       background-color: #e33d22;
       color: #fefefe; }
-      nav.pagination .page-numbers.current:hover, nav.pagination .next.current:hover, nav.pagination .prev.current:hover {
-        background-color: #e33d22;
-        color: #fefefe; }
 
 /*
  * 2. Cards and containers
@@ -1382,6 +1396,7 @@ ul.card-list, .card > ul {
     margin: 0;
     justify-content: space-between;
     align-items: center;
+    text-decoration: none;
     word-wrap: none;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -1463,8 +1478,6 @@ ul.card-list, .card > ul {
       margin-bottom: 0.8rem; }
       .toast > *:last-child.card-header {
         margin-bottom: 0px; }
-  .toast a:not(:hover) {
-    background-color: rgba(0, 0, 0, 0.2) !important; }
   .toast a {
     margin: 0; }
 
@@ -1551,363 +1564,249 @@ textarea {
 .bg-blue {
   background-color: #339af0;
   color: #fefefe; }
-  .bg-blue > a, .bg-blue > a:visited {
+  .bg-blue a {
-    color: #339af0;
+    color: currentColor;
-    background-color: #fefefe; }
+    outline-color: currentColor; }
-    .bg-blue > a:hover, .bg-blue > a:active, .bg-blue > a:visited, .bg-blue > a:visited:hover, .bg-blue > a:visited:active, .bg-blue > a:visited:visited {
-      color: #fefefe;
-      background: none; }
   .bg-blue:hover {
     background-color: #339af0;
     color: #fefefe; }
-    .bg-blue:hover > a, .bg-blue:hover > a:visited {
+    .bg-blue:hover a {
-      color: #339af0;
+      color: currentColor;
-      background-color: #fefefe; }
+      outline-color: currentColor; }
-      .bg-blue:hover > a:hover, .bg-blue:hover > a:active, .bg-blue:hover > a:visited, .bg-blue:hover > a:visited:hover, .bg-blue:hover > a:visited:active, .bg-blue:hover > a:visited:visited {
-        color: #fefefe;
-        background: none; }
 
 .bg-violet {
   background-color: #845ef7;
   color: #fefefe; }
-  .bg-violet > a, .bg-violet > a:visited {
+  .bg-violet a {
-    color: #845ef7;
+    color: currentColor;
-    background-color: #fefefe; }
+    outline-color: currentColor; }
-    .bg-violet > a:hover, .bg-violet > a:active, .bg-violet > a:visited, .bg-violet > a:visited:hover, .bg-violet > a:visited:active, .bg-violet > a:visited:visited {
-      color: #fefefe;
-      background: none; }
   .bg-violet:hover {
     background-color: #845ef7;
     color: #fefefe; }
-    .bg-violet:hover > a, .bg-violet:hover > a:visited {
+    .bg-violet:hover a {
-      color: #845ef7;
+      color: currentColor;
-      background-color: #fefefe; }
+      outline-color: currentColor; }
-      .bg-violet:hover > a:hover, .bg-violet:hover > a:active, .bg-violet:hover > a:visited, .bg-violet:hover > a:visited:hover, .bg-violet:hover > a:visited:active, .bg-violet:hover > a:visited:visited {
-        color: #fefefe;
-        background: none; }
 
 .bg-red {
   background-color: #e33d22;
   color: #fefefe; }
-  .bg-red > a, .bg-red > a:visited {
+  .bg-red a {
-    color: #e33d22;
+    color: currentColor;
-    background-color: #fefefe; }
+    outline-color: currentColor; }
-    .bg-red > a:hover, .bg-red > a:active, .bg-red > a:visited, .bg-red > a:visited:hover, .bg-red > a:visited:active, .bg-red > a:visited:visited {
-      color: #fefefe;
-      background: none; }
   .bg-red:hover {
     background-color: #e33d22;
     color: #fefefe; }
-    .bg-red:hover > a, .bg-red:hover > a:visited {
+    .bg-red:hover a {
-      color: #e33d22;
+      color: currentColor;
-      background-color: #fefefe; }
+      outline-color: currentColor; }
-      .bg-red:hover > a:hover, .bg-red:hover > a:active, .bg-red:hover > a:visited, .bg-red:hover > a:visited:hover, .bg-red:hover > a:visited:active, .bg-red:hover > a:visited:visited {
-        color: #fefefe;
-        background: none; }
 
 .bg-orange {
   background-color: #ff922b;
   color: #fefefe; }
-  .bg-orange > a, .bg-orange > a:visited {
+  .bg-orange a {
-    color: #ff922b;
+    color: currentColor;
-    background-color: #fefefe; }
+    outline-color: currentColor; }
-    .bg-orange > a:hover, .bg-orange > a:active, .bg-orange > a:visited, .bg-orange > a:visited:hover, .bg-orange > a:visited:active, .bg-orange > a:visited:visited {
-      color: #fefefe;
-      background: none; }
   .bg-orange:hover {
     background-color: #ff922b;
     color: #fefefe; }
-    .bg-orange:hover > a, .bg-orange:hover > a:visited {
+    .bg-orange:hover a {
-      color: #ff922b;
+      color: currentColor;
-      background-color: #fefefe; }
+      outline-color: currentColor; }
-      .bg-orange:hover > a:hover, .bg-orange:hover > a:active, .bg-orange:hover > a:visited, .bg-orange:hover > a:visited:hover, .bg-orange:hover > a:visited:active, .bg-orange:hover > a:visited:visited {
-        color: #fefefe;
-        background: none; }
 
 .bg-green {
   background-color: #51cf66;
   color: #fefefe; }
-  .bg-green > a, .bg-green > a:visited {
+  .bg-green a {
-    color: #51cf66;
+    color: currentColor;
-    background-color: #fefefe; }
+    outline-color: currentColor; }
-    .bg-green > a:hover, .bg-green > a:active, .bg-green > a:visited, .bg-green > a:visited:hover, .bg-green > a:visited:active, .bg-green > a:visited:visited {
-      color: #fefefe;
-      background: none; }
   .bg-green:hover {
     background-color: #51cf66;
     color: #fefefe; }
-    .bg-green:hover > a, .bg-green:hover > a:visited {
+    .bg-green:hover a {
-      color: #51cf66;
+      color: currentColor;
-      background-color: #fefefe; }
+      outline-color: currentColor; }
-      .bg-green:hover > a:hover, .bg-green:hover > a:active, .bg-green:hover > a:visited, .bg-green:hover > a:visited:hover, .bg-green:hover > a:visited:active, .bg-green:hover > a:visited:visited {
-        color: #fefefe;
-        background: none; }
 
 .bg-skyblue {
   background-color: #3bc9db;
   color: #fefefe; }
-  .bg-skyblue > a, .bg-skyblue > a:visited {
+  .bg-skyblue a {
-    color: #3bc9db;
+    color: currentColor;
-    background-color: #fefefe; }
+    outline-color: currentColor; }
-    .bg-skyblue > a:hover, .bg-skyblue > a:active, .bg-skyblue > a:visited, .bg-skyblue > a:visited:hover, .bg-skyblue > a:visited:active, .bg-skyblue > a:visited:visited {
-      color: #fefefe;
-      background: none; }
   .bg-skyblue:hover {
     background-color: #3bc9db;
     color: #fefefe; }
-    .bg-skyblue:hover > a, .bg-skyblue:hover > a:visited {
+    .bg-skyblue:hover a {
-      color: #3bc9db;
+      color: currentColor;
-      background-color: #fefefe; }
+      outline-color: currentColor; }
-      .bg-skyblue:hover > a:hover, .bg-skyblue:hover > a:active, .bg-skyblue:hover > a:visited, .bg-skyblue:hover > a:visited:hover, .bg-skyblue:hover > a:visited:active, .bg-skyblue:hover > a:visited:visited {
-        color: #fefefe;
-        background: none; }
 
 .bg-dark {
   background-color: #343a40;
   color: #fefefe; }
-  .bg-dark > a, .bg-dark > a:visited {
+  .bg-dark a {
-    color: #343a40;
+    color: currentColor;
-    background-color: #fefefe; }
+    outline-color: currentColor; }
-    .bg-dark > a:hover, .bg-dark > a:active, .bg-dark > a:visited, .bg-dark > a:visited:hover, .bg-dark > a:visited:active, .bg-dark > a:visited:visited {
-      color: #fefefe;
-      background: none; }
   .bg-dark:hover {
     background-color: #343a40;
     color: #fefefe; }
-    .bg-dark:hover > a, .bg-dark:hover > a:visited {
+    .bg-dark:hover a {
-      color: #343a40;
+      color: currentColor;
-      background-color: #fefefe; }
+      outline-color: currentColor; }
-      .bg-dark:hover > a:hover, .bg-dark:hover > a:active, .bg-dark:hover > a:visited, .bg-dark:hover > a:visited:hover, .bg-dark:hover > a:visited:active, .bg-dark:hover > a:visited:visited {
-        color: #fefefe;
-        background: none; }
 
 .bg-light {
   background-color: #fefefe;
   color: #212529; }
-  .bg-light > a, .bg-light > a:visited {
+  .bg-light a {
-    color: #fefefe;
+    color: currentColor;
-    background-color: #212529; }
+    outline-color: currentColor; }
-    .bg-light > a:hover, .bg-light > a:active, .bg-light > a:visited, .bg-light > a:visited:hover, .bg-light > a:visited:active, .bg-light > a:visited:visited {
-      color: #212529;
-      background: none; }
   .bg-light:hover {
     background-color: #fefefe;
     color: #212529; }
-    .bg-light:hover > a, .bg-light:hover > a:visited {
+    .bg-light:hover a {
-      color: #fefefe;
+      color: currentColor;
-      background-color: #212529; }
+      outline-color: currentColor; }
-      .bg-light:hover > a:hover, .bg-light:hover > a:active, .bg-light:hover > a:visited, .bg-light:hover > a:visited:hover, .bg-light:hover > a:visited:active, .bg-light:hover > a:visited:visited {
-        color: #212529;
-        background: none; }
 
 .bg-yellow {
   background-color: #fcc419;
   color: #fefefe; }
-  .bg-yellow > a, .bg-yellow > a:visited {
+  .bg-yellow a {
-    color: #fcc419;
+    color: currentColor;
-    background-color: #fefefe; }
+    outline-color: currentColor; }
-    .bg-yellow > a:hover, .bg-yellow > a:active, .bg-yellow > a:visited, .bg-yellow > a:visited:hover, .bg-yellow > a:visited:active, .bg-yellow > a:visited:visited {
-      color: #fefefe;
-      background: none; }
   .bg-yellow:hover {
     background-color: #fcc419;
     color: #fefefe; }
-    .bg-yellow:hover > a, .bg-yellow:hover > a:visited {
+    .bg-yellow:hover a {
-      color: #fcc419;
+      color: currentColor;
-      background-color: #fefefe; }
+      outline-color: currentColor; }
-      .bg-yellow:hover > a:hover, .bg-yellow:hover > a:active, .bg-yellow:hover > a:visited, .bg-yellow:hover > a:visited:hover, .bg-yellow:hover > a:visited:active, .bg-yellow:hover > a:visited:visited {
-        color: #fefefe;
-        background: none; }
 
 .bg-grey {
   background-color: #adb5bd;
   color: #fefefe; }
-  .bg-grey > a, .bg-grey > a:visited {
+  .bg-grey a {
-    color: #adb5bd;
+    color: currentColor;
-    background-color: #fefefe; }
+    outline-color: currentColor; }
-    .bg-grey > a:hover, .bg-grey > a:active, .bg-grey > a:visited, .bg-grey > a:visited:hover, .bg-grey > a:visited:active, .bg-grey > a:visited:visited {
-      color: #fefefe;
-      background: none; }
   .bg-grey:hover {
     background-color: #adb5bd;
     color: #fefefe; }
-    .bg-grey:hover > a, .bg-grey:hover > a:visited {
+    .bg-grey:hover a {
-      color: #adb5bd;
+      color: currentColor;
-      background-color: #fefefe; }
+      outline-color: currentColor; }
-      .bg-grey:hover > a:hover, .bg-grey:hover > a:active, .bg-grey:hover > a:visited, .bg-grey:hover > a:visited:hover, .bg-grey:hover > a:visited:active, .bg-grey:hover > a:visited:visited {
-        color: #fefefe;
-        background: none; }
 
 .bg-dark2 {
   background-color: #212529;
   color: #fefefe; }
-  .bg-dark2 > a, .bg-dark2 > a:visited {
+  .bg-dark2 a {
-    color: #212529;
+    color: currentColor;
-    background-color: #fefefe; }
+    outline-color: currentColor; }
-    .bg-dark2 > a:hover, .bg-dark2 > a:active, .bg-dark2 > a:visited, .bg-dark2 > a:visited:hover, .bg-dark2 > a:visited:active, .bg-dark2 > a:visited:visited {
-      color: #fefefe;
-      background: none; }
   .bg-dark2:hover {
     background-color: #212529;
     color: #fefefe; }
-    .bg-dark2:hover > a, .bg-dark2:hover > a:visited {
+    .bg-dark2:hover a {
-      color: #212529;
+      color: currentColor;
-      background-color: #fefefe; }
+      outline-color: currentColor; }
-      .bg-dark2:hover > a:hover, .bg-dark2:hover > a:active, .bg-dark2:hover > a:visited, .bg-dark2:hover > a:visited:hover, .bg-dark2:hover > a:visited:active, .bg-dark2:hover > a:visited:visited {
-        color: #fefefe;
-        background: none; }
 
 .bg-light2 {
   background-color: #f1f3f5;
   color: #212529; }
-  .bg-light2 > a, .bg-light2 > a:visited {
+  .bg-light2 a {
-    color: #f1f3f5;
+    color: currentColor;
-    background-color: #212529; }
+    outline-color: currentColor; }
-    .bg-light2 > a:hover, .bg-light2 > a:active, .bg-light2 > a:visited, .bg-light2 > a:visited:hover, .bg-light2 > a:visited:active, .bg-light2 > a:visited:visited {
-      color: #212529;
-      background: none; }
   .bg-light2:hover {
     background-color: #f1f3f5;
     color: #212529; }
-    .bg-light2:hover > a, .bg-light2:hover > a:visited {
+    .bg-light2:hover a {
-      color: #f1f3f5;
+      color: currentColor;
-      background-color: #212529; }
+      outline-color: currentColor; }
-      .bg-light2:hover > a:hover, .bg-light2:hover > a:active, .bg-light2:hover > a:visited, .bg-light2:hover > a:visited:hover, .bg-light2:hover > a:visited:active, .bg-light2:hover > a:visited:visited {
-        color: #212529;
-        background: none; }
 
 .bg-primary {
   background-color: #e33d22;
   color: #fefefe; }
-  .bg-primary > a, .bg-primary > a:visited {
+  .bg-primary a {
-    color: #e33d22;
+    color: currentColor;
-    background-color: #fefefe; }
+    outline-color: currentColor; }
-    .bg-primary > a:hover, .bg-primary > a:active, .bg-primary > a:visited, .bg-primary > a:visited:hover, .bg-primary > a:visited:active, .bg-primary > a:visited:visited {
-      color: #fefefe;
-      background: none; }
   .bg-primary:hover {
     background-color: #e33d22;
     color: #fefefe; }
-    .bg-primary:hover > a, .bg-primary:hover > a:visited {
+    .bg-primary:hover a {
-      color: #e33d22;
+      color: currentColor;
-      background-color: #fefefe; }
+      outline-color: currentColor; }
-      .bg-primary:hover > a:hover, .bg-primary:hover > a:active, .bg-primary:hover > a:visited, .bg-primary:hover > a:visited:hover, .bg-primary:hover > a:visited:active, .bg-primary:hover > a:visited:visited {
-        color: #fefefe;
-        background: none; }
 
 .bg-secondary {
   background-color: #343a40;
   color: #fefefe; }
-  .bg-secondary > a, .bg-secondary > a:visited {
+  .bg-secondary a {
-    color: #343a40;
+    color: currentColor;
-    background-color: #fefefe; }
+    outline-color: currentColor; }
-    .bg-secondary > a:hover, .bg-secondary > a:active, .bg-secondary > a:visited, .bg-secondary > a:visited:hover, .bg-secondary > a:visited:active, .bg-secondary > a:visited:visited {
-      color: #fefefe;
-      background: none; }
   .bg-secondary:hover {
     background-color: #343a40;
     color: #fefefe; }
-    .bg-secondary:hover > a, .bg-secondary:hover > a:visited {
+    .bg-secondary:hover a {
-      color: #343a40;
+      color: currentColor;
-      background-color: #fefefe; }
+      outline-color: currentColor; }
-      .bg-secondary:hover > a:hover, .bg-secondary:hover > a:active, .bg-secondary:hover > a:visited, .bg-secondary:hover > a:visited:hover, .bg-secondary:hover > a:visited:active, .bg-secondary:hover > a:visited:visited {
-        color: #fefefe;
-        background: none; }
 
 .bg-warning {
   background-color: #ff922b;
   color: #fefefe; }
-  .bg-warning > a, .bg-warning > a:visited {
+  .bg-warning a {
-    color: #ff922b;
+    color: currentColor;
-    background-color: #fefefe; }
+    outline-color: currentColor; }
-    .bg-warning > a:hover, .bg-warning > a:active, .bg-warning > a:visited, .bg-warning > a:visited:hover, .bg-warning > a:visited:active, .bg-warning > a:visited:visited {
-      color: #fefefe;
-      background: none; }
   .bg-warning:hover {
     background-color: #ff922b;
     color: #fefefe; }
-    .bg-warning:hover > a, .bg-warning:hover > a:visited {
+    .bg-warning:hover a {
-      color: #ff922b;
+      color: currentColor;
-      background-color: #fefefe; }
+      outline-color: currentColor; }
-      .bg-warning:hover > a:hover, .bg-warning:hover > a:active, .bg-warning:hover > a:visited, .bg-warning:hover > a:visited:hover, .bg-warning:hover > a:visited:active, .bg-warning:hover > a:visited:visited {
-        color: #fefefe;
-        background: none; }
 
 .bg-danger {
   background-color: #e33d22;
   color: #fefefe; }
-  .bg-danger > a, .bg-danger > a:visited {
+  .bg-danger a {
-    color: #e33d22;
+    color: currentColor;
-    background-color: #fefefe; }
+    outline-color: currentColor; }
-    .bg-danger > a:hover, .bg-danger > a:active, .bg-danger > a:visited, .bg-danger > a:visited:hover, .bg-danger > a:visited:active, .bg-danger > a:visited:visited {
-      color: #fefefe;
-      background: none; }
   .bg-danger:hover {
     background-color: #e33d22;
     color: #fefefe; }
-    .bg-danger:hover > a, .bg-danger:hover > a:visited {
+    .bg-danger:hover a {
-      color: #e33d22;
+      color: currentColor;
-      background-color: #fefefe; }
+      outline-color: currentColor; }
-      .bg-danger:hover > a:hover, .bg-danger:hover > a:active, .bg-danger:hover > a:visited, .bg-danger:hover > a:visited:hover, .bg-danger:hover > a:visited:active, .bg-danger:hover > a:visited:visited {
-        color: #fefefe;
-        background: none; }
 
 .bg-info {
   background-color: #3bc9db;
   color: #fefefe; }
-  .bg-info > a, .bg-info > a:visited {
+  .bg-info a {
-    color: #3bc9db;
+    color: currentColor;
-    background-color: #fefefe; }
+    outline-color: currentColor; }
-    .bg-info > a:hover, .bg-info > a:active, .bg-info > a:visited, .bg-info > a:visited:hover, .bg-info > a:visited:active, .bg-info > a:visited:visited {
-      color: #fefefe;
-      background: none; }
   .bg-info:hover {
     background-color: #3bc9db;
     color: #fefefe; }
-    .bg-info:hover > a, .bg-info:hover > a:visited {
+    .bg-info:hover a {
-      color: #3bc9db;
+      color: currentColor;
-      background-color: #fefefe; }
+      outline-color: currentColor; }
-      .bg-info:hover > a:hover, .bg-info:hover > a:active, .bg-info:hover > a:visited, .bg-info:hover > a:visited:hover, .bg-info:hover > a:visited:active, .bg-info:hover > a:visited:visited {
-        color: #fefefe;
-        background: none; }
 
 .bg-success {
   background-color: #51cf66;
   color: #fefefe; }
-  .bg-success > a, .bg-success > a:visited {
+  .bg-success a {
-    color: #51cf66;
+    color: currentColor;
-    background-color: #fefefe; }
+    outline-color: currentColor; }
-    .bg-success > a:hover, .bg-success > a:active, .bg-success > a:visited, .bg-success > a:visited:hover, .bg-success > a:visited:active, .bg-success > a:visited:visited {
-      color: #fefefe;
-      background: none; }
   .bg-success:hover {
     background-color: #51cf66;
     color: #fefefe; }
-    .bg-success:hover > a, .bg-success:hover > a:visited {
+    .bg-success:hover a {
-      color: #51cf66;
+      color: currentColor;
-      background-color: #fefefe; }
+      outline-color: currentColor; }
-      .bg-success:hover > a:hover, .bg-success:hover > a:active, .bg-success:hover > a:visited, .bg-success:hover > a:visited:hover, .bg-success:hover > a:visited:active, .bg-success:hover > a:visited:visited {
-        color: #fefefe;
-        background: none; }
 
 .bg-muted {
   background-color: #adb5bd;
   color: #fefefe; }
-  .bg-muted > a, .bg-muted > a:visited {
+  .bg-muted a {
-    color: #adb5bd;
+    color: currentColor;
-    background-color: #fefefe; }
+    outline-color: currentColor; }
-    .bg-muted > a:hover, .bg-muted > a:active, .bg-muted > a:visited, .bg-muted > a:visited:hover, .bg-muted > a:visited:active, .bg-muted > a:visited:visited {
-      color: #fefefe;
-      background: none; }
   .bg-muted:hover {
     background-color: #adb5bd;
     color: #fefefe; }
-    .bg-muted:hover > a, .bg-muted:hover > a:visited {
+    .bg-muted:hover a {
-      color: #adb5bd;
+      color: currentColor;
-      background-color: #fefefe; }
+      outline-color: currentColor; }
-      .bg-muted:hover > a:hover, .bg-muted:hover > a:active, .bg-muted:hover > a:visited, .bg-muted:hover > a:visited:hover, .bg-muted:hover > a:visited:active, .bg-muted:hover > a:visited:visited {
-        color: #fefefe;
-        background: none; }
 
 .text-blue {
   color: #339af0; }
@@ -1977,7 +1876,8 @@ textarea {
   .btn-blue:hover, .btn-blue:active, .btn-blue:visited:hover, .btn-blue:visited:active, .btn-blue:not(.disabled):not(:disabled):hover, .btn-blue:not(.disabled):not(:disabled):active {
     background-color: #51a9f2;
     color: white;
-    outline-color: #51a9f2; }
+    outline-color: #51a9f2;
+    box-shadow: none; }
 
 .btn-violet {
   background-color: #845ef7;
@@ -1990,7 +1890,8 @@ textarea {
   .btn-violet:hover, .btn-violet:active, .btn-violet:visited:hover, .btn-violet:visited:active, .btn-violet:not(.disabled):not(:disabled):hover, .btn-violet:not(.disabled):not(:disabled):active {
     background-color: #9676f8;
     color: white;
-    outline-color: #9676f8; }
+    outline-color: #9676f8;
+    box-shadow: none; }
 
 .btn-red {
   background-color: #e33d22;
@@ -2003,7 +1904,8 @@ textarea {
   .btn-red:hover, .btn-red:active, .btn-red:visited:hover, .btn-red:visited:active, .btn-red:not(.disabled):not(:disabled):hover, .btn-red:not(.disabled):not(:disabled):active {
     background-color: #e75a43;
     color: white;
-    outline-color: #e75a43; }
+    outline-color: #e75a43;
+    box-shadow: none; }
 
 .btn-orange {
   background-color: #ff922b;
@@ -2016,7 +1918,8 @@ textarea {
   .btn-orange:hover, .btn-orange:active, .btn-orange:visited:hover, .btn-orange:visited:active, .btn-orange:not(.disabled):not(:disabled):hover, .btn-orange:not(.disabled):not(:disabled):active {
     background-color: #ffa24b;
     color: white;
-    outline-color: #ffa24b; }
+    outline-color: #ffa24b;
+    box-shadow: none; }
 
 .btn-green {
   background-color: #51cf66;
@@ -2029,7 +1932,8 @@ textarea {
   .btn-green:hover, .btn-green:active, .btn-green:visited:hover, .btn-green:visited:active, .btn-green:not(.disabled):not(:disabled):hover, .btn-green:not(.disabled):not(:disabled):active {
     background-color: #6bd67d;
     color: white;
-    outline-color: #6bd67d; }
+    outline-color: #6bd67d;
+    box-shadow: none; }
 
 .btn-skyblue {
   background-color: #3bc9db;
@@ -2042,7 +1946,8 @@ textarea {
   .btn-skyblue:hover, .btn-skyblue:active, .btn-skyblue:visited:hover, .btn-skyblue:visited:active, .btn-skyblue:not(.disabled):not(:disabled):hover, .btn-skyblue:not(.disabled):not(:disabled):active {
     background-color: #58d1e0;
     color: white;
-    outline-color: #58d1e0; }
+    outline-color: #58d1e0;
+    box-shadow: none; }
 
 .btn-dark {
   background-color: #343a40;
@@ -2055,7 +1960,8 @@ textarea {
   .btn-dark:hover, .btn-dark:active, .btn-dark:visited:hover, .btn-dark:visited:active, .btn-dark:not(.disabled):not(:disabled):hover, .btn-dark:not(.disabled):not(:disabled):active {
     background-color: #52575d;
     color: white;
-    outline-color: #52575d; }
+    outline-color: #52575d;
+    box-shadow: none; }
 
 .btn-light {
   background-color: #fefefe;
@@ -2068,7 +1974,8 @@ textarea {
   .btn-light:hover, .btn-light:active, .btn-light:visited:hover, .btn-light:visited:active, .btn-light:not(.disabled):not(:disabled):hover, .btn-light:not(.disabled):not(:disabled):active {
     background-color: #ddddde;
     color: #2c3237;
-    outline-color: #ddddde; }
+    outline-color: #ddddde;
+    box-shadow: none; }
 
 .btn-yellow {
   background-color: #fcc419;
@@ -2081,7 +1988,8 @@ textarea {
   .btn-yellow:hover, .btn-yellow:active, .btn-yellow:visited:hover, .btn-yellow:visited:active, .btn-yellow:not(.disabled):not(:disabled):hover, .btn-yellow:not(.disabled):not(:disabled):active {
     background-color: #fccd3b;
     color: white;
-    outline-color: #fccd3b; }
+    outline-color: #fccd3b;
+    box-shadow: none; }
 
 .btn-grey {
   background-color: #adb5bd;
@@ -2094,7 +2002,8 @@ textarea {
   .btn-grey:hover, .btn-grey:active, .btn-grey:visited:hover, .btn-grey:visited:active, .btn-grey:not(.disabled):not(:disabled):hover, .btn-grey:not(.disabled):not(:disabled):active {
     background-color: #b9c0c7;
     color: white;
-    outline-color: #b9c0c7; }
+    outline-color: #b9c0c7;
+    box-shadow: none; }
 
 .btn-dark2 {
   background-color: #212529;
@@ -2107,7 +2016,8 @@ textarea {
   .btn-dark2:hover, .btn-dark2:active, .btn-dark2:visited:hover, .btn-dark2:visited:active, .btn-dark2:not(.disabled):not(:disabled):hover, .btn-dark2:not(.disabled):not(:disabled):active {
     background-color: #424649;
     color: white;
-    outline-color: #424649; }
+    outline-color: #424649;
+    box-shadow: none; }
 
 .btn-light2 {
   background-color: #f1f3f5;
@@ -2120,7 +2030,8 @@ textarea {
   .btn-light2:hover, .btn-light2:active, .btn-light2:visited:hover, .btn-light2:visited:active, .btn-light2:not(.disabled):not(:disabled):hover, .btn-light2:not(.disabled):not(:disabled):active {
     background-color: #d2d4d6;
     color: #2c3237;
-    outline-color: #d2d4d6; }
+    outline-color: #d2d4d6;
+    box-shadow: none; }
 
 .btn-primary {
   background-color: #e33d22;
@@ -2133,7 +2044,8 @@ textarea {
   .btn-primary:hover, .btn-primary:active, .btn-primary:visited:hover, .btn-primary:visited:active, .btn-primary:not(.disabled):not(:disabled):hover, .btn-primary:not(.disabled):not(:disabled):active {
     background-color: #e75a43;
     color: white;
-    outline-color: #e75a43; }
+    outline-color: #e75a43;
+    box-shadow: none; }
 
 .btn-secondary {
   background-color: #343a40;
@@ -2146,7 +2058,8 @@ textarea {
   .btn-secondary:hover, .btn-secondary:active, .btn-secondary:visited:hover, .btn-secondary:visited:active, .btn-secondary:not(.disabled):not(:disabled):hover, .btn-secondary:not(.disabled):not(:disabled):active {
     background-color: #52575d;
     color: white;
-    outline-color: #52575d; }
+    outline-color: #52575d;
+    box-shadow: none; }
 
 .btn-warning {
   background-color: #ff922b;
@@ -2159,7 +2072,8 @@ textarea {
   .btn-warning:hover, .btn-warning:active, .btn-warning:visited:hover, .btn-warning:visited:active, .btn-warning:not(.disabled):not(:disabled):hover, .btn-warning:not(.disabled):not(:disabled):active {
     background-color: #ffa24b;
     color: white;
-    outline-color: #ffa24b; }
+    outline-color: #ffa24b;
+    box-shadow: none; }
 
 .btn-danger {
   background-color: #e33d22;
@@ -2172,7 +2086,8 @@ textarea {
   .btn-danger:hover, .btn-danger:active, .btn-danger:visited:hover, .btn-danger:visited:active, .btn-danger:not(.disabled):not(:disabled):hover, .btn-danger:not(.disabled):not(:disabled):active {
     background-color: #e75a43;
     color: white;
-    outline-color: #e75a43; }
+    outline-color: #e75a43;
+    box-shadow: none; }
 
 .btn-info {
   background-color: #3bc9db;
@@ -2185,7 +2100,8 @@ textarea {
   .btn-info:hover, .btn-info:active, .btn-info:visited:hover, .btn-info:visited:active, .btn-info:not(.disabled):not(:disabled):hover, .btn-info:not(.disabled):not(:disabled):active {
     background-color: #58d1e0;
     color: white;
-    outline-color: #58d1e0; }
+    outline-color: #58d1e0;
+    box-shadow: none; }
 
 .btn-success {
   background-color: #51cf66;
@@ -2198,7 +2114,8 @@ textarea {
   .btn-success:hover, .btn-success:active, .btn-success:visited:hover, .btn-success:visited:active, .btn-success:not(.disabled):not(:disabled):hover, .btn-success:not(.disabled):not(:disabled):active {
     background-color: #6bd67d;
     color: white;
-    outline-color: #6bd67d; }
+    outline-color: #6bd67d;
+    box-shadow: none; }
 
 .btn-muted {
   background-color: #adb5bd;
@@ -2211,7 +2128,8 @@ textarea {
   .btn-muted:hover, .btn-muted:active, .btn-muted:visited:hover, .btn-muted:visited:active, .btn-muted:not(.disabled):not(:disabled):hover, .btn-muted:not(.disabled):not(:disabled):active {
     background-color: #b9c0c7;
     color: white;
-    outline-color: #b9c0c7; }
+    outline-color: #b9c0c7;
+    box-shadow: none; }
 
 .head-blue .card-header, .head-blue .menu-header, .head-blue.header-bg th {
   background-color: #339af0;
@@ -2798,10 +2716,7 @@ footer {
   padding-bottom: 1.5rem; }
   footer .columns {
     font-size: 0.8rem; }
-    footer .columns a:hover, footer .columns a:active, footer .columns a:visited,
+    footer .columns a {
-    footer .columns a:visited:hover,
-    footer .columns a:visited:active,
-    footer .columns a:visited:visited {
       color: #fefefe; }
 
 .home-toast {
@@ -2813,42 +2728,48 @@ footer {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: auto;
-  grid-gap: 1.6rem;
+  grid-gap: 0.5333333333rem;
+  margin: -0.5333333333rem;
   padding-bottom: 1.6rem; }
   @media (min-width: 768px) {
     .preview-grid {
       grid-template-columns: 1fr 1fr; } }
-  @media (min-width: 1200px) {
+  @media (min-width: 992px) {
     .preview-grid {
       grid-template-columns: 1fr 1fr 1fr; } }
-  @media (min-width: 1600px) {
+  @media (min-width: 1200px) {
     .preview-grid {
       grid-template-columns: 1fr 1fr 1fr 1fr; } }
+.preview-list .preview {
+  display: block; }
+
 @media (min-width: 576px) {
-  .preview-list .preview-thumbnail a {
+  .preview-list .preview-thumbnail img {
     width: 240px;
     margin-right: 0.8rem; }
   .preview-list .preview {
     display: flex;
-    align-items: center;
+    align-items: start;
     margin-bottom: 1.6rem; } }
 
 @media (min-width: 1200px) {
-  .preview-list .preview-thumbnail a {
+  .preview-list .preview-thumbnail img {
     width: 320px; } }
 
 .preview {
-  font-size: 0.8rem; }
+  font-size: 0.8rem;
+  text-decoration: none;
+  padding: 0.5333333333rem;
+  border-radius: 8px; }
 
-.preview-thumbnail a {
+.preview-thumbnail {
   display: block;
   width: 100%;
   background-color: transparent;
-  margin: auto;
   object-fit: cover;
   padding: 0;
   line-height: 0; }
-  .preview-thumbnail a img {
+  .preview-thumbnail img {
     width: 100%;
     object-fit: cover;
     height: auto;
@@ -2860,11 +2781,15 @@ footer {
   line-height: 1.5rem;
   font-family: Teko, sans-serif;
   font-weight: 800;
-  height: 3rem; }
+  height: 3rem;
+  color: #212529; }
   .preview h2 a, .preview-featured h2 a {
     background-color: transparent !important;
     color: #212529; }
 
+.preview-featured h2 {
+  color: #fefefe; }
+
 .preview-excerpt {
   margin-top: 0.8rem;
   font-size: 0.8rem;
@@ -2886,7 +2811,8 @@ footer {
     display: block;
     padding: 0;
     border-radius: 8px;
-    overflow: hidden; }
+    overflow: hidden;
+    text-decoration: none; }
     .preview-featured .preview-link .preview-item {
       width: 100%;
       height: auto;