<ul class="blog-feed--stacked gap-md max-width-none">
    <li class="card flex flex-column">
        <div class="card__image-wrap cover-image">
            <img src="https://source.unsplash.com/random/800x600?space" alt="" class="card__img">
            <div class="card__overlay">
                <div class="btn btn--secondary" aria-label="">Read More</div>
            </div>
        </div>
        <div class="card__content flow">
            <div class="card__icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="76" height="57" fill="none"><g clip-path="url(#a)"><mask id="b" width="76" height="57" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:luminance"><path fill="#fff" d="M75.7 0H0v56.25h75.7V0Z"/></mask><g mask="url(#b)"><path fill="#CD1F40" d="M2.79 48.8c0-3.06 2.16-6.36 2.16-6.36s4.67-6.99 8.06-16.24c.68-1.86 1.58-4.31 2.28-7.66.3-1.44.42-2.34.71-3.86.17-.87.32-1.61.39-1.91.45-2.11 1.02-4.78 2.05-6.73C20.52 2.11 24.6.7 24.89.6c2.94-1 5.53-.47 6.34-.28.96.23 1.74.55 2.36.86 4.12 2.01 6.05 5.28 8.7 7.56 3.55 3.06 7.7 3.74 10.58 4.19 5.14.8 8.87-.33 13.95 1.77.75.31 1.74.78 2.8 1.62.74.59 3.13 2.64 3.95 6.19.61 2.61.06 4.74-.18 5.61-1.63 5.8-7.26 8.9-8.47 9.57-1.76.97-2.56 1.05-4.97 2.53-2.4 1.48-4.26 3.11-4.58 3.39-3.19 2.78-10.17 3.74-16.71 4.64-2.06.28-5.7.7-10.51 1.86-.79.19-1.19.29-1.76.45-3.7 1.03-6.81 2.52-9.38 3.76-1.24.6-1.97.98-3.22 1.36-1.05.31-2.16.64-3.62.59-.63-.02-2.87-.11-4.51-1.49-.55-.46-1.28-1.28-1.87-2.25-.08-.13-.15-.24-.19-.32 0 0-.8-1.46-.8-3.39l-.01-.02Z"/><path fill="#fff" d="M14.4 10.85c.89-.6 1.77-.77 2.25-.82.11-.04.28-.09.49-.14 1.62-.4 3.48-.21 4.68.41 2.93 1.52 3.39 6.41 2.32 9.6a8.44 8.44 0 0 1-.75 1.63l12.33-1.98c-2.96-3.92-2.96-8.64-.61-11.1 1.57-1.65 3.81-1.87 4.77-1.91.44-.03 3.27-.21 5.24 1.84 2 2.07 2.29 5.56.54 8.45-.32.66-.64 1.32-.95 1.98 1.93.07 3.86.14 5.79.2 1.73.59 3.45 1.18 5.18 1.77-1.22-3.21-.29-6.68 2.11-8.45 2.47-1.82 5.43-1.07 5.86-.95.81.24 3.42 1.12 4.5 3.47 1.45 3.15-.34 7.93-4.97 10.56l2.93 2.66c.61 3.27 1.23 6.54 1.84 9.81.79.39 1.59.77 2.38 1.16.82-.48 1.63-.95 2.45-1.43 1 .18 1.77.96 1.91 1.91.14.98-.42 1.83-1.09 2.25-.96.6-2.34.4-3.27-.54l-5.86.75c-.66-1.34-1.32-2.88-1.91-4.63-.4-1.19-.71-2.32-.96-3.37-.57 2.46-1.13 4.93-1.7 7.39-.57 1.45-1.14 2.91-1.7 4.36l-40.66-.21c.05-1 .09-1.99.14-2.99l-2.32-9.74-4.02 6.54c-4.87-6.99-6.69-9.72-6.99-10.29a.683.683 0 0 0-.13-.19c-.52-.59-1.72-.4-2.76-.08-.78-1.03-.7-2.4.07-3.2.58-.6 1.52-.85 2.32-.54 1.06.4 1.69 1.73 1.29 3.06 1.59 1.66 3.18 3.31 4.77 4.97.25.2.5.41.75.61 1.14-3.27 2.27-6.54 3.41-9.81l2.38.07c-.63-.34-3.04-1.73-4.09-4.7-.82-2.33-.52-4.87.48-6.61.24-.42.68-1.16 1.57-1.77h-.01Z"/><path fill="#192232" d="M40.24 22.35c-1.65 0-3.33-.78-4.76-2.22-1.11-1.13-2.02-2.6-2.57-4.15-.32-.9-.5-1.8-.54-2.67-.09-2.05.61-4.01 1.99-5.53a7.63 7.63 0 0 1 5.32-2.5c1.17-.05 2.32.15 3.4.62a7.627 7.627 0 0 1 4.63 6.69c.11 2.41-.89 5.24-2.56 7.2-1.34 1.59-2.96 2.47-4.67 2.56h-.24Zm-.19-15.03h-.27c-1.5.07-2.88.72-3.89 1.83a5.595 5.595 0 0 0-1.46 4.05c.03.67.18 1.37.43 2.09.44 1.27 1.19 2.48 2.09 3.39 1.08 1.09 2.29 1.66 3.44 1.61 1.42-.07 2.52-1.03 3.2-1.83 1.33-1.57 2.16-3.89 2.08-5.78-.1-2.16-1.4-4.04-3.39-4.9a5.52 5.52 0 0 0-2.22-.46h-.01ZM19.6 25.28c-1.23 0-2.53-.38-3.78-1.13-1.36-.81-2.61-2.01-3.53-3.38-.53-.79-.94-1.62-1.2-2.45-.6-1.96-.41-4.04.55-5.85a7.619 7.619 0 0 1 4.52-3.75c1.12-.35 2.28-.43 3.45-.25 2.92.46 5.28 2.49 6.15 5.32.71 2.31.45 5.29-.68 7.62-.9 1.88-2.24 3.14-3.88 3.64-.52.16-1.06.24-1.61.24l.01-.01Zm-1.17-14.85c-.56 0-1.11.08-1.65.25a5.569 5.569 0 0 0-3.31 2.74c-.7 1.33-.84 2.85-.4 4.29.2.64.52 1.28.94 1.92.75 1.12 1.77 2.1 2.87 2.76 1.32.78 2.64 1.03 3.73.69 1.36-.42 2.18-1.63 2.64-2.57.89-1.85 1.12-4.31.56-6.12a5.565 5.565 0 0 0-4.5-3.89c-.29-.04-.58-.07-.87-.07h-.01ZM60.39 26.82c-.87 0-1.69-.18-2.44-.53-1.56-.74-2.76-2.27-3.37-4.3-.45-1.52-.56-3.25-.31-4.87.14-.95.4-1.83.78-2.61a7.617 7.617 0 0 1 4.36-3.94c1.93-.69 4.02-.59 5.87.29 1.06.5 1.97 1.22 2.71 2.15a7.612 7.612 0 0 1 .94 8.08c-1.04 2.18-3.25 4.2-5.65 5.16-.99.4-1.96.6-2.88.6l-.01-.03Zm1.59-14.66c-.64 0-1.27.11-1.89.33-1.41.5-2.55 1.53-3.19 2.89a7.11 7.11 0 0 0-.6 2.05c-.21 1.33-.12 2.74.25 3.97.44 1.47 1.25 2.55 2.28 3.04 1.29.61 2.71.27 3.68-.11 1.91-.76 3.74-2.42 4.55-4.13.93-1.95.66-4.22-.69-5.91-.54-.67-1.21-1.2-1.99-1.57-.76-.36-1.58-.55-2.4-.55v-.01ZM62.98 46.82H14.23c-.57 0-1.03-.46-1.03-1.03 0-.57.46-1.03 1.03-1.03h48.75c.57 0 1.03.46 1.03 1.03 0 .57-.46 1.03-1.03 1.03Z"/><path fill="#192232" d="M10.34 35.38c-.3 0-.58-.13-.78-.36l-5.34-6.19a1.029 1.029 0 0 1 1.56-1.34l4.16 4.82 2.93-8.7c.13-.39.48-.66.88-.7l2.74-.24c.57-.05 1.06.37 1.12.93.06.56-.37 1.06-.93 1.12l-2.07.18-3.29 9.77c-.12.35-.41.61-.78.68-.07.01-.13.02-.2.02v.01ZM23.81 22.79c-.48 0-.91-.34-1.01-.84-.11-.56.26-1.1.82-1.2l12.4-2.36c.55-.11 1.1.26 1.2.82.11.56-.26 1.1-.82 1.2L24 22.77c-.06.01-.13.02-.19.02Z"/><path fill="#192232" d="M30.92 46.08c-.43 0-.83-.27-.97-.7-2.45-7.34-3.64-12.72-3.74-16.94 0-.26.09-.52.27-.71l8.01-8.83a1.027 1.027 0 0 1 1.52 1.38l-7.73 8.52c.16 3.95 1.32 9.03 3.62 15.93a1.026 1.026 0 0 1-.98 1.35Z"/><path fill="#192232" d="M32.28 46.08c-.55 0-1.01-.44-1.03-.99l-.51-15.37-3.03.74c-.55.13-1.11-.2-1.24-.76-.13-.55.2-1.11.76-1.24l4.26-1.04a1.031 1.031 0 0 1 1.27.96l.55 16.63c.02.57-.43 1.04-.99 1.06h-.03l-.01.01ZM38.4 22.01h-4.43c-.57 0-1.03-.46-1.03-1.03 0-.57.46-1.03 1.03-1.03h4.43c.57 0 1.03.46 1.03 1.03 0 .57-.46 1.03-1.03 1.03ZM18.46 46.08c-.38 0-.74-.21-.92-.57-1.35-2.71-2.27-5.93-2.85-10.01l-2.57 4.59c-.17.3-.48.5-.82.52-.35.02-.68-.13-.89-.4l-7.27-9.55c-.34-.45-.26-1.1.2-1.44.45-.34 1.1-.26 1.44.2l6.32 8.3 3.35-5.99c.22-.39.67-.6 1.11-.5.44.09.77.46.81.91.49 5.36 1.45 9.32 3.01 12.46a1.029 1.029 0 0 1-.92 1.49v-.01Z"/><path fill="#192232" d="M3.12 30.39C1.4 30.39 0 28.99 0 27.27c0-1.72 1.4-3.12 3.12-3.12 1.72 0 3.12 1.4 3.12 3.12 0 1.72-1.4 3.12-3.12 3.12Zm0-4.18c-.58 0-1.06.48-1.06 1.06 0 .58.48 1.06 1.06 1.06.58 0 1.06-.48 1.06-1.06 0-.58-.48-1.06-1.06-1.06ZM72.58 42.99c-1.72 0-3.12-1.4-3.12-3.12 0-1.72 1.4-3.12 3.12-3.12 1.72 0 3.12 1.4 3.12 3.12 0 1.72-1.4 3.12-3.12 3.12Zm0-4.18c-.58 0-1.06.48-1.06 1.06 0 .58.48 1.06 1.06 1.06.58 0 1.06-.48 1.06-1.06 0-.58-.48-1.06-1.06-1.06ZM42.01 36.63c-1.47 0-2.67-1.2-2.67-2.67s1.2-2.67 2.67-2.67 2.67 1.2 2.67 2.67-1.2 2.67-2.67 2.67Zm0-3.29c-.34 0-.62.28-.62.62 0 .34.28.62.62.62.34 0 .62-.28.62-.62 0-.34-.28-.62-.62-.62Z"/><path fill="#192232" d="M44.58 46.08h-.05c-.57-.03-1.01-.51-.98-1.07l.41-8.84c-.26.05-.53 0-.76-.13-.28-.18-.46-.48-.48-.82l-.1-1.82c-.02-.36.16-.71.46-.91l1.08-.71.27-5.85a1.027 1.027 0 0 1 1.87-.54l2.94 4.24c.16.23.22.51.16.78-.05.27-.21.51-.44.66l-2.8 1.84v.11l6.01-2.55-6.05-8.7-3.49-.15c-.57-.02-1.01-.5-.98-1.07.02-.57.51-1.01 1.07-.98l4 .18c.32.01.62.18.8.44l7.06 10.16c.18.25.23.57.14.87-.09.3-.3.54-.59.66l-8.09 3.43-.46 9.8c-.03.55-.48.98-1.03.98l.03-.01Zm1.77-17.03-.06 1.32.67-.44-.61-.88Z"/><path fill="#192232" d="m55.01 21.94-4.6-1.82h-5.02v-2.06h5.22c.13 0 .26.02.38.07l4.78 1.89-.75 1.91-.01.01ZM59.56 45.47l-1.88-.84c1.27-2.85 2.25-6.06 3-9.84.09-.45.46-.79.92-.83.45-.04.88.23 1.05.66l2.38 6.25 4.29-.34-.12-.83-1.5-.44c-.37-.11-.64-.41-.72-.78l-2.11-10.36-2.74-2.42 1.36-1.54 3 2.65c.17.15.28.35.33.56l2.06 10.09 1.54.45c.39.11.67.44.73.84l.37 2.57c.04.28-.04.57-.21.79-.17.22-.44.36-.72.38l-6.14.49c-.46.04-.88-.23-1.04-.66l-1.45-3.79c-.65 2.54-1.44 4.83-2.38 6.93l-.02.01ZM46.39 46.04l-2-.49.18-.74c1.06-4.37 2.16-8.89 2.11-10.82l2.05-.06c.06 2.21-1.02 6.65-2.17 11.36l-.18.74.01.01Z"/></g></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h76v57H0z"/></clipPath></defs></svg>
            </div>
            <div class="flex flex-justify-between">
                <a href="/categories/news/" class="card__category no-margin" aria-label="View all example posts">News</a>
                <span class="card__reading-time flex flex-center font-size-xs"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" aria-hidden="true"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z"></path></svg> 4 min read</span>
            </div>
            <h3 class="h4"><a class="card__link no-decoration" href="#">Blog Title</a></h3>
            <div class="card__summary font-size-xs">Poke aesthetic street art post-ironic intelligentsia meditation, live-edge activated charcoal vexillologist pickled. Ramps Brooklyn truffaut, tattooed you probably haven't heard of them cred keffiyeh.</div>
        </div>
    </li>
    <li class="card grid gap-sm">
        <div class="card__icon grid-3">
            <svg xmlns="http://www.w3.org/2000/svg" width="62" height="61" fill="none"><g clip-path="url(#a)"><mask id="b" width="62" height="61" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:luminance"><path fill="#fff" d="M61.9 0H0v60.8h61.9V0Z"/></mask><g mask="url(#b)"><path fill="#CD1F40" d="M3.83 10.33c2.59-1.39 6.36-1.08 6.36-1.08s8.03.76 17.39-.6c1.88-.27 4.35-.63 7.51-1.57 1.36-.4 2.17-.72 3.58-1.16.81-.26 1.51-.46 1.79-.54 1.99-.58 4.5-1.31 6.62-1.33 4.26-.04 7.32 2.77 7.53 2.96 2.18 2.03 2.92 4.45 3.12 5.23.24.92.32 1.72.35 2.38.18 4.4-1.7 7.52-2.42 10.79-.96 4.39.35 8.21 1.29 10.85 1.67 4.7 4.32 7.34 4.87 12.59.08.77.14 1.83-.09 3.1-.16.89-.8 3.85-3.42 6.16-1.93 1.7-3.98 2.22-4.82 2.41-5.64 1.27-10.83-2.07-11.95-2.79-1.62-1.04-2.05-1.69-4.4-3.04-.86-.5-2.61-1.49-4.96-2.32-4.96-1.75-6.95-.91-10.13-2.96-.41-.26-1.34-.98-2.27-2.14-3.84-4.79-1.3-9.71-5.49-14.93-.32-.4-.61-.69-1.18-1.29-2.56-2.65-5.24-4.6-7.45-6.2-1.07-.77-1.73-1.22-2.61-2.1-.74-.74-1.53-1.53-2.15-2.79-.27-.54-1.22-2.48-.8-4.49.14-.67.5-1.66 1.04-2.61.07-.13.14-.23.18-.3 0 0 .87-1.35 2.5-2.22l.01-.01Z"/><path fill="#fff" d="M50.81 5.12H9.73v50.32h41.08V5.12Z"/><path fill="#192232" d="M49.49 3.96h-9.24V2.64c0-.7-.28-1.37-.77-1.87S38.31 0 37.61 0h-13.2c-.7 0-1.37.28-1.87.77s-.77 1.17-.77 1.87v1.32h-9.24c-1.05 0-2.06.42-2.8 1.16-.74.74-1.16 1.75-1.16 2.8v46.2c0 1.05.42 2.06 1.16 2.8.74.74 1.75 1.16 2.8 1.16h36.96c1.05 0 2.06-.42 2.8-1.16.74-.74 1.16-1.75 1.16-2.8V7.92c0-1.05-.42-2.06-1.16-2.8a3.967 3.967 0 0 0-2.8-1.16ZM24.41 5.28V2.64h13.2V6.6h-13.2V5.28Zm26.4 48.84c0 .35-.14.69-.39.93-.25.25-.58.39-.93.39H12.53c-.73 0-1.32-.59-1.32-1.32V7.92c0-.73.59-1.32 1.32-1.32h9.24c0 .7.28 1.37.77 1.87.5.5 1.17.77 1.87.77h13.2c.7 0 1.37-.28 1.87-.77.5-.5.77-1.17.77-1.87h9.24c.35 0 .69.14.93.39.25.25.39.58.39.93v46.2Z"/><path fill="#192232" d="M44.54 18.48H29.06c-.73 0-1.32.59-1.32 1.32 0 .73.59 1.32 1.32 1.32h15.48c.73 0 1.32-.59 1.32-1.32 0-.73-.59-1.32-1.32-1.32ZM22.93 14.9l-3.63 3.58-.88-.88c-.25-.25-.59-.39-.94-.39s-.69.14-.94.39c-.51.51-.51 1.35 0 1.86l1.83 1.82c.51.51 1.35.51 1.86 0l4.57-4.55c.52-.52.52-1.36 0-1.87s-1.36-.52-1.87 0v.05-.01ZM44.54 31.37H29.06c-.73 0-1.32.59-1.32 1.32 0 .73.59 1.32 1.32 1.32h15.48c.73 0 1.32-.59 1.32-1.32 0-.73-.59-1.32-1.32-1.32ZM22.93 27.81l-3.63 3.62-.88-.88c-.25-.25-.59-.39-.94-.39s-.69.14-.94.39c-.51.51-.51 1.35 0 1.86l1.83 1.82c.51.51 1.35.51 1.86 0l4.57-4.55c.51-.52.51-1.35 0-1.87-.52-.51-1.35-.51-1.87 0ZM44.54 44.28H29.06c-.73 0-1.32.59-1.32 1.32 0 .73.59 1.32 1.32 1.32h15.48c.73 0 1.32-.59 1.32-1.32 0-.73-.59-1.32-1.32-1.32ZM22.93 40.71l-3.63 3.63-.88-.9c-.52-.53-1.37-.54-1.9-.03-.53.52-.54 1.37-.03 1.9l1.83 1.82c.51.51 1.35.51 1.86 0l4.57-4.57c.51-.51.51-1.35 0-1.86a1.31 1.31 0 0 0-1.82 0v.01Z"/></g></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h62v61H0z"/></clipPath></defs></svg>
            <span class="card__reading-time flex flex-center font-size-xs"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" aria-hidden="true"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z"></path></svg> 4 min read</span>
        </div>
        <div class="card__content grid-9 flow">
            <div>
                <a href="/categories/blog/" class="card__category no-margin" aria-label="View all posts">Blog</a>
                <h3 class="h4 no-margin"><a class="card__link no-decoration" href="#">Blog Title</a></h3>
            </div>
            <p class="font-size-sm">Ascot you probably haven't heard of them DSA glossier direct trade grailed, food truck biodiesel retro williamsburg fingerstache succulents lo-fi.</p>
        </div>
    </li>
    <li class="card grid gap-sm">
        <div class="card__icon grid-3">
            <svg xmlns="http://www.w3.org/2000/svg" width="62" height="61" fill="none"><g clip-path="url(#a)"><mask id="b" width="62" height="61" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:luminance"><path fill="#fff" d="M61.9 0H0v60.8h61.9V0Z"/></mask><g mask="url(#b)"><path fill="#CD1F40" d="M3.83 10.33c2.59-1.39 6.36-1.08 6.36-1.08s8.03.76 17.39-.6c1.88-.27 4.35-.63 7.51-1.57 1.36-.4 2.17-.72 3.58-1.16.81-.26 1.51-.46 1.79-.54 1.99-.58 4.5-1.31 6.62-1.33 4.26-.04 7.32 2.77 7.53 2.96 2.18 2.03 2.92 4.45 3.12 5.23.24.92.32 1.72.35 2.38.18 4.4-1.7 7.52-2.42 10.79-.96 4.39.35 8.21 1.29 10.85 1.67 4.7 4.32 7.34 4.87 12.59.08.77.14 1.83-.09 3.1-.16.89-.8 3.85-3.42 6.16-1.93 1.7-3.98 2.22-4.82 2.41-5.64 1.27-10.83-2.07-11.95-2.79-1.62-1.04-2.05-1.69-4.4-3.04-.86-.5-2.61-1.49-4.96-2.32-4.96-1.75-6.95-.91-10.13-2.96-.41-.26-1.34-.98-2.27-2.14-3.84-4.79-1.3-9.71-5.49-14.93-.32-.4-.61-.69-1.18-1.29-2.56-2.65-5.24-4.6-7.45-6.2-1.07-.77-1.73-1.22-2.61-2.1-.74-.74-1.53-1.53-2.15-2.79-.27-.54-1.22-2.48-.8-4.49.14-.67.5-1.66 1.04-2.61.07-.13.14-.23.18-.3 0 0 .87-1.35 2.5-2.22l.01-.01Z"/><path fill="#fff" d="M50.81 5.12H9.73v50.32h41.08V5.12Z"/><path fill="#192232" d="M49.49 3.96h-9.24V2.64c0-.7-.28-1.37-.77-1.87S38.31 0 37.61 0h-13.2c-.7 0-1.37.28-1.87.77s-.77 1.17-.77 1.87v1.32h-9.24c-1.05 0-2.06.42-2.8 1.16-.74.74-1.16 1.75-1.16 2.8v46.2c0 1.05.42 2.06 1.16 2.8.74.74 1.75 1.16 2.8 1.16h36.96c1.05 0 2.06-.42 2.8-1.16.74-.74 1.16-1.75 1.16-2.8V7.92c0-1.05-.42-2.06-1.16-2.8a3.967 3.967 0 0 0-2.8-1.16ZM24.41 5.28V2.64h13.2V6.6h-13.2V5.28Zm26.4 48.84c0 .35-.14.69-.39.93-.25.25-.58.39-.93.39H12.53c-.73 0-1.32-.59-1.32-1.32V7.92c0-.73.59-1.32 1.32-1.32h9.24c0 .7.28 1.37.77 1.87.5.5 1.17.77 1.87.77h13.2c.7 0 1.37-.28 1.87-.77.5-.5.77-1.17.77-1.87h9.24c.35 0 .69.14.93.39.25.25.39.58.39.93v46.2Z"/><path fill="#192232" d="M44.54 18.48H29.06c-.73 0-1.32.59-1.32 1.32 0 .73.59 1.32 1.32 1.32h15.48c.73 0 1.32-.59 1.32-1.32 0-.73-.59-1.32-1.32-1.32ZM22.93 14.9l-3.63 3.58-.88-.88c-.25-.25-.59-.39-.94-.39s-.69.14-.94.39c-.51.51-.51 1.35 0 1.86l1.83 1.82c.51.51 1.35.51 1.86 0l4.57-4.55c.52-.52.52-1.36 0-1.87s-1.36-.52-1.87 0v.05-.01ZM44.54 31.37H29.06c-.73 0-1.32.59-1.32 1.32 0 .73.59 1.32 1.32 1.32h15.48c.73 0 1.32-.59 1.32-1.32 0-.73-.59-1.32-1.32-1.32ZM22.93 27.81l-3.63 3.62-.88-.88c-.25-.25-.59-.39-.94-.39s-.69.14-.94.39c-.51.51-.51 1.35 0 1.86l1.83 1.82c.51.51 1.35.51 1.86 0l4.57-4.55c.51-.52.51-1.35 0-1.87-.52-.51-1.35-.51-1.87 0ZM44.54 44.28H29.06c-.73 0-1.32.59-1.32 1.32 0 .73.59 1.32 1.32 1.32h15.48c.73 0 1.32-.59 1.32-1.32 0-.73-.59-1.32-1.32-1.32ZM22.93 40.71l-3.63 3.63-.88-.9c-.52-.53-1.37-.54-1.9-.03-.53.52-.54 1.37-.03 1.9l1.83 1.82c.51.51 1.35.51 1.86 0l4.57-4.57c.51-.51.51-1.35 0-1.86a1.31 1.31 0 0 0-1.82 0v.01Z"/></g></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h62v61H0z"/></clipPath></defs></svg>
            <span class="card__reading-time flex flex-center font-size-xs"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" aria-hidden="true"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z"></path></svg> 4 min read</span>
        </div>
        <div class="card__content grid-9 flow">
            <div>
                <a href="/categories/blog/" class="card__category no-margin" aria-label="View all posts">Blog</a>
                <h3 class="h4 no-margin"><a class="card__link no-decoration" href="#">Blog Title</a></h3>
            </div>
            <p class="font-size-sm">Ascot you probably haven't heard of them DSA glossier direct trade grailed, food truck biodiesel retro williamsburg fingerstache succulents lo-fi.</p>
        </div>
    </li>
    <li class="card grid gap-sm">
        <div class="card__icon grid-3">
            <svg xmlns="http://www.w3.org/2000/svg" width="62" height="61" fill="none"><g clip-path="url(#a)"><mask id="b" width="62" height="61" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:luminance"><path fill="#fff" d="M61.9 0H0v60.8h61.9V0Z"/></mask><g mask="url(#b)"><path fill="#CD1F40" d="M3.83 10.33c2.59-1.39 6.36-1.08 6.36-1.08s8.03.76 17.39-.6c1.88-.27 4.35-.63 7.51-1.57 1.36-.4 2.17-.72 3.58-1.16.81-.26 1.51-.46 1.79-.54 1.99-.58 4.5-1.31 6.62-1.33 4.26-.04 7.32 2.77 7.53 2.96 2.18 2.03 2.92 4.45 3.12 5.23.24.92.32 1.72.35 2.38.18 4.4-1.7 7.52-2.42 10.79-.96 4.39.35 8.21 1.29 10.85 1.67 4.7 4.32 7.34 4.87 12.59.08.77.14 1.83-.09 3.1-.16.89-.8 3.85-3.42 6.16-1.93 1.7-3.98 2.22-4.82 2.41-5.64 1.27-10.83-2.07-11.95-2.79-1.62-1.04-2.05-1.69-4.4-3.04-.86-.5-2.61-1.49-4.96-2.32-4.96-1.75-6.95-.91-10.13-2.96-.41-.26-1.34-.98-2.27-2.14-3.84-4.79-1.3-9.71-5.49-14.93-.32-.4-.61-.69-1.18-1.29-2.56-2.65-5.24-4.6-7.45-6.2-1.07-.77-1.73-1.22-2.61-2.1-.74-.74-1.53-1.53-2.15-2.79-.27-.54-1.22-2.48-.8-4.49.14-.67.5-1.66 1.04-2.61.07-.13.14-.23.18-.3 0 0 .87-1.35 2.5-2.22l.01-.01Z"/><path fill="#fff" d="M50.81 5.12H9.73v50.32h41.08V5.12Z"/><path fill="#192232" d="M49.49 3.96h-9.24V2.64c0-.7-.28-1.37-.77-1.87S38.31 0 37.61 0h-13.2c-.7 0-1.37.28-1.87.77s-.77 1.17-.77 1.87v1.32h-9.24c-1.05 0-2.06.42-2.8 1.16-.74.74-1.16 1.75-1.16 2.8v46.2c0 1.05.42 2.06 1.16 2.8.74.74 1.75 1.16 2.8 1.16h36.96c1.05 0 2.06-.42 2.8-1.16.74-.74 1.16-1.75 1.16-2.8V7.92c0-1.05-.42-2.06-1.16-2.8a3.967 3.967 0 0 0-2.8-1.16ZM24.41 5.28V2.64h13.2V6.6h-13.2V5.28Zm26.4 48.84c0 .35-.14.69-.39.93-.25.25-.58.39-.93.39H12.53c-.73 0-1.32-.59-1.32-1.32V7.92c0-.73.59-1.32 1.32-1.32h9.24c0 .7.28 1.37.77 1.87.5.5 1.17.77 1.87.77h13.2c.7 0 1.37-.28 1.87-.77.5-.5.77-1.17.77-1.87h9.24c.35 0 .69.14.93.39.25.25.39.58.39.93v46.2Z"/><path fill="#192232" d="M44.54 18.48H29.06c-.73 0-1.32.59-1.32 1.32 0 .73.59 1.32 1.32 1.32h15.48c.73 0 1.32-.59 1.32-1.32 0-.73-.59-1.32-1.32-1.32ZM22.93 14.9l-3.63 3.58-.88-.88c-.25-.25-.59-.39-.94-.39s-.69.14-.94.39c-.51.51-.51 1.35 0 1.86l1.83 1.82c.51.51 1.35.51 1.86 0l4.57-4.55c.52-.52.52-1.36 0-1.87s-1.36-.52-1.87 0v.05-.01ZM44.54 31.37H29.06c-.73 0-1.32.59-1.32 1.32 0 .73.59 1.32 1.32 1.32h15.48c.73 0 1.32-.59 1.32-1.32 0-.73-.59-1.32-1.32-1.32ZM22.93 27.81l-3.63 3.62-.88-.88c-.25-.25-.59-.39-.94-.39s-.69.14-.94.39c-.51.51-.51 1.35 0 1.86l1.83 1.82c.51.51 1.35.51 1.86 0l4.57-4.55c.51-.52.51-1.35 0-1.87-.52-.51-1.35-.51-1.87 0ZM44.54 44.28H29.06c-.73 0-1.32.59-1.32 1.32 0 .73.59 1.32 1.32 1.32h15.48c.73 0 1.32-.59 1.32-1.32 0-.73-.59-1.32-1.32-1.32ZM22.93 40.71l-3.63 3.63-.88-.9c-.52-.53-1.37-.54-1.9-.03-.53.52-.54 1.37-.03 1.9l1.83 1.82c.51.51 1.35.51 1.86 0l4.57-4.57c.51-.51.51-1.35 0-1.86a1.31 1.31 0 0 0-1.82 0v.01Z"/></g></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h62v61H0z"/></clipPath></defs></svg>
            <span class="card__reading-time flex flex-center font-size-xs"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" aria-hidden="true"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z"></path></svg> 4 min read</span>
        </div>
        <div class="card__content grid-9 flow">
            <div>
                <a href="/categories/blog/" class="card__category no-margin" aria-label="View all posts">Blog</a>
                <h3 class="h4 no-margin"><a class="card__link no-decoration" href="#">Blog Title</a></h3>
            </div>
            <p class="font-size-sm">Ascot you probably haven't heard of them DSA glossier direct trade grailed, food truck biodiesel retro williamsburg fingerstache succulents lo-fi.</p>
        </div>
    </li>
</ul>

.blog-feed--stacked {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

.blog-feed--stacked li:nth-of-type(1) { grid-area: 1 / 1 / 4 / 3; }
.blog-feed--stacked li:nth-of-type(2) { grid-area: 1 / 3 / 2 / 5; }
.blog-feed--stacked li:nth-of-type(3) { grid-area: 2 / 3 / 3 / 5; }
.blog-feed--stacked li:nth-of-type(4) { grid-area: 3 / 3 / 4 / 5; }

.blog-feed--stacked .card {
    width: 100%;
    max-width: 100%;
}

.blog-feed--stacked .card:nth-of-type(1) .card__icon {
    max-width: 75px;
}

.blog-feed--stacked .card__icon {
    display: grid;
    place-items: center;
}

.blog-feed--stacked .card__reading-time svg {
    height: 14px;   
    width: 14px;
    margin-right: 4px;
}

.blog-feed--stacked .card__category {
    font-size: $ic-100;
    font-weight: 700;
    text-transform: uppercase;
    opacity: .8;
    text-decoration: none;
    color: $secondary-color;
    z-index: 9;
}

<ul class="blog-feed--1 gap-md">
    <li class="card flex flex-column">
        <div class="card__meta">
            <a href="#" class="btn btn--secondary btn--category" aria-label="View all example posts">example</a>
        </div>
        <div class="card__image-wrap cover-image">
            <img src="https://source.unsplash.com/random/800x600?space" alt="" class="card__img">
            <div class="card__overlay">
                <div class="btn btn--secondary" aria-label="">Read More</div>
            </div>
        </div>
        <div class="card__content flow">
            <h3 class="h4"><a class="card__link no-decoration" href="#">Blog Title</a></h3>
            <div class="card__summary font-size-xs">Poke aesthetic street art post-ironic intelligentsia meditation, live-edge activated charcoal vexillologist pickled. Ramps Brooklyn truffaut, tattooed you probably haven't heard of them cred keffiyeh.</div>
        </div>
    </li>
    <li class="card flex flex-column">
        <div class="card__meta">
            <a href="#" class="btn btn--secondary btn--category" aria-label="View all example posts">example</a>
        </div>
        <div class="card__image-wrap cover-image">
            <img src="https://source.unsplash.com/random/800x600?space" alt="" class="card__img">
            <div class="card__overlay">
                <div class="btn btn--secondary" aria-label="">Read More</div>
            </div>
        </div>
        <div class="card__content flow">
            <h3 class="h4"><a class="card__link no-decoration" href="#">Blog Title</a></h3>
        </div>
    </li>
    <li class="card flex flex-column">
        <div class="card__meta">
            <a href="#" class="btn btn--secondary btn--category" aria-label="View all example posts">example</a>
        </div>
        <div class="card__image-wrap cover-image">
            <img src="https://source.unsplash.com/random/800x600?space" alt="" class="card__img">
            <div class="card__overlay">
                <div class="btn btn--secondary" aria-label="">Read More</div>
            </div>
        </div>
        <div class="card__content flow">
            <h3 class="h4"><a class="card__link no-decoration" href="#">Blog Title</a></h3>
        </div>
    </li>
    <li class="card">
        <div class="card__content flow">
            <h3 class="h4"><a class="card__link no-decoration" href="#">Get Started Today!</a></h3>
            <div class="card__summary font-size-xs">Start building your websites faster using these simple prebuilt HTML and CSS components.</div>
            <a class="btn btn--primary" href="#">Get Started</a>
        </div>
    </li>
</ul>

.blog-feed--1 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.blog-feed--1, 
.blog-feed--1 .card {
    max-width: none;
}

.blog-feed--1 li:nth-of-type(1) { 
    grid-area: 1 / 1 / 3 / 3;
}

.blog-feed--1 li:nth-of-type(2) { 
    grid-area: 1 / 3 / 2 / 4; 
}

.blog-feed--1 li:nth-of-type(3) { 
    grid-area: 1 / 4 / 2 / 5; 
}

.blog-feed--1 li:nth-of-type(4) { 
    grid-area: 2 / 3 / 3 / 5; 
}

<h2 class="text-color-white">Recent Posts</h2>
<ul class="blog-feed--2 grid-columns-3 max-width-none no-padding gap-md">
    <li class="card flex flex-column">
        <div class="card__meta">
            <a href="#" class="btn btn--secondary btn--category" aria-label="View all example posts">example</a>
        </div>
        <div class="card__image-wrap cover-image">
            <img src="https://source.unsplash.com/random/800x600?space" alt="" class="card__img">
            <div class="card__overlay">
                <div class="btn btn--secondary" aria-label="">Read More</div>
            </div>
        </div>
        <div class="card__content flow">
            <h3 class="h4"><a class="card__link no-decoration" href="#">Blog Title</a></h3>
            <div class="card__summary font-size-xs">Poke aesthetic street art post-ironic intelligentsia meditation, live-edge activated charcoal vexillologist pickled. Ramps Brooklyn truffaut, tattooed you probably haven't heard of them cred keffiyeh.</div>
        </div>
    </li>
    <li class="card flex flex-column">
        <div class="card__meta">
            <a href="#" class="btn btn--secondary btn--category" aria-label="View all example posts">example</a>
        </div>
        <div class="card__image-wrap cover-image">
            <img src="https://source.unsplash.com/random/800x600?space" alt="" class="card__img">
            <div class="card__overlay">
                <div class="btn btn--secondary" aria-label="">Read More</div>
            </div>
        </div>
        <div class="card__content flow">
            <h3 class="h4"><a class="card__link no-decoration" href="#">Blog Title</a></h3>
            <div class="card__summary font-size-xs">Thundercats heirloom praxis, venmo tonx godard pork belly. Narwhal JOMO sustainable, big mood heirloom man braid tbh quinoa normcore XOXO chartreuse neutra wolf tonx.</div>
        </div>
    </li>
    <li class="card flex flex-column">
        <div class="card__meta">
            <a href="#" class="btn btn--secondary btn--category" aria-label="View all example posts">example</a>
        </div>
        <div class="card__image-wrap cover-image">
            <img src="https://source.unsplash.com/random/800x600?space" alt="" class="card__img">
            <div class="card__overlay">
                <div class="btn btn--secondary" aria-label="">Read More</div>
            </div>
        </div>
        <div class="card__content flow">
            <h3 class="h4"><a class="card__link no-decoration" href="#">Blog Title</a></h3>
            <div class="card__summary font-size-xs">Hexagon hoodie, waistcoat artisan copper mug authentic coloring book tattooed 8-bit drinking vinegar. Flannel freegan before they sold out flexitarian blackbird Brooklyn celiac.</div>
        </div>
    </li>
</ul>
<div class="text-align-center">
    <a class="btn btn--primary" href="#">View All Posts</a>
</div>

.blog-feed--2, 
.blog-feed--2 .card {
    max-width: none;
}

<div class="block">
    <div class="wrapper-lg grid gap-sm">
        <div class="experts-list grid-12 grid-8-md shadow-lg bg-black-2 text-color-white flow">
            <h2 class="h3">Meet Our Experts</h2>
            <p>Our team of industry experts strive to create the most accurate, most clear, and most useful information on the internet.</p>
            <a class="btn btn--primary" href="#">Meet Our Experts</a>
            <ul class="staff-grid grid-columns-2 gap-sm no-padding">
                <li class="staff-card flex gap-sm bg-black">
                    <div class="staff-card__image">
                        <img src="https://source.unsplash.com/random/100x100?face" alt="" width="50" height="50">
                    </div>
                    <div class="margin-block-auto">
                        <span>Max Conversion</span><br>
                        <span class="text-style-slub">SEO Expert</span>
                    </div>
                </li>
                <li class="staff-card flex gap-sm bg-black">
                    <div class="staff-card__image">
                        <img src="https://source.unsplash.com/random/100x100?face" alt="" width="50" height="50">
                    </div>
                    <div class="margin-block-auto">
                        <span>Max Conversion</span><br>
                        <span class="text-style-slub">SEO Expert</span>
                    </div>
                </li>
                <li class="staff-card flex gap-sm bg-black">
                    <div class="staff-card__image">
                        <img src="https://source.unsplash.com/random/100x100?face" alt="" width="50" height="50">
                    </div>
                    <div class="margin-block-auto">
                        <span>Max Conversion</span><br>
                        <span class="text-style-slub">SEO Expert</span>
                    </div>
                </li>
                <li class="staff-card flex gap-sm bg-black">
                    <div class="staff-card__image">
                        <img src="https://source.unsplash.com/random/100x100?face" alt="" width="50" height="50">
                    </div>
                    <div class="margin-block-auto">
                        <span>Max Conversion</span><br>
                        <span class="text-style-slub">SEO Expert</span>
                    </div>
                </li>
            </ul>
        </div>
        <div class="blog-stardards grid-12 grid-4-md shadow-lg bg-black-2 text-color-white flow">
            <h2 class="h3">Our Standards</h2>
            <div>
                <h3 class="h4">Integrity</h3>
                <p>We produce responsible content that is honest, objective, and comprehensive.</p>
            </div>
            <div>
                <h3 class="h4">Reliability</h3>
                <p>We ensure content is credible and fact-checked by qualified personnel.</p>
            </div>
            <div>
                <h3 class="h4">Empathy</h3>
                <p>We break down complex issues to best support you with your health decisions.</p>
            </div>
            <a class="btn btn--primary" href="#">More About Our Standards</a>
        </div>
    </div>
</div>

.experts-list,
.blog-stardards {
    padding: 1.25rem;
}

.staff-grid {
    margin-top: 3rem;
}

.staff-card {
    margin-top: 0;
    padding: 1rem;
}

.staff-card__image img {
    width: 75px;
    height: 75px;
    object-fit: cover;
    border: 5px solid $body-black;
    border-radius: 50%;
}

Back to all posts

Blog

Blog Title

Thundercats messenger bag solarpunk, pabst portland godard typewriter tacos subway tile marxism shaman listicle viral celiac neutra. Thundercats mumblecore photo booth actually vegan polaroid portland fanny pack jawn marxism meditation seitan biodiesel. Tofu organic tousled, cloud bread flannel pop-up roof party semiotics banh mi live-edge unicorn franzen bitters drinking vinegar bespoke. Thundercats raw denim farm-to-table hashtag iPhone. Iceland kickstarter direct trade iPhone tilde pok pok. Lomo cardigan mustache raw denim narwhal swag offal.

Kitsch franzen iceland, af schlitz blue bottle irony migas readymade pickled poutine fam tote bag. Forage health goth twee yr. Occupy vaporware solarpunk, yuccie hoodie you probably haven't heard of them intelligentsia godard before they sold out scenester tofu. Portland edison bulb praxis vinyl. Selfies literally franzen chillwave chia pop-up subway tile schlitz big mood taiyaki. Photo booth tote bag swag celiac. Ascot pork belly dreamcatcher 8-bit.

Dreamcatcher plaid waistcoat meggings, VHS air plant semiotics la croix. Man braid paleo pug, readymade single-origin coffee fit stumptown cold-pressed try-hard. Flexitarian subway tile austin ugh, master cleanse sartorial sustainable. Pok pok bespoke sus subway tile, quinoa sartorial deep v yr. Raclette deep v scenester whatever, try-hard umami lyft cardigan poke kale chips forage hashtag. Gorpcore keffiyeh pour-over, schlitz organic pinterest edison bulb.

Gentrify vaporware next level mixtape master cleanse. Blackbird spyplane everyday carry squid hell of jean shorts, synth photo booth retro fanny pack seitan ugh. Whatever vexillologist tonx green juice roof party. Same vinyl godard taiyaki, artisan photo booth blackbird spyplane selfies cray quinoa dreamcatcher activated charcoal. Austin lumbersexual tonx distillery helvetica. Edison bulb man bun fanny pack, skateboard taxidermy JOMO cray.

<div class="back">
    <a class="flex flex-center" href="/blog/">
        <div class="icon-md icon-fill-white">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
        </div>
        <span>Back to all posts</span>
    </a>
</div>
<article class="flow margin-inline-auto">
    <div class="blog-hero flow">
        <div class="blog-hero__icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="76" height="57" fill="none"><g clip-path="url(#a)"><mask id="b" width="76" height="57" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:luminance"><path fill="#fff" d="M75.7 0H0v56.25h75.7V0Z"/></mask><g mask="url(#b)"><path fill="#CD1F40" d="M2.79 48.8c0-3.06 2.16-6.36 2.16-6.36s4.67-6.99 8.06-16.24c.68-1.86 1.58-4.31 2.28-7.66.3-1.44.42-2.34.71-3.86.17-.87.32-1.61.39-1.91.45-2.11 1.02-4.78 2.05-6.73C20.52 2.11 24.6.7 24.89.6c2.94-1 5.53-.47 6.34-.28.96.23 1.74.55 2.36.86 4.12 2.01 6.05 5.28 8.7 7.56 3.55 3.06 7.7 3.74 10.58 4.19 5.14.8 8.87-.33 13.95 1.77.75.31 1.74.78 2.8 1.62.74.59 3.13 2.64 3.95 6.19.61 2.61.06 4.74-.18 5.61-1.63 5.8-7.26 8.9-8.47 9.57-1.76.97-2.56 1.05-4.97 2.53-2.4 1.48-4.26 3.11-4.58 3.39-3.19 2.78-10.17 3.74-16.71 4.64-2.06.28-5.7.7-10.51 1.86-.79.19-1.19.29-1.76.45-3.7 1.03-6.81 2.52-9.38 3.76-1.24.6-1.97.98-3.22 1.36-1.05.31-2.16.64-3.62.59-.63-.02-2.87-.11-4.51-1.49-.55-.46-1.28-1.28-1.87-2.25-.08-.13-.15-.24-.19-.32 0 0-.8-1.46-.8-3.39l-.01-.02Z"/><path fill="#fff" d="M14.4 10.85c.89-.6 1.77-.77 2.25-.82.11-.04.28-.09.49-.14 1.62-.4 3.48-.21 4.68.41 2.93 1.52 3.39 6.41 2.32 9.6a8.44 8.44 0 0 1-.75 1.63l12.33-1.98c-2.96-3.92-2.96-8.64-.61-11.1 1.57-1.65 3.81-1.87 4.77-1.91.44-.03 3.27-.21 5.24 1.84 2 2.07 2.29 5.56.54 8.45-.32.66-.64 1.32-.95 1.98 1.93.07 3.86.14 5.79.2 1.73.59 3.45 1.18 5.18 1.77-1.22-3.21-.29-6.68 2.11-8.45 2.47-1.82 5.43-1.07 5.86-.95.81.24 3.42 1.12 4.5 3.47 1.45 3.15-.34 7.93-4.97 10.56l2.93 2.66c.61 3.27 1.23 6.54 1.84 9.81.79.39 1.59.77 2.38 1.16.82-.48 1.63-.95 2.45-1.43 1 .18 1.77.96 1.91 1.91.14.98-.42 1.83-1.09 2.25-.96.6-2.34.4-3.27-.54l-5.86.75c-.66-1.34-1.32-2.88-1.91-4.63-.4-1.19-.71-2.32-.96-3.37-.57 2.46-1.13 4.93-1.7 7.39-.57 1.45-1.14 2.91-1.7 4.36l-40.66-.21c.05-1 .09-1.99.14-2.99l-2.32-9.74-4.02 6.54c-4.87-6.99-6.69-9.72-6.99-10.29a.683.683 0 0 0-.13-.19c-.52-.59-1.72-.4-2.76-.08-.78-1.03-.7-2.4.07-3.2.58-.6 1.52-.85 2.32-.54 1.06.4 1.69 1.73 1.29 3.06 1.59 1.66 3.18 3.31 4.77 4.97.25.2.5.41.75.61 1.14-3.27 2.27-6.54 3.41-9.81l2.38.07c-.63-.34-3.04-1.73-4.09-4.7-.82-2.33-.52-4.87.48-6.61.24-.42.68-1.16 1.57-1.77h-.01Z"/><path fill="#192232" d="M40.24 22.35c-1.65 0-3.33-.78-4.76-2.22-1.11-1.13-2.02-2.6-2.57-4.15-.32-.9-.5-1.8-.54-2.67-.09-2.05.61-4.01 1.99-5.53a7.63 7.63 0 0 1 5.32-2.5c1.17-.05 2.32.15 3.4.62a7.627 7.627 0 0 1 4.63 6.69c.11 2.41-.89 5.24-2.56 7.2-1.34 1.59-2.96 2.47-4.67 2.56h-.24Zm-.19-15.03h-.27c-1.5.07-2.88.72-3.89 1.83a5.595 5.595 0 0 0-1.46 4.05c.03.67.18 1.37.43 2.09.44 1.27 1.19 2.48 2.09 3.39 1.08 1.09 2.29 1.66 3.44 1.61 1.42-.07 2.52-1.03 3.2-1.83 1.33-1.57 2.16-3.89 2.08-5.78-.1-2.16-1.4-4.04-3.39-4.9a5.52 5.52 0 0 0-2.22-.46h-.01ZM19.6 25.28c-1.23 0-2.53-.38-3.78-1.13-1.36-.81-2.61-2.01-3.53-3.38-.53-.79-.94-1.62-1.2-2.45-.6-1.96-.41-4.04.55-5.85a7.619 7.619 0 0 1 4.52-3.75c1.12-.35 2.28-.43 3.45-.25 2.92.46 5.28 2.49 6.15 5.32.71 2.31.45 5.29-.68 7.62-.9 1.88-2.24 3.14-3.88 3.64-.52.16-1.06.24-1.61.24l.01-.01Zm-1.17-14.85c-.56 0-1.11.08-1.65.25a5.569 5.569 0 0 0-3.31 2.74c-.7 1.33-.84 2.85-.4 4.29.2.64.52 1.28.94 1.92.75 1.12 1.77 2.1 2.87 2.76 1.32.78 2.64 1.03 3.73.69 1.36-.42 2.18-1.63 2.64-2.57.89-1.85 1.12-4.31.56-6.12a5.565 5.565 0 0 0-4.5-3.89c-.29-.04-.58-.07-.87-.07h-.01ZM60.39 26.82c-.87 0-1.69-.18-2.44-.53-1.56-.74-2.76-2.27-3.37-4.3-.45-1.52-.56-3.25-.31-4.87.14-.95.4-1.83.78-2.61a7.617 7.617 0 0 1 4.36-3.94c1.93-.69 4.02-.59 5.87.29 1.06.5 1.97 1.22 2.71 2.15a7.612 7.612 0 0 1 .94 8.08c-1.04 2.18-3.25 4.2-5.65 5.16-.99.4-1.96.6-2.88.6l-.01-.03Zm1.59-14.66c-.64 0-1.27.11-1.89.33-1.41.5-2.55 1.53-3.19 2.89a7.11 7.11 0 0 0-.6 2.05c-.21 1.33-.12 2.74.25 3.97.44 1.47 1.25 2.55 2.28 3.04 1.29.61 2.71.27 3.68-.11 1.91-.76 3.74-2.42 4.55-4.13.93-1.95.66-4.22-.69-5.91-.54-.67-1.21-1.2-1.99-1.57-.76-.36-1.58-.55-2.4-.55v-.01ZM62.98 46.82H14.23c-.57 0-1.03-.46-1.03-1.03 0-.57.46-1.03 1.03-1.03h48.75c.57 0 1.03.46 1.03 1.03 0 .57-.46 1.03-1.03 1.03Z"/><path fill="#192232" d="M10.34 35.38c-.3 0-.58-.13-.78-.36l-5.34-6.19a1.029 1.029 0 0 1 1.56-1.34l4.16 4.82 2.93-8.7c.13-.39.48-.66.88-.7l2.74-.24c.57-.05 1.06.37 1.12.93.06.56-.37 1.06-.93 1.12l-2.07.18-3.29 9.77c-.12.35-.41.61-.78.68-.07.01-.13.02-.2.02v.01ZM23.81 22.79c-.48 0-.91-.34-1.01-.84-.11-.56.26-1.1.82-1.2l12.4-2.36c.55-.11 1.1.26 1.2.82.11.56-.26 1.1-.82 1.2L24 22.77c-.06.01-.13.02-.19.02Z"/><path fill="#192232" d="M30.92 46.08c-.43 0-.83-.27-.97-.7-2.45-7.34-3.64-12.72-3.74-16.94 0-.26.09-.52.27-.71l8.01-8.83a1.027 1.027 0 0 1 1.52 1.38l-7.73 8.52c.16 3.95 1.32 9.03 3.62 15.93a1.026 1.026 0 0 1-.98 1.35Z"/><path fill="#192232" d="M32.28 46.08c-.55 0-1.01-.44-1.03-.99l-.51-15.37-3.03.74c-.55.13-1.11-.2-1.24-.76-.13-.55.2-1.11.76-1.24l4.26-1.04a1.031 1.031 0 0 1 1.27.96l.55 16.63c.02.57-.43 1.04-.99 1.06h-.03l-.01.01ZM38.4 22.01h-4.43c-.57 0-1.03-.46-1.03-1.03 0-.57.46-1.03 1.03-1.03h4.43c.57 0 1.03.46 1.03 1.03 0 .57-.46 1.03-1.03 1.03ZM18.46 46.08c-.38 0-.74-.21-.92-.57-1.35-2.71-2.27-5.93-2.85-10.01l-2.57 4.59c-.17.3-.48.5-.82.52-.35.02-.68-.13-.89-.4l-7.27-9.55c-.34-.45-.26-1.1.2-1.44.45-.34 1.1-.26 1.44.2l6.32 8.3 3.35-5.99c.22-.39.67-.6 1.11-.5.44.09.77.46.81.91.49 5.36 1.45 9.32 3.01 12.46a1.029 1.029 0 0 1-.92 1.49v-.01Z"/><path fill="#192232" d="M3.12 30.39C1.4 30.39 0 28.99 0 27.27c0-1.72 1.4-3.12 3.12-3.12 1.72 0 3.12 1.4 3.12 3.12 0 1.72-1.4 3.12-3.12 3.12Zm0-4.18c-.58 0-1.06.48-1.06 1.06 0 .58.48 1.06 1.06 1.06.58 0 1.06-.48 1.06-1.06 0-.58-.48-1.06-1.06-1.06ZM72.58 42.99c-1.72 0-3.12-1.4-3.12-3.12 0-1.72 1.4-3.12 3.12-3.12 1.72 0 3.12 1.4 3.12 3.12 0 1.72-1.4 3.12-3.12 3.12Zm0-4.18c-.58 0-1.06.48-1.06 1.06 0 .58.48 1.06 1.06 1.06.58 0 1.06-.48 1.06-1.06 0-.58-.48-1.06-1.06-1.06ZM42.01 36.63c-1.47 0-2.67-1.2-2.67-2.67s1.2-2.67 2.67-2.67 2.67 1.2 2.67 2.67-1.2 2.67-2.67 2.67Zm0-3.29c-.34 0-.62.28-.62.62 0 .34.28.62.62.62.34 0 .62-.28.62-.62 0-.34-.28-.62-.62-.62Z"/><path fill="#192232" d="M44.58 46.08h-.05c-.57-.03-1.01-.51-.98-1.07l.41-8.84c-.26.05-.53 0-.76-.13-.28-.18-.46-.48-.48-.82l-.1-1.82c-.02-.36.16-.71.46-.91l1.08-.71.27-5.85a1.027 1.027 0 0 1 1.87-.54l2.94 4.24c.16.23.22.51.16.78-.05.27-.21.51-.44.66l-2.8 1.84v.11l6.01-2.55-6.05-8.7-3.49-.15c-.57-.02-1.01-.5-.98-1.07.02-.57.51-1.01 1.07-.98l4 .18c.32.01.62.18.8.44l7.06 10.16c.18.25.23.57.14.87-.09.3-.3.54-.59.66l-8.09 3.43-.46 9.8c-.03.55-.48.98-1.03.98l.03-.01Zm1.77-17.03-.06 1.32.67-.44-.61-.88Z"/><path fill="#192232" d="m55.01 21.94-4.6-1.82h-5.02v-2.06h5.22c.13 0 .26.02.38.07l4.78 1.89-.75 1.91-.01.01ZM59.56 45.47l-1.88-.84c1.27-2.85 2.25-6.06 3-9.84.09-.45.46-.79.92-.83.45-.04.88.23 1.05.66l2.38 6.25 4.29-.34-.12-.83-1.5-.44c-.37-.11-.64-.41-.72-.78l-2.11-10.36-2.74-2.42 1.36-1.54 3 2.65c.17.15.28.35.33.56l2.06 10.09 1.54.45c.39.11.67.44.73.84l.37 2.57c.04.28-.04.57-.21.79-.17.22-.44.36-.72.38l-6.14.49c-.46.04-.88-.23-1.04-.66l-1.45-3.79c-.65 2.54-1.44 4.83-2.38 6.93l-.02.01ZM46.39 46.04l-2-.49.18-.74c1.06-4.37 2.16-8.89 2.11-10.82l2.05-.06c.06 2.21-1.02 6.65-2.17 11.36l-.18.74.01.01Z"/></g></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h76v57H0z"/></clipPath></defs></svg>
        </div>
        <div class="text-align-center">
            <a href="/categories/blog/" class="blog-hero__category no-margin" aria-label="View all posts">Blog</a>
            <h1 class="text-color-white">Blog Title</h1>
        </div>
        <div class="blog-hero__image-wrapper">
            <img src="https://source.unsplash.com/random/1200x600?space" alt="" class="blog-hero__img">
        </div>
    </div>
    <div class="article-body flow text-color-white">
        <p>Thundercats messenger bag solarpunk, pabst portland godard typewriter tacos subway tile marxism shaman listicle viral celiac neutra. Thundercats mumblecore photo booth actually vegan polaroid portland fanny pack jawn marxism meditation seitan biodiesel. Tofu organic tousled, cloud bread flannel pop-up roof party semiotics banh mi live-edge unicorn franzen bitters drinking vinegar bespoke. Thundercats raw denim farm-to-table hashtag iPhone. Iceland kickstarter direct trade iPhone tilde pok pok. Lomo cardigan mustache raw denim narwhal swag offal.</p>

        <p>Kitsch franzen iceland, af schlitz blue bottle irony migas readymade pickled poutine fam tote bag. Forage health goth twee yr. Occupy vaporware solarpunk, yuccie hoodie you probably haven't heard of them intelligentsia godard before they sold out scenester tofu. Portland edison bulb praxis vinyl. Selfies literally franzen chillwave chia pop-up subway tile schlitz big mood taiyaki. Photo booth tote bag swag celiac. Ascot pork belly dreamcatcher 8-bit.</p>

        <p>Dreamcatcher plaid waistcoat meggings, VHS air plant semiotics la croix. Man braid paleo pug, readymade single-origin coffee fit stumptown cold-pressed try-hard. Flexitarian subway tile austin ugh, master cleanse sartorial sustainable. Pok pok bespoke sus subway tile, quinoa sartorial deep v yr. Raclette deep v scenester whatever, try-hard umami lyft cardigan poke kale chips forage hashtag. Gorpcore keffiyeh pour-over, schlitz organic pinterest edison bulb.</p>

        <p>Gentrify vaporware next level mixtape master cleanse. Blackbird spyplane everyday carry squid hell of jean shorts, synth photo booth retro fanny pack seitan ugh. Whatever vexillologist tonx green juice roof party. Same vinyl godard taiyaki, artisan photo booth blackbird spyplane selfies cray quinoa dreamcatcher activated charcoal. Austin lumbersexual tonx distillery helvetica. Edison bulb man bun fanny pack, skateboard taxidermy JOMO cray.</p>
    </div>
</article>

.blog-back a {
    text-decoration: none;
    color: $white;
}

.blog-back a:hover,
.blog-back a:focus {
    color: $secondary-color;
}

.blog-back a:hover .icon-md,
.blog-back a:focus .icon-md {
    transform: translateX(-4px);
}

.blog-back a:hover svg,
.blog-back a:focus svg {
    fill: $secondary-color;
}

.blog-back .icon-md {
    position: relative;
    top: -1px;
    margin-right: 4px;
}

.blog-back .icon-md,
.blog-back svg {
    transition: .3s ease-in-out;
}

.blog-hero__icon {
 display: grid;
    place-items: center;
}

.blog-hero__category {
    font-size: $ic-100;
    font-weight: 700;
    text-transform: uppercase;
    opacity: .8;
    text-decoration: none;
    color: $secondary-color;
    z-index: 9;
}

.blog-hero__image-wrapper {
    margin-inline: -50px;
    box-shadow: 0 30px 30px -15px rgba(0,0,0,.25);
    margin-top: $ic-600;
}