[PYT-210] Update Gallery cards (Lightning-AI#44)

* [PYT-210] Update Gallery cards

* Tweak gallery sizing

Author: patmellon

pytorch_sphinx_theme/static/css/theme.css

@@ -252,29 +252,55 @@ article.pytorch-article {
   }
 }
 
-.sphx-glr-thumbcontainer {
-  border: 1px solid #d6d7d8 !important;
-  -webkit-border-radius: 0 !important;
-  border-radius: 0 !important;
+article.pytorch-article .sphx-glr-thumbcontainer {
+  margin: 0;
+  border: 1px solid #d6d7d8 ;
+  border-radius: 0;
+  width: 45%;
+  text-align: center;
+  margin-bottom: 5%;
+
+  @media screen and (max-width: $sphinx_medium_width - 1px) {
+    &:nth-child(odd) {
+      margin-left: 0;
+      margin-right: 2.5%;
+    }
+
+    &:nth-child(even) {
+      margin-right: 0;
+      margin-left: 2.5%;
+    }
+  }
+
+  @include sphinx-medium-size {
+    margin-right: 3%;
+    margin-bottom: 3%;
+    width: 30%;
+  }
+
   .caption-text {
     a {
       font-size: rem(16px);
-      color: $quick_start_grey;
+      color: $not_quite_black;
       letter-spacing: 0;
       line-height: rem(24px);
-      &:hover {
-        color: $not_quite_black;
-        text-decoration: none;
-      }
+      text-decoration: none;
     }
   }
+
   &:hover {
     .figure:before {
       bottom: 100%;
     }
-    box-shadow: none !important;
-    border-bottom-color: $white !important;
+
+    box-shadow: none;
+    border-bottom-color: $white;
+  }
+
+  .figure {
+    width: 80%;
   }
+
   .figure:before {
     content: "";
     display: block;
@@ -283,8 +309,14 @@ article.pytorch-article {
     bottom: 35%;
     left: 0;
     right: 0;
-    background: rgba(151, 155, 151, 0.2);
+    background: #8A94B3;
+    opacity: 0.10;
+  }
+
+  .figure a.reference.internal {
+    text-align: left;
   }
+
   @include animated_border_hover_state;
 }