improved mobile layout centered front and responsive card added about heading and grid for expanded view

assets/css/style.css

@@ -2,7 +2,7 @@
     --height: 300px;
     --width: 550px;
     --width-expanded: min(780px, calc(100vw - 40px));
-    --height-expanded: min(615px, calc(100dvh - 40px));
+    --height-expanded: min(640px, calc(100dvh - 40px));
 }
 
 @font-face {
@@ -202,6 +202,13 @@ body {
     transition: opacity 0.2s 0.1s, visibility 0s;
 }
 
+.card .details h2 {
+    margin: 0 0 6px 0;
+    font-size: 0.85em;
+    font-weight: 300;
+    color: #606060;
+}
+
 .card .details p {
     margin: 0;
     line-height: 1.4em;
@@ -426,10 +433,10 @@ li .spacer {
 
 @media only screen and (max-width: 600px) {
     :root {
-        --height: 550px;
-        --width: 300px;
-        --width-expanded: var(--width);
-        --height-expanded: min(700px, calc(100dvh - 80px));
+        --width: min(300px, calc(100vw - 32px));
+        --height: min(550px, calc(100dvh - 110px));
+        --width-expanded: min(440px, calc(100vw - 24px));
+        --height-expanded: calc(100dvh - 110px);
     }
     .card .front, .card .back-main {
         flex-direction: column;
@@ -440,24 +447,53 @@ li .spacer {
     .card .back {
         transform: rotateY(180deg);
     }
-    .card .back-main {
-        justify-content: space-evenly;
+    .card .front img {
+        max-height: min(200px, 30dvh);
     }
-    .card .details {
-        padding: 0 25px 25px 25px;
+    .card .front hr, .card .back hr {
+        width: calc(var(--width) / 2);
+        height: 0px;
+
+        border-radius: 10px;
+        border: 2px dashed lightgray;
+
+        margin: 0;
+    }
+    .card .front .name {
+        margin-top: 25px;
+        margin-left: 0;
+        text-align: center;
+    }
+    .card .front .name h1 {
+        text-align: center;
+    }
+    .card .front .name ul {
+        padding: 0;
+        list-style: none;
+    }
+    .card .back-main {
+        justify-content: center;
+        gap: 28px;
+        padding-bottom: 30px;
+        box-sizing: border-box;
+    }
+    .card .back hr {
+        margin: 0;
+    }
+    #details:target + .card-container .back {
+        overflow-y: auto;
     }
     #details:target + .card-container .details {
-        order: -1;
         flex: none;
-        padding: 25px 20px 10px 20px;
+        overflow: visible;
+        padding: 20px 25px 5px 25px;
     }
     #details:target + .card-container .back-main {
-        flex: 1;
+        flex: none;
         height: auto;
-        overflow-y: auto;
+        overflow: visible;
         justify-content: flex-start;
-        padding: 10px 20px 15px 20px;
-        margin-bottom: 40px;
+        padding: 15px 25px 0 25px;
     }
     #details:target + .card-container .back-main > ul,
     #details:target + .card-container .back-main > hr {
@@ -466,31 +502,37 @@ li .spacer {
     #details:target + .card-container .interests {
         grid-template-columns: 1fr;
         row-gap: 4px;
+        width: 100%;
     }
     #details:target + .card-container .interests .label {
         text-align: left;
-        margin-top: 8px;
+        margin-top: 10px;
     }
     #details:target + .card-container .interests .icons {
-        flex-wrap: wrap;
-        gap: 6px 4px;
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: 8px 4px;
     }
     #details:target + .card-container .interests .skill {
         width: auto;
-        min-width: 3em;
+        min-width: 0;
     }
-    .card .front hr, .card .back hr {
-        width: calc(var(--width) / 2);
-        height: 0px;
-    
-        border-radius: 10px;
-        border: 2px dashed lightgray;
-    
-        margin: 0 10px;
+    #details:target + .card-container .interests .caption {
+        -webkit-hyphens: auto;
+        hyphens: auto;
+        overflow-wrap: break-word;
+        max-width: 100%;
     }
-    .card .front .name {
-        margin-top: 30px;
-        margin-left: 0;
+    #details:target + .card-container .details-close {
+        position: sticky;
+        order: 1;
+        left: auto;
+        transform: none;
+        flex: none;
+        justify-content: center;
+        margin-top: auto;
+        padding: 18px 0 15px 0;
+        background: linear-gradient(to bottom, rgba(248, 248, 248, 0), rgb(248, 248, 248) 45%);
     }
 }