@use 'sprucecss/scss/spruce' as *;

.post-content {
  @include layout-stack;

  @include breakpoint('md') {
    font-size: 1.0375rem;
  }

  :is(dd, dl, dl, h1, h2, h3, h4, h5, h6, hr, ul, ol, p, blockquote) {
    @include layout-center(null, 47.5rem);
  }

  * + h2,
  * + h3,
  > * + img,
  > * + iframe,
  > * + figure,
  > * + .gallery,
  > iframe + *,
  > img + *,
  > figure + *,
  > .gallery + * {
    margin-block-start: spacer('l');
  }

  h2 + *,
  h3 + *,
  h4 + *,
  h5 + *,
  h6 + * {
    margin-block-start: spacer('s');
  }

  img,
  iframe {
    border-radius: config('border-radius-sm', $display);
  }

  iframe {
    aspect-ratio: 16 / 9;
  }
}

<div class="container">
    <div class="post-content">
        <img src="https://ui.sprucecss.com/img/post/cover/benjamin-voros-phIFdC6lA4E-unsplash.jpg" alt="snow mountain under stars" lazyload="lazyload" />
        <p class="lead">Woodlands payment Osgiliath tightening. Barad-dur follow belly comforts tender tough bell? Many that live deserve death. Some that die deserve life. Outwitted teatime grasp defeated before stones reflection corset seen animals Saruman’s call?</p>
        <h2>Tad Survive Ensnare Joy Mistake Courtesy Bagshot Row</h2>
        <p>Ligulas step drops both? You shall not pass! Tender respectable success Valar impressive unfriendly bloom scraped? Branch hey-diddle-diddle pony trouble’ll sleeping during jump Narsil.</p>
        <h3>North Valor Overflowing Sort</h3>
        <p>Curse you and all the halflings! Deserted anytime Lake-town burned caves balls. Smoked lthilien forbids Thrain?</p>
        <iframe src="https://www.youtube.com/embed/umbiR1sbap8" frameborder="0" allowfullscreen="allowfullscreen" lazyload="lazyload"></iframe>
        <ul>
            <li>Adamant.</li>
            <li>Southfarthing!</li>
            <li>Witch-king.</li>
            <li>Precious.</li>
            <li>Gaffer’s!</li>
        </ul>
        <ul>
            <li>Excuse tightening yet survives two cover Undomiel city ablaze.</li>
            <li>Keepsakes deeper clouds Buckland position 21 lied bicker fountains ashamed.</li>
            <li>Women rippling cold steps rules Thengel finer.</li>
            <li>Portents close Havens endured irons hundreds handle refused sister?</li>
            <li>Harbor Grubbs fellas riddles afar!</li>
        </ul>
        <h3>Narsil Enjoying Shattered Bigger Leaderless Retrieve Dreamed Dwarf</h3>
        <p>Ravens wonder wanted runs me crawl gaining lots faster! Khazad-dum surprise baby season ranks. I bid you all a very fond farewell.</p>
        <ol>
            <li>Narsil.</li>
            <li>Elros.</li>
            <li>Arwen Evenstar.</li>
            <li>Maggot’s?</li>
            <li>Bagginses?</li>
        </ol>
        <ol>
            <li>Concerning Hobbits l golf air fifth bell prolonging camp.</li>
            <li>Grond humble rods nearest mangler.</li>
            <li>Enormity Lorien merry gravy stayed move.</li>
            <li>Diversion almost notion furs between fierce laboring Nazgûl ceaselessly parent.</li>
            <li>Agree ruling um wasteland Bagshot Row expect sleep.</li>
        </ol>
        <h3>Ere Answering Track Forests Shards Roof!</h3>
        <p>Delay freezes Gollum. Let the Ring-bearer decide. Bagshot Row chokes pole pauses immediately orders taught &eacute;ored musing three-day? Disease rune repel source fire Goblinses already?</p>
        <div class="gallery gallery--uneven">
            <figure class="gallery-item gallery-item--1">
                <a href="#">
                    <img src="https://ui.sprucecss.com/img/post/gallery/benjamin-voros-phIFdC6lA4E-unsplash.jpg" alt="snow mountain under stars" lazyload>
                </a>
            </figure>
            <figure class="gallery-item gallery-item--2">
                <a href="#">
                    <img src="https://ui.sprucecss.com/img/post/gallery/boris-baldinger-eUFfY6cwjSU-unsplash.jpg" alt="aerial view of mountain" lazyload>
                </a>
            </figure>
            <figure class="gallery-item gallery-item--3">
                <a href="#">
                    <img src="https://ui.sprucecss.com/img/post/gallery/fabrice-villard-QrRSm-QbjW0-unsplash.jpg" alt="mountain coated with snow" lazyload>
                </a>
            </figure>
            <figure class="gallery-item gallery-item--4">
                <a href="#">
                    <img src="https://ui.sprucecss.com/img/post/gallery/guillaume-briard-lSXpV8bDeMA-unsplash.jpg" alt="closeup photo of rocky mountain under blue and white sky" lazyload>
                </a>
            </figure>
            <figure class="gallery-item gallery-item--5">
                <a href="#">
                    <img src="https://ui.sprucecss.com/img/post/gallery/kyle-johnson-Aq7id0ZjEW4-unsplash.jpg" alt="man standing on grass field overlooking mountain" lazyload>
                </a>
            </figure>
            <figure class="gallery-item gallery-item--6">
                <a href="#">
                    <img src="https://ui.sprucecss.com/img/post/gallery/lucas-clara-hvPB-UCAmmU-unsplash.jpg" alt="man with red backpack standing on cliff facing mountains under white sky during daytime" lazyload>
                </a>
            </figure>
            <figure class="gallery-item gallery-item--7">
                <a href="#">
                    <img src="https://ui.sprucecss.com/img/post/gallery/marco-pregnolato-ahYX46whD8s-unsplash.jpg" alt="snow covered mountain under blue sky during daytime" lazyload>
                </a>
            </figure>
            <figure class="gallery-item gallery-item--8">
                <a href="#">
                    <img src="https://ui.sprucecss.com/img/post/gallery/pietro-de-grandi-T7K4aEPoGGk-unsplash.jpg" alt="three brown wooden boat on blue lake water taken at daytime" lazyload>
                </a>
            </figure>
        </div>
        <div class="table-responsive">
            <table class="table table--striped table--rounded table--clear-border">
                <thead>
                    <tr>
                        <th></th>
                        <th>Dangers</th>
                        <th>Playing</th>
                        <th>Window</th>
                        <th>Meaning</th>
                        <th>Pace</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Current</td>
                        <td>living</td>
                        <td>odds</td>
                        <td>charged</td>
                        <td>heads</td>
                        <td>felt</td>
                    </tr>
                    <tr>
                        <td>Inn</td>
                        <td>climbing</td>
                        <td>destroying</td>
                        <td>overhead</td>
                        <td>roll</td>
                        <td>mud</td>
                    </tr>
                    <tr>
                        <td>Breath</td>
                        <td>relevant</td>
                        <td>eored</td>
                        <td>hinges</td>
                        <td>year</td>
                        <td>signed</td>
                    </tr>
                    <tr>
                        <td>Accept</td>
                        <td>threads</td>
                        <td>name</td>
                        <td>fitted</td>
                        <td>precious</td>
                        <td>attacked</td>
                    </tr>
                    <tr>
                        <td>Chief</td>
                        <td>sails</td>
                        <td>first-born</td>
                        <td>pottery</td>
                        <td>lever</td>
                        <td>antagonize</td>
                    </tr>
                    <tr>
                        <td>Unoccupied</td>
                        <td>victorious</td>
                        <td>means</td>
                        <td>lovely</td>
                        <td>humble</td>
                        <td>force</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td>kinsmen</td>
                        <td>give</td>
                        <td>walking</td>
                        <td>thousand</td>
                        <td>manners</td>
                        <td>burning</td>
                    </tr>
                </tfoot>
            </table>
        </div>
        <h4>Afraid Smithy Fellowship Debt Carven Hooks</h4>
        <p>What about second breakfast? Nags runt near Lindir lock discover level? Andûril breathe waited flatten union.</p>
        <blockquote>
            <p>You shall be the Fellowship of the Ring.</p>
            <footer>Númenor,
                <cite>sweeter burned verse</cite>
            </footer>
        </blockquote>
        <h5>Should Shirelings Extraordinary Spends Poison’s Willing Enchantment</h5>
        <p>I think we should get off the road. Penalty sight splintered Misty Mountain mithril? Unrest lasts rode league bears absence Bracegirdle athletic contract nice parent slowed?</p>
        <h6>Improve Drops Absolutely Tight Deceit Potent Treebeard Startled</h6>
        <p>J.R.R. Tolkien 3000 uttered veins roaring winds moaning flaming. Meddle <ins>measure pure Samwise Gamgee business!</ins> <sub>Lied mistake Proudfoots pon. Instance 80</sub> morbid ceremonial plunge Anor mad. Questions shells hangs noble Proudfoots throws. <mark>Rampart damage questions Chubbs 3000 conjurer? Single tempt peasants</mark> <strong>Bolg Athelas Mordor Wraiths Azog Undomiel mangler?</strong> Nori Giants Undomiel Rivendell spike posts took. Fool’s Underhill boarded <cite>vanishing twilight unheard-of.</cite> <abbr>Presence Dunland lamb lair</abbr>. Barricade <sup>didn’t feelings purring vine Morgoth. Distract Giants nearing champion</sup> T. Clothing titles quick bother <em>Arod Gloin Beren troop? Balls crashing bastards</em> <small>arrives precisely rascal stubbornness Snowbourn. Hobbitses rose barren</small> <a>strengths tested mirrors moonlight</a> password center? Remade free filthy breaking respect amuse Arod? Vengeance <del>Elessar Wolves posts remain doorway</del> said! Suspects fight Merry hungers locked yelp.</p>
        <hr />
        <dl>
            <dt>Abandon</dt>
            <dd>Tact flies disturber thinking hospitality Elros act vest handy ranks.</dd>
            <dt>Devil</dt>
            <dd>Boneses spilled Caradhras hungry pace lanterns glory haunted shone forging.</dd>
            <dd>Unprotected Beorn’s fireworks dream journey beacon dwells gnaws key.</dd>
            <dt>Happened</dt>
            <dd>Known wanna fifth Bill hell knew she scale.</dd>
            <dd>Missing vanish taken colleague sway voice tricks 13 Grimbold.</dd>
            <dd>Thereof skills kingsfoil innocent riding light Thorin Oakenshield won.</dd>
        </dl>
        <figure class="figure">
            <img src="https://ui.sprucecss.com/img/post/cover/pietro-de-grandi-T7K4aEPoGGk-unsplash.jpg" alt="three brown wooden boat on blue lake water taken at daytime" lazyload="lazyload" />
            <figcaption class="figure-caption">Donec at arcu ac diam sodales elementum ac sit amet tortor.</figcaption>
        </figure>
    </div>
</div>