customize heights with media breakpoints to bypass tailwind

assets/css/bundle.css

@@ -1663,6 +1663,18 @@ section[id=pulumi-python-sdk] table td,section[id=pulumi-python-sdk] .pre{
   content:"R"
 }
 
+@media(min-width: 0px){
+  .medium-auto-height{
+    height:13rem
+  }
+}
+
+@media(min-width: 768px){
+  .medium-auto-height{
+    height:auto
+  }
+}
+
 .automation-scenarios-carousel-items{
   width: 100%
 }

layouts/page/awards.html

@@ -12,10 +12,10 @@
                             <div class="md:w-1/3 p-4">
                                 {{ if .url }}
                                     <a data-track="{{ .title | urlize }}-img" class="block text-center" href="{{ .url }}">
-                                        <img class="text-center inline-block rounded shadow p-1 h-52 md:h-28" src="{{ .img }}" />
+                                        <img class="text-center inline-block rounded shadow p-1 medium-auto-height" src="{{ .img }}" />
                                     </a>
                                 {{ else }}
-                                    <img class="text-center inline-block rounded shadow p-1 h-52 md:h-28" src="{{ .img }}" />
+                                    <img class="text-center inline-block rounded shadow p-1 medium-auto-height" src="{{ .img }}" />
                                 {{ end }}
                             </div>
                             <div class="md:w-2/3 p-4 text-left">

theme/src/scss/_awards.scss

@@ -0,0 +1,11 @@
+@media (min-width: 0px) {
+    .medium-auto-height {
+        height: 13rem;
+    }
+}
+
+@media (min-width: 768px) {
+    .medium-auto-height {
+        height: auto;
+    }
+}

theme/src/scss/main.scss

@@ -11,6 +11,7 @@
 @import "api-nodejs";
 @import "api-python";
 @import "api-symbol";
+@import "awards";
 @import "marketing/automation-api";
 @import "badges";
 @import "benefits";