Improve sponsor hover layout

Author: carlospolop

theme/pagetoc.css

@@ -139,7 +139,17 @@
         transition-duration: .3s;
     }
     .sidesponsor:hover img{
-       width: 30%;
+       width: 52px;
+       padding: 6px;
+       grid-column: 1;
+       grid-row: 1;
+    }
+    .sidesponsor:hover {
+        display: grid !important;
+        grid-template-columns: auto minmax(0, 1fr);
+        grid-template-rows: auto minmax(0, 1fr) auto;
+        column-gap: 8px;
+        align-items: center;
     }
     .sidesponsor .sponsor-title{
         margin-top: 5px;
@@ -150,6 +160,14 @@
         font-size: 2rem;
         color: var(--sponsor-fg);
     }
+    .sidesponsor:hover .sponsor-title{
+        grid-column: 2;
+        grid-row: 1;
+        margin-left: 0;
+        font-size: 1.55rem;
+        line-height: 1.15;
+        overflow-wrap: anywhere;
+    }
     .sidesponsor .sponsor-description{
         display:none;
         margin-top: 5px;
@@ -164,7 +182,12 @@
     }
     .sidesponsor:hover .sponsor-description{
         display:block;
-
+        grid-column: 1 / -1;
+        grid-row: 2;
+        min-height: 0;
+        margin-top: 8px;
+        margin-bottom: 8px;
+        overflow: auto;
     }
     .sidesponsor .sponsor-cta{
         margin-top: auto;
@@ -177,6 +200,10 @@
         background-color: var(--fg);
         color: var(--bg);
     }
+    .sidesponsor:hover .sponsor-cta{
+        grid-column: 1 / -1;
+        grid-row: 3;
+    }
     .sidesponsor-bsa {
         max-height: 40%;
         height: 40%;