docs/_includes/website/banner.html

@@ -1,13 +1,15 @@
-<a href="https://cssmasterclass.io/" target="_blank" class="launch-code is-animated">
-  <h3><img
+<div class="launch-code is-animated">
+  <h3>
+    <a href="https://cssmasterclass.io/" target="_blank"
+      ><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>
-</a>
+</div>

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; aspect-ratio: 40 / 26; max-width: 400px; max-height: 260px;">
+    <a id="masterclass-carbon" href="https://cssmasterclass.io/" target="_blank" style="display: none; width: 400px; 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,10 +93,6 @@
 }
 
 .bd-carbon {
-  aspect-ratio: 40 / 26;
-  max-height: 280px !important;
-  max-width: 400px !important;
-
   &,
   & > div {
     align-items: center;
@@ -105,6 +101,7 @@
   }
 
   > div {
-    aspect-ratio: 40 / 26;
+    height: 280px !important;
+    width: 400px !important;
   }
 }

docs/assets/css/website.css

@@ -34288,18 +34288,14 @@ 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 {
-  aspect-ratio: 40/26;
+  height: 280px !important;
+  width: 400px !important;
 }
 
 .highlight {
@@ -37311,7 +37307,6 @@ div.shine {
   gap: 0.5rem 1rem;
   white-space: nowrap;
   flex-direction: column;
-  overflow: hidden;
 }
 .launch-code h3,
 .launch-code small {
@@ -37333,7 +37328,6 @@ 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,8 +915,7 @@ 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>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>
+  <p>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,7 +799,6 @@ div.shine {
   gap: 0.5rem 1rem;
   white-space: nowrap;
   flex-direction: column;
-  overflow: hidden;
 
   h3,
   small {
@@ -823,7 +822,6 @@ div.shine {
     display: block;
     opacity: 1;
     font-weight: 400;
-    white-space: normal;
   }
 
   .launch-shine {