add structure and css for website display

src/css/layout/_main.scss

@@ -6,17 +6,42 @@
     margin: 8em 0;
 
     > section {
-      width: 100%;
+      width: 61.805%;
-      max-width: 800px;
       margin: 8em auto;
       background-color: #fff;
 
-      > div {
+      &:hover {
-        width: 100%;
+        cursor: pointer;
-        padding-bottom: 50%;
+      }
+
+      > a {
+        all: initial;
+        all: unset;
+
+        > div {
+          width: 100%;
+          height: 0;
+          padding-bottom: 61.805%;
+          overflow: hidden;
+
+          > picture > img {
+            width: 100%;
+            @include vendor('transition', (
+              'filter #{_duration(transition2)} ease',
+              'transform #{_duration(slow-transition)} ease'
+            ));
+            @include vendor('filter', 'brightness(1.15) contrast(0.8) grayscale(1)');
+            @include vendor('transform', 'scale(1)');
+
+            &:hover {
+              @include vendor('filter', 'brightness(1.0) contrast(1.0) grayscale(0.2)');
+              @include vendor('transform', 'scale(1.2)');
+            }
+          }
+        }
       }
     }
-    /*
+
         @include breakpoint('<=xlarge') {
 
         }
@@ -32,15 +57,15 @@
         @include breakpoint('<=small') {
 
         }
-*/
+
         @include breakpoint('<=xsmall') {
           > section {
             margin: 2em auto;
           }
         }
-/*
+
         @include breakpoint('<=xxsmall') {
 
         }
-    */
+
   }

src/index.html

@@ -93,8 +93,16 @@
 
 <div id="main">
   <section>
-    <div>
+    <a target="_blank" rel="noopener" href="https://schulze-uebersetzungen.eu">
-    </div>
+      <div>
+      <picture id="letters">
+        <source srcset="/img/site/schulze-uebersetzungen/letters@1.00x.webp" type="image/webp">
+        <source srcset="/img/site/schulze-uebersetzungen/letters@1.00x.png" type="image/png">
+        <img src="/img/site/schulze-uebersetzungen/letters@1.00x.png" alt="schulze-uebersetzungen">
+      </picture>
+      <h2>schulze-uebersetzungen</h2>
+      </div>
+    </a>
   </section>
   <section>
     <div>