Fix banner overflow

[Docs] Mention required order on form controls' modifiers

docs/_includes/website/banner.html

@@ -1,15 +1,13 @@
-<div class="launch-code is-animated">
-  <h3>
-    <a href="https://cssmasterclass.io/" target="_blank"
-      ><img
+<a href="https://cssmasterclass.io/" target="_blank" class="launch-code is-animated">
+  <h3><img
         src="{{site.url}}/assets/images/masterclass/logo-desktop.png"
         height="40"
         width="300"
-    /></a>
+    />
   </h3>
 
   <small>
     Learn CSS with 🎓 online interactive courses,📺 educational videos, and
     🧑🏻‍💻project-building tutorials.
   </small>
-</div>
+</a>

docs/_includes/website/carbon.html

@@ -1,6 +1,6 @@
 <div id="carboncontainer" class="bd-carbon">
   <div id="carbon">
-    <a id="masterclass-carbon" href="https://cssmasterclass.io/" target="_blank" style="display: none; width: 400px; height: 260px;">
+    <a id="masterclass-carbon" href="https://cssmasterclass.io/" target="_blank" style="display: none; aspect-ratio: 40 / 26; max-width: 400px; max-height: 260px;">
       <img src="{{ site.url }}/assets/images/masterclass/masterclass-carbon.png" height="260" width="400" alt="CSS Masterclass">
     </a>
     <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CWYIE237&placement=bulmaio&format=cover" id="_carbonads_js" onerror="this.previousElementSibling.style.display = 'flex'"></script>

docs/_sass/docs/hero.scss

@@ -93,6 +93,10 @@
 }
 
 .bd-carbon {
+  aspect-ratio: 40 / 26;
+  max-height: 280px !important;
+  max-width: 400px !important;
+
   &,
   & > div {
     align-items: center;
@@ -101,7 +105,6 @@
   }
 
   > div {
-    height: 280px !important;
-    width: 400px !important;
+    aspect-ratio: 40 / 26;
   }
 }

docs/assets/css/website.css

@@ -34288,14 +34288,18 @@ has-background-moon.is-hoverable:active {
     --scale: 0.75;
   }
 }
+.bd-carbon {
+  aspect-ratio: 40/26;
+  max-height: 280px !important;
+  max-width: 400px !important;
+}
 .bd-carbon, .bd-carbon > div {
   align-items: center;
   display: flex;
   justify-content: center;
 }
 .bd-carbon > div {
-  height: 280px !important;
-  width: 400px !important;
+  aspect-ratio: 40/26;
 }
 
 .highlight {
@@ -37307,6 +37311,7 @@ div.shine {
   gap: 0.5rem 1rem;
   white-space: nowrap;
   flex-direction: column;
+  overflow: hidden;
 }
 .launch-code h3,
 .launch-code small {
@@ -37328,6 +37333,7 @@ div.shine {
   display: block;
   opacity: 1;
   font-weight: 400;
+  white-space: normal;
 }
 .launch-code .launch-shine {
   animation-duration: 1s;

docs/documentation/form/general.html

@@ -915,7 +915,8 @@ variables_keys:
     <li><code>icon is-left</code> if <code>has-icons-left</code> is used</li>
     <li><code>icon is-right</code> if <code>has-icons-right</code> is used</li>
   </ul>
-  <p>The size of the <strong>input</strong> will define the size of the icon container.</p>
+  <p>Make sure the input is the control's first child, otherwise the icon may disappear when selected. The size of the
+    <strong>input</strong> will define the size of the icon container.</p>
 </div>
 
 {% include docs/elements/snippet.html content=icons_example clipped=true %}

docs/website.scss

@@ -799,6 +799,7 @@ div.shine {
   gap: 0.5rem 1rem;
   white-space: nowrap;
   flex-direction: column;
+  overflow: hidden;
 
   h3,
   small {
@@ -822,6 +823,7 @@ div.shine {
     display: block;
     opacity: 1;
     font-weight: 400;
+    white-space: normal;
   }
 
   .launch-shine {