feat: add right-image horizontal cards

src/partials/mini-projects-showcase-specimens.en.html

@@ -148,6 +148,17 @@
             </div>
           </div>
 
+          <div class="mp-showcase-specimen-row">
+            <div class="mp-showcase-specimen__card">
+              <p class="mp-showcase-specimen__label"><code>mp-card--horizontal-right</code> + <code>mp-card--link</code></p>
+              <a class="mp-card mp-card--link mp-card--horizontal mp-card--horizontal-right" href="#" aria-label="Horizontal with image on the right — example card">
+                <div class="mp-card__media" aria-hidden="true"><img class="mp-card__image" src="{{assetPrefix}}assets/shared/placeholder.webp" alt="" width="360" height="203" loading="lazy" decoding="async" /></div>
+                <div class="mp-card__body"><h3 class="mp-card__title">Horizontal — image on the right <span class="mp-card__ext" aria-hidden="true"></span></h3><ul class="mp-card__tags" aria-label="Project type"><li class="mp-card__tag">app</li></ul><p class="mp-card__desc">The same horizontal card with the preview fixed on the right.</p></div>
+              </a>
+            </div>
+            <div class="mp-showcase-specimen__desc"><p class="section__prose"><strong>Image on the right.</strong> Add <code>mp-card--horizontal-right</code> to a horizontal card.</p></div>
+          </div>
+
           <div class="mp-showcase-specimen-row">
             <div class="mp-showcase-specimen__card">
               <p class="mp-showcase-specimen__label"><code>mp-card--compact</code> + <code>mp-card--link</code></p>

src/partials/mini-projects-showcase-specimens.html

@@ -148,6 +148,23 @@
             </div>
           </div>
 
+          <div class="mp-showcase-specimen-row">
+            <div class="mp-showcase-specimen__card">
+              <p class="mp-showcase-specimen__label"><code>mp-card--horizontal-right</code> + <code>mp-card--link</code></p>
+              <a class="mp-card mp-card--link mp-card--horizontal mp-card--horizontal-right" href="#" aria-label="Horizontal с картинкой справа — пример карточки">
+                <div class="mp-card__media" aria-hidden="true">
+                  <img class="mp-card__image" src="{{assetPrefix}}assets/shared/placeholder.webp" alt="" width="360" height="203" loading="lazy" decoding="async" />
+                </div>
+                <div class="mp-card__body">
+                  <h3 class="mp-card__title">Horizontal — картинка справа <span class="mp-card__ext" aria-hidden="true"></span></h3>
+                  <ul class="mp-card__tags" aria-label="Тип проекта"><li class="mp-card__tag">приложение</li></ul>
+                  <p class="mp-card__desc">Та же горизонтальная карточка, но превью закреплено справа.</p>
+                </div>
+              </a>
+            </div>
+            <div class="mp-showcase-specimen__desc"><p class="section__prose"><strong>Картинка справа.</strong> Добавьте модификатор <code>mp-card--horizontal-right</code> к горизонтальной карточке.</p></div>
+          </div>
+
           <div class="mp-showcase-specimen-row">
             <div class="mp-showcase-specimen__card">
               <p class="mp-showcase-specimen__label"><code>mp-card--compact</code> + <code>mp-card--link</code></p>