PR feedback: adjust padding and hero scaling on tablet

Author: jlchilders11

static/css/v3/library-page.css

@@ -1,3 +1,7 @@
+.library-page__container {
+    padding: 0 var(--space-large);
+}
+
 /*
 =============================================
 =            Hero Styling                   =
@@ -9,7 +13,7 @@
     margin-bottom: var(--space-xl);
     position: relative;
     display: grid;
-    grid-template-columns: 574px 1fr auto;
+    grid-template-columns: fit-content(574px) 1fr fit-content(40%);
     gap: var(--space-xl);
     align-items: center;
     grid-template-areas:
@@ -23,7 +27,7 @@
     width: 75%;
 }
 
-.library-page-hero .hero-image {
+.library-page-hero .hero-image-container {
     grid-area: c;
 }
 

templates/v3/library_page.html

@@ -23,7 +23,9 @@ <h1 class="hero-title">Find a battle-tested library for the problem you're solvi
           <div class="hero-search-bar">
             {% include 'v3/includes/_field_text.html' with label='Search' name='ex_search' placeholder='Keyword, name, etc.' icon_left='search' submit_icon='arrow-right' %}
           </div>
-          <img alt="Excited Cartoon Mascot" class="hero-image" src="{% static 'img/v3/solo-images/beaver-black-and-white.png' %}" loading="lazy" decoding="async" />
+          <div class="hero-image-container">
+            <img alt="Excited Cartoon Mascot" class="hero-image" src="{% static 'img/v3/solo-images/beaver-black-and-white.png' %}" loading="lazy" decoding="async" />
+          </div>
       </section>
     <form action="" method="get">
       <div id="library-page-filter-container" class="mb-xl">