Разделяет хостов и гостей

Author: pepelsbey

src/pages/episode.njk

@@ -10,16 +10,26 @@
             <h1 class="article__title podcast__title">
                 {{ episode.data.title }}
             </h1>
-            <section class="podcast__hosts">
-                <h2 class="podcast__hosts-heading">Ведущие:</h2>
-                <ul class="podcast__hosts-list">
-                    {% for host in episode.data.hosts %}
-                        <li class="podcast__host">
+            <dl class="podcast__participants">
+                <div>
+                    <dt>Ведущие:</dt>
+                    <dd>
+                        {% for host in episode.data.hosts %}
                             {{ host }}{% if not loop.last %},{% endif %}
-                        </li>
-                    {% endfor %}
-                </ul>
-            </section>
+                        {% endfor %}
+                    </dd>
+                </div>
+                {% if episode.data.guests %}
+                <div>
+                    <dt>Гости:</dt>
+                    <dd>
+                        {% for guest in episode.data.guests %}
+                            {{ guest }}{% if not loop.last %},{% endif %}
+                        {% endfor %}
+                    </dd>
+                </div>
+                {% endif %}
+            </dl>
         </header>
 
         <div class="podcast__player player">

src/styles/blocks/podcast.css

@@ -71,22 +71,19 @@
     }
 }
 
-.podcast__hosts-heading {
-    display: inline;
-    margin: 0 0.5em 0 0;
-    font-weight: 600;
-    font-size: inherit;
-    letter-spacing: 0.01em;
+.podcast__participants {
+    display: grid;
+    row-gap: 8px;
 }
 
-.podcast__hosts-list {
+.podcast__participants dt {
     display: inline;
-    margin: 0;
-    padding: 0;
+    font-weight: bold;
 }
 
-.podcast__host {
+.podcast__participants dd {
     display: inline;
+    margin: 0;
 }
 
 .podcast__player {