Set pride flag aspect ratio

src/articles/myarticles/living-with-retinitis-pigmentosa.md

@@ -23,12 +23,4 @@ I do not write this article to ask for pity. I have accepted that I am visually
 
 I coded a [responsive Disability Pride flag in CSS](/projects/snippets/disability-pride-flag-background) during the Disability Pride Month in July (which is also my birth month) 2024, so it would be fitting to conclude this article with this Pride flag I coded.
 
-{%- css %}
-.flag-disability-article {
-    margin-top: 1.7em;
-    width: 100%;
-    height: 20rem;
-}
-{% endcss %}
-
-<div class="flag-disability flag-disability-article" role="img" aria-label="Disability Pride flag coded in CSS"></div>
+<div class="flag-el flag-disability" role="img" aria-label="Disability Pride flag coded in CSS" style="margin-top: 1.7em;"></div>

src/assets/css/pridesymbols.css

@@ -2,6 +2,7 @@
     Pride flag CSS backgrounds
     Credit: KOTOR Community Portal: https://kotor.neocities.org/
  */
+
 .flag-rainbow {
 	background: linear-gradient(
 		#e40303 0 16.67%,
@@ -214,4 +215,11 @@
             #3BB07D 30% 65%,
             #595959 0
         );
-}
+}
+
+.flag-el {
+    display: inline-block;
+    width: 100%;
+    aspect-ratio: 14 / 9;
+}
+.flag-el.flag-disability { aspect-ratio: 4 / 3; }

src/index.njk

@@ -64,7 +64,7 @@ eleventyComputed:
 
 <section class="content__section">
     <h2>Always Proud</h2>
-    <div class="flag-progress-intersex-lesbian" role="img" aria-label="Custom pride flag which combines the lesbian pride flag and the progress pride flag triangle" style="height: 20rem; margin-bottom: 1em;"></div>
+    <div class="flag-el flag-progress-intersex-lesbian" role="img" aria-label="Custom pride flag which combines the lesbian pride flag and the progress pride flag triangle" style="margin-bottom: 1em;"></div>
     {%- macro prideButton(file, alt, width=88, height=31) -%}
         <li data-tooltip>
             <img src="/assets/buttons/pride/{{ file }}.png" alt="{{ alt }}" data-tooltip-trigger title="{{ alt }}" width="{{ width }}" height="{{ height }}" loading="lazy" tabindex="0">