page folder

assets/css/components/_card-open-graph.scss

@@ -1,5 +1,7 @@
 .card--open-graph{
 
+
+
     @include grid-content();
     
     border: var(--border-light);
@@ -9,11 +11,9 @@
     figure{
         grid-column: 1;
         grid-row: 1;
-
-    
     }
 
-    @include figure-16-9-hover();
+    @include figure-16-9();
     
 
     @media #{$x-small}{
@@ -33,11 +33,14 @@
     .site-name{
         color: var(--color-txt-light);
         font-size: var(--fs-small);
+        margin-bottom: 3px;
     }
 
     .title{
         font-size: var(--fs-normal);
         font-weight: normal;
+        line-height: 1.1;
+        padding-top: 2px;
         display: -webkit-box;
         -webkit-line-clamp: 2;    
         -webkit-box-orient: vertical;
@@ -57,7 +60,26 @@
     }
 
     &:hover{
-        .title{ text-decoration: underline;}
+        border-color: var(--color-txt);
 
     }
+}
+
+
+.open-graph__inner{
+
+    container-type: inline-size;
+    container-name: opengraph;
+}
+@container opengraph (width < 500px) {
+    .card--open-graph{
+
+        .content{
+            padding: calc(var(--padding-inner)*0.5);
+        }
+
+        figure{
+            aspect-ratio: inherit;
+        }
+    }
 }