templates/bundles/OdiseoSyliusBlogPlugin/Shop/Article/index.html.twig line 1

Open in your IDE?
  1. {% import '@SyliusUi/Macro/pagination.html.twig' as pagination %}
  2. {% import '@SyliusUi/Macro/messages.html.twig' as messages %}
  4. {% extends '@SyliusShop/layout.html.twig' %}
  6. {% block content %}
  7.     <div class="container-blog">
  8.         <div class="container-h">
  9.         {% block blog_articles %}
  10.             {% if resources|length > 0 %}
  11.                 <div class="container-blog-article">
  12.                    <div class="column-left-article">
  13.                        {% for article in resources %}
  15.                            {% set month =  article.createdAt|date('F') %}
  16.                            {% set translation = 'sylius.ui.' ~ month %}
  17.                            {% if loop.first %}
  18.                            <div class="first-article">
  19.                                <div class="item">
  20.                                    {% if disqus_shortname() %}
  21.                                        <a href="{{ path('odiseo_sylius_blog_plugin_shop_article_show', {'slug' : article.slug}) }}" data-disqus-identifier="{{ url('odiseo_sylius_blog_plugin_shop_article_show', {'slug' : article.slug}) }}">
  22.                                            {% if article.images|length > 0 %}
  23.                                                <div class="image">
  24.                                                    <img src="{{ article.images[0].path|imagine_filter(filter|default('sylius_large')) }}" {{ sylius_test_html_attribute('main-image') }} alt="" class="ui bordered image" />
  25.                                                    {#                                           <img src="{{ article.images[0].path|imagine_filter(filter|default('sylius_small')) }}" alt="{{ article.images[0].path }}">#}
  26.                                                </div>
  27.                                            {% endif %}
  28.                                        </a>
  29.                                    {% else %}
  30.                                        <a href="{{ path('odiseo_sylius_blog_plugin_shop_article_show', {'slug' : article.slug}) }}">
  31.                                            {% if article.images|length > 0 %}
  32.                                                <div class="image">
  33.                                                    <img src="{{ article.images[0].path|imagine_filter(filter|default('sylius_large')) }}" {{ sylius_test_html_attribute('main-image') }} alt="" class="ui bordered image" />
  34.                                                </div>
  35.                                            {% endif %}
  36.                                        </a>
  37.                                    {% endif %}
  38.                                    <div class="description">
  39.                                        <div class="desc-date">
  40.                                            <svg width="18" height="21" viewBox="0 0 18 21" fill="none" xmlns="http://www.w3.org/2000/svg">
  41.                                                <path d="M5 12.5C4.71667 12.5 4.479 12.404 4.287 12.212C4.09567 12.0207 4 11.7833 4 11.5C4 11.2167 4.09567 10.979 4.287 10.787C4.479 10.5957 4.71667 10.5 5 10.5C5.28333 10.5 5.521 10.5957 5.713 10.787C5.90433 10.979 6 11.2167 6 11.5C6 11.7833 5.90433 12.0207 5.713 12.212C5.521 12.404 5.28333 12.5 5 12.5ZM9 12.5C8.71667 12.5 8.47933 12.404 8.288 12.212C8.096 12.0207 8 11.7833 8 11.5C8 11.2167 8.096 10.979 8.288 10.787C8.47933 10.5957 8.71667 10.5 9 10.5C9.28333 10.5 9.521 10.5957 9.713 10.787C9.90433 10.979 10 11.2167 10 11.5C10 11.7833 9.90433 12.0207 9.713 12.212C9.521 12.404 9.28333 12.5 9 12.5ZM13 12.5C12.7167 12.5 12.4793 12.404 12.288 12.212C12.096 12.0207 12 11.7833 12 11.5C12 11.2167 12.096 10.979 12.288 10.787C12.4793 10.5957 12.7167 10.5 13 10.5C13.2833 10.5 13.5207 10.5957 13.712 10.787C13.904 10.979 14 11.2167 14 11.5C14 11.7833 13.904 12.0207 13.712 12.212C13.5207 12.404 13.2833 12.5 13 12.5ZM2 20.5C1.45 20.5 0.979 20.3043 0.587 19.913C0.195667 19.521 0 19.05 0 18.5V4.5C0 3.95 0.195667 3.47933 0.587 3.088C0.979 2.696 1.45 2.5 2 2.5H3V0.5H5V2.5H13V0.5H15V2.5H16C16.55 2.5 17.021 2.696 17.413 3.088C17.8043 3.47933 18 3.95 18 4.5V18.5C18 19.05 17.8043 19.521 17.413 19.913C17.021 20.3043 16.55 20.5 16 20.5H2ZM2 18.5H16V8.5H2V18.5Z" fill="#858585"/>
  42.                                            </svg>
  43.                                            {{ article.createdAt|date('j') }} {{ translation|trans }}, {{ article.createdAt|date('Y') }}
  44.                                        </div>
  45.                                        <h3>
  46.                                            <a href="{{ path('odiseo_sylius_blog_plugin_shop_article_show', {'slug' : article.slug}) }}" data-disqus-identifier="{{ url('odiseo_sylius_blog_plugin_shop_article_show', {'slug' : article.slug}) }}">
  47.                                            {{article.translations['fr_FR'].title}}
  48.                                              </a>
  49.                                        </h3>
  50.                                        <p>
  51.                                            {% if article.content|striptags|length > 200 %}
  52.                                                {{ article.content|striptags|slice(0, 200)|raw }}...
  53.                                            {% else %}
  54.                                                {{ article.content|striptags|raw }}
  55.                                            {% endif %}
  56.                                        </p>
  57.                                    </div>
  58.                                </div>
  59.                            </div>
  60.                            {% endif %}
  61.                        {% endfor %}
  62.                    </div>
  63.                     <div class="column-right-article">
  64.                         {% for article in resources %}
  65.                             {% set month =  article.createdAt|date('F') %}
  66.                             {% set translation = 'sylius.ui.' ~ month %}
  67.                                 {% if loop.index <= 5 and loop.index0 != 0 %}
  68.                                     <div class="other-article">
  69.                                         <div class="item">
  70.                                             {% if disqus_shortname() %}
  71.                                                 <a href="{{ path('odiseo_sylius_blog_plugin_shop_article_show', {'slug' : article.slug}) }}" data-disqus-identifier="{{ url('odiseo_sylius_blog_plugin_shop_article_show', {'slug' : article.slug}) }}">
  72.                                                     {% if article.images|length > 0 %}
  73.                                                         <div class="image">
  74.                                                             <img src="{{ article.images[0].path|imagine_filter(filter|default('sylius_large')) }}" {{ sylius_test_html_attribute('main-image') }} alt="" class="ui bordered image" />
  75.                                                         </div>
  76.                                                     {% endif %}
  77.                                                 </a>
  78.                                             {% else %}
  79.                                                 <a href="{{ path('odiseo_sylius_blog_plugin_shop_article_show', {'slug' : article.slug}) }}">
  80.                                                     {% if article.images|length > 0 %}
  81.                                                         <div class="image">
  82.                                                             <img src="{{ article.images[0].path|imagine_filter(filter|default('sylius_large')) }}" {{ sylius_test_html_attribute('main-image') }} alt="" class="ui bordered image" />
  83.                                                         </div>
  84.                                                     {% endif %}
  85.                                                 </a>
  86.                                             {% endif %}
  87.                                             <div class="description">
  88.                                                 <div class="desc-date">
  89.                                                     <svg width="18" height="21" viewBox="0 0 18 21" fill="none" xmlns="http://www.w3.org/2000/svg">
  90.                                                         <path d="M5 12.5C4.71667 12.5 4.479 12.404 4.287 12.212C4.09567 12.0207 4 11.7833 4 11.5C4 11.2167 4.09567 10.979 4.287 10.787C4.479 10.5957 4.71667 10.5 5 10.5C5.28333 10.5 5.521 10.5957 5.713 10.787C5.90433 10.979 6 11.2167 6 11.5C6 11.7833 5.90433 12.0207 5.713 12.212C5.521 12.404 5.28333 12.5 5 12.5ZM9 12.5C8.71667 12.5 8.47933 12.404 8.288 12.212C8.096 12.0207 8 11.7833 8 11.5C8 11.2167 8.096 10.979 8.288 10.787C8.47933 10.5957 8.71667 10.5 9 10.5C9.28333 10.5 9.521 10.5957 9.713 10.787C9.90433 10.979 10 11.2167 10 11.5C10 11.7833 9.90433 12.0207 9.713 12.212C9.521 12.404 9.28333 12.5 9 12.5ZM13 12.5C12.7167 12.5 12.4793 12.404 12.288 12.212C12.096 12.0207 12 11.7833 12 11.5C12 11.2167 12.096 10.979 12.288 10.787C12.4793 10.5957 12.7167 10.5 13 10.5C13.2833 10.5 13.5207 10.5957 13.712 10.787C13.904 10.979 14 11.2167 14 11.5C14 11.7833 13.904 12.0207 13.712 12.212C13.5207 12.404 13.2833 12.5 13 12.5ZM2 20.5C1.45 20.5 0.979 20.3043 0.587 19.913C0.195667 19.521 0 19.05 0 18.5V4.5C0 3.95 0.195667 3.47933 0.587 3.088C0.979 2.696 1.45 2.5 2 2.5H3V0.5H5V2.5H13V0.5H15V2.5H16C16.55 2.5 17.021 2.696 17.413 3.088C17.8043 3.47933 18 3.95 18 4.5V18.5C18 19.05 17.8043 19.521 17.413 19.913C17.021 20.3043 16.55 20.5 16 20.5H2ZM2 18.5H16V8.5H2V18.5Z" fill="#858585"/>
  91.                                                     </svg>
  92.                                                     {{ article.createdAt|date('j') }} {{ translation|trans }}, {{ article.createdAt|date('Y') }}
  93.                                                 </div>
  94.                                                 <h3>
  95.                                                     <a href="{{ path('odiseo_sylius_blog_plugin_shop_article_show', {'slug' : article.slug}) }}" data-disqus-identifier="{{ url('odiseo_sylius_blog_plugin_shop_article_show', {'slug' : article.slug}) }}">
  96.                                                         {{ article.translations['fr_FR'].title }}
  97.                                                     </a>
  98.                                                 </h3>
  99.                                             </div>
  100.                                         </div>
  101.                                     </div>
  102.                                 {% endif %}
  104.                         {% endfor %}
  105.                     </div>
  106.                 </div>
  107.             {% else %}
  108.                 {{ messages.info('sylius.ui.no_results_to_display') }}
  109.             {% endif %}
  110.                 <div class="ui stackable two column grid" id="last-item-article-responsive">
  111.                     {% if resources[1] is defined %}
  112.                         <div class="item">
  113.                             <div class="content">
  114.                                 <a class="header" href="{{ path('odiseo_sylius_blog_plugin_shop_article_show', {'slug' : resources[1].slug}) }}">
  115.                                     {% if resources[1].images|length > 0 %}
  116.                                         <div class="image">
  117.                                             <img src="{{ resources[1].images[0].path|imagine_filter(filter|default('sylius_large')) }}" {{ sylius_test_html_attribute('main-image') }} alt="" class="ui bordered image" />
  118.                                         </div>
  119.                                     {% endif %}
  120.                                 </a>
  121.                                 <div class="description">
  122.                                     {% set month =  resources[1].createdAt|date('F') %}
  123.                                     {% set translation = 'sylius.ui.' ~ month %}
  124.                                     <div class="desc-date">
  125.                                         <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
  126.                                             <path d="M7 15C6.64583 15 6.34875 14.88 6.10875 14.64C5.86958 14.4008 5.75 14.1042 5.75 13.75C5.75 13.3958 5.86958 13.0988 6.10875 12.8588C6.34875 12.6196 6.64583 12.5 7 12.5C7.35417 12.5 7.65125 12.6196 7.89125 12.8588C8.13042 13.0988 8.25 13.3958 8.25 13.75C8.25 14.1042 8.13042 14.4008 7.89125 14.64C7.65125 14.88 7.35417 15 7 15ZM12 15C11.6458 15 11.3492 14.88 11.11 14.64C10.87 14.4008 10.75 14.1042 10.75 13.75C10.75 13.3958 10.87 13.0988 11.11 12.8588C11.3492 12.6196 11.6458 12.5 12 12.5C12.3542 12.5 12.6513 12.6196 12.8913 12.8588C13.1304 13.0988 13.25 13.3958 13.25 13.75C13.25 14.1042 13.1304 14.4008 12.8913 14.64C12.6513 14.88 12.3542 15 12 15ZM17 15C16.6458 15 16.3492 14.88 16.11 14.64C15.87 14.4008 15.75 14.1042 15.75 13.75C15.75 13.3958 15.87 13.0988 16.11 12.8588C16.3492 12.6196 16.6458 12.5 17 12.5C17.3542 12.5 17.6508 12.6196 17.89 12.8588C18.13 13.0988 18.25 13.3958 18.25 13.75C18.25 14.1042 18.13 14.4008 17.89 14.64C17.6508 14.88 17.3542 15 17 15ZM3.25 25C2.5625 25 1.97375 24.7554 1.48375 24.2663C0.994583 23.7763 0.75 23.1875 0.75 22.5V5C0.75 4.3125 0.994583 3.72417 1.48375 3.235C1.97375 2.745 2.5625 2.5 3.25 2.5H4.5V0H7V2.5H17V0H19.5V2.5H20.75C21.4375 2.5 22.0263 2.745 22.5163 3.235C23.0054 3.72417 23.25 4.3125 23.25 5V22.5C23.25 23.1875 23.0054 23.7763 22.5163 24.2663C22.0263 24.7554 21.4375 25 20.75 25H3.25ZM3.25 22.5H20.75V10H3.25V22.5Z" fill="#858585"/>
  127.                                         </svg>
  128.                                         {{ resources[1].createdAt|date('j') }} {{ translation|trans }}, {{ resources[1].createdAt|date('Y') }}
  129.                                         <style>
  130.                                             .description .desc-date svg {
  131.                                                 color: #E35E31;
  132.                                             }
  133.                                         </style>
  134.                                     </div>
  135.                                     <h3>
  136.                                         <a href="{{ path('odiseo_sylius_blog_plugin_shop_article_show', {'slug' : resources[1].slug}) }}" data-disqus-identifier="{{ url('odiseo_sylius_blog_plugin_shop_article_show', {'slug' : resources[1].slug}) }}">
  137.                                             {{ resources[1].translations['fr_FR'].title }}
  138.                                         </a>
  139.                                     </h3>
  140.                                     <p>
  141.                                         {% if resources[1].content|striptags|length > 200 %}
  142.                                             {{ resources[1].content|striptags|slice(0, 200)|raw }}...
  143.                                         {% else %}
  144.                                             {{ resources[1].content|striptags|raw }}
  145.                                         {% endif %}
  146.                                     </p>
  147.                                 </div>
  148.                             </div>
  149.                         </div>
  150.                     {% endif %}
  151.                     {% if resources[2] is defined %}
  152.                         <div class="item">
  153.                             <div class="content">
  154.                                 <a class="header" href="{{ path('odiseo_sylius_blog_plugin_shop_article_show', {'slug' : resources[2].slug}) }}">
  155.                                     {% if resources[2].images|length > 0 %}
  156.                                         <div class="image">
  157.                                             <img src="{{ resources[2].images[0].path|imagine_filter(filter|default('sylius_large')) }}" {{ sylius_test_html_attribute('main-image') }} alt="" class="ui bordered image" />
  158.                                         </div>
  159.                                     {% endif %}
  160.                                 </a>
  161.                                 <div class="description">
  162.                                     {% set month =  resources[2].createdAt|date('F') %}
  163.                                     {% set translation = 'sylius.ui.' ~ month %}
  164.                                     <div class="desc-date">
  165.                                         <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
  166.                                             <path d="M7 15C6.64583 15 6.34875 14.88 6.10875 14.64C5.86958 14.4008 5.75 14.1042 5.75 13.75C5.75 13.3958 5.86958 13.0988 6.10875 12.8588C6.34875 12.6196 6.64583 12.5 7 12.5C7.35417 12.5 7.65125 12.6196 7.89125 12.8588C8.13042 13.0988 8.25 13.3958 8.25 13.75C8.25 14.1042 8.13042 14.4008 7.89125 14.64C7.65125 14.88 7.35417 15 7 15ZM12 15C11.6458 15 11.3492 14.88 11.11 14.64C10.87 14.4008 10.75 14.1042 10.75 13.75C10.75 13.3958 10.87 13.0988 11.11 12.8588C11.3492 12.6196 11.6458 12.5 12 12.5C12.3542 12.5 12.6513 12.6196 12.8913 12.8588C13.1304 13.0988 13.25 13.3958 13.25 13.75C13.25 14.1042 13.1304 14.4008 12.8913 14.64C12.6513 14.88 12.3542 15 12 15ZM17 15C16.6458 15 16.3492 14.88 16.11 14.64C15.87 14.4008 15.75 14.1042 15.75 13.75C15.75 13.3958 15.87 13.0988 16.11 12.8588C16.3492 12.6196 16.6458 12.5 17 12.5C17.3542 12.5 17.6508 12.6196 17.89 12.8588C18.13 13.0988 18.25 13.3958 18.25 13.75C18.25 14.1042 18.13 14.4008 17.89 14.64C17.6508 14.88 17.3542 15 17 15ZM3.25 25C2.5625 25 1.97375 24.7554 1.48375 24.2663C0.994583 23.7763 0.75 23.1875 0.75 22.5V5C0.75 4.3125 0.994583 3.72417 1.48375 3.235C1.97375 2.745 2.5625 2.5 3.25 2.5H4.5V0H7V2.5H17V0H19.5V2.5H20.75C21.4375 2.5 22.0263 2.745 22.5163 3.235C23.0054 3.72417 23.25 4.3125 23.25 5V22.5C23.25 23.1875 23.0054 23.7763 22.5163 24.2663C22.0263 24.7554 21.4375 25 20.75 25H3.25ZM3.25 22.5H20.75V10H3.25V22.5Z" fill="#858585"/>
  167.                                         </svg>
  168.                                         {{ resources[2].createdAt|date('j') }} {{ translation|trans }}, {{ resources[2].createdAt|date('Y') }}
  169.                                         <style>
  170.                                             .description .desc-date svg {
  171.                                                 color: #E35E31;
  172.                                             }
  173.                                         </style>
  174.                                     </div>
  175.                                     <h3>
  176.                                         <a href="{{ path('odiseo_sylius_blog_plugin_shop_article_show', {'slug' : resources[2].slug}) }}" data-disqus-identifier="{{ url('odiseo_sylius_blog_plugin_shop_article_show', {'slug' : resources[2].slug}) }}">
  177.                                             {{ resources[2].translations['fr_FR'].title }}
  178.                                         </a>
  179.                                     </h3>
  180.                                     <p>
  181.                                         {% if resources[2].content|striptags|length > 200 %}
  182.                                             {{ resources[2].content|striptags|slice(0, 200)|raw }}...
  183.                                         {% else %}
  184.                                             {{ resources[2].content|striptags|raw }}
  185.                                         {% endif %}
  186.                                     </p>
  187.                                 </div>
  188.                             </div>
  189.                         </div>
  190.                     {% endif %}
  191.                 </div>
  192.                 <div class="sixteen wide mobile four wide computer column" id="last-item-article-destock">
  193.                     {% if resources|length > 0 %}
  194.                         <div class="latest-items">
  195.                             {% for article in resources %}
  196.                                 {% if loop.index > 5 %}
  197.                                 <div class="item">
  198.                                     <div class="content">
  199.                                         <a class="header" href="{{ path('odiseo_sylius_blog_plugin_shop_article_show', {'slug' : article.slug}) }}">
  200.                                             {% if article.images|length > 0 %}
  201.                                                 <div class="image">
  202.                                                     <img src="{{ article.images[0].path|imagine_filter(filter|default('sylius_large')) }}" {{ sylius_test_html_attribute('main-image') }} alt="" class="ui bordered image" />
  203.                                                 </div>
  204.                                             {% endif %}
  205.                                         </a>
  206.                                         <div class="description">
  207.                                             {% set month =  article.createdAt|date('F') %}
  208.                                             {% set translation = 'sylius.ui.' ~ month %}
  209.                                             <div class="desc-date">
  210.                                                 <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
  211.                                                     <path d="M7 15C6.64583 15 6.34875 14.88 6.10875 14.64C5.86958 14.4008 5.75 14.1042 5.75 13.75C5.75 13.3958 5.86958 13.0988 6.10875 12.8588C6.34875 12.6196 6.64583 12.5 7 12.5C7.35417 12.5 7.65125 12.6196 7.89125 12.8588C8.13042 13.0988 8.25 13.3958 8.25 13.75C8.25 14.1042 8.13042 14.4008 7.89125 14.64C7.65125 14.88 7.35417 15 7 15ZM12 15C11.6458 15 11.3492 14.88 11.11 14.64C10.87 14.4008 10.75 14.1042 10.75 13.75C10.75 13.3958 10.87 13.0988 11.11 12.8588C11.3492 12.6196 11.6458 12.5 12 12.5C12.3542 12.5 12.6513 12.6196 12.8913 12.8588C13.1304 13.0988 13.25 13.3958 13.25 13.75C13.25 14.1042 13.1304 14.4008 12.8913 14.64C12.6513 14.88 12.3542 15 12 15ZM17 15C16.6458 15 16.3492 14.88 16.11 14.64C15.87 14.4008 15.75 14.1042 15.75 13.75C15.75 13.3958 15.87 13.0988 16.11 12.8588C16.3492 12.6196 16.6458 12.5 17 12.5C17.3542 12.5 17.6508 12.6196 17.89 12.8588C18.13 13.0988 18.25 13.3958 18.25 13.75C18.25 14.1042 18.13 14.4008 17.89 14.64C17.6508 14.88 17.3542 15 17 15ZM3.25 25C2.5625 25 1.97375 24.7554 1.48375 24.2663C0.994583 23.7763 0.75 23.1875 0.75 22.5V5C0.75 4.3125 0.994583 3.72417 1.48375 3.235C1.97375 2.745 2.5625 2.5 3.25 2.5H4.5V0H7V2.5H17V0H19.5V2.5H20.75C21.4375 2.5 22.0263 2.745 22.5163 3.235C23.0054 3.72417 23.25 4.3125 23.25 5V22.5C23.25 23.1875 23.0054 23.7763 22.5163 24.2663C22.0263 24.7554 21.4375 25 20.75 25H3.25ZM3.25 22.5H20.75V10H3.25V22.5Z" fill="#858585"/>
  212.                                                 </svg>
  213.                                                 {{ article.createdAt|date('j') }} {{ translation|trans }}, {{ article.createdAt|date('Y') }}
  214.                                                 <style>
  215.                                                     .description .desc-date svg {
  216.                                                         color: #E35E31;
  217.                                                     }
  218.                                                 </style>
  219.                                             </div>
  220.                                             <h3>
  221.                                                 <a href="{{ path('odiseo_sylius_blog_plugin_shop_article_show', {'slug' : article.slug}) }}" data-disqus-identifier="{{ url('odiseo_sylius_blog_plugin_shop_article_show', {'slug' : article.slug}) }}">
  222.                                                     {{ article.translations['fr_FR'].title }}
  223.                                                 </a>
  224.                                             </h3>
  225.                                             <p>
  226.                                                 {% if article.content|striptags|length > 200 %}
  227.                                                     {{ article.content|striptags|slice(0, 200)|raw }}...
  228.                                                 {% else %}
  229.                                                     {{ article.content|striptags|raw }}
  230.                                                 {% endif %}
  231.                                             </p>
  232.                                         </div>
  233.                                     </div>
  234.                                 </div>
  235.                                 {% endif %}
  236.                             {% endfor %}
  237.                         </div>
  238.                     {% endif %}
  239.                 </div>
  240.             </div>
  241.         {% endblock %}
  243.         {% if disqus_shortname() %}
  244.             {% block blog_disqus %}
  245.                 {% include '@OdiseoSyliusBlogPlugin/Shop/Article/_disqus.html.twig' %}
  246.             {% endblock %}
  247.         {% endif %}
  248.     </div>
  251.     <style>
  252.         /*.desc-date{*/
  253.         /*    display: inline-flex;*/
  254.         /*    gap: 1rem;*/
  255.         /*    align-items: flex-end;*/
  256.         /*}*/
  257.         /*!*#main-container{*!*/
  258.         /*!*    margin-top: 7.5rem ;*!*/
  259.         /*!*}*!*/
  260.         /*.container-blog-article{*/
  261.         /*    display: grid;*/
  262.         /*    grid-template-columns: 1fr 1fr;*/
  263.         /*    gap: 2rem;*/
  264.         /*    padding-bottom: 4rem;*/
  265.         /*}*/
  266.         /*.container-blog{*/
  267.         /*    padding-top: 2rem;*/
  268.         /*}*/
  269.         /*.description > *{*/
  270.         /*    margin-top: 1rem !important;*/
  271.         /*}*/
  272.         /*.description h3 {*/
  273.         /*    margin: 0;*/
  274.         /*    font-size: 1.75rem;*/
  275.         /*}*/
  276.         /*.description h3 a {*/
  277.         /*    color: #000;*/
  278.         /*}*/
  279.         /*.first-article .image{*/
  280.         /*    width: 100%;*/
  281.         /*    height: auto;*/
  282.         /*}*/
  283.         /*.column-left-article{*/
  284.         /*!*    first column*!*/
  285.         /*    grid-column: span 1;*/
  286.         /*}*/
  287.         /*.column-right-article{*/
  288.         /*    display: flex;*/
  289.         /*    flex-direction: column;*/
  290.         /*    !*gap: 1rem;*!*/
  291.         /*}*/
  293.         /*.column-right-article .other-article:first-of-type .item{*/
  294.         /*    padding: 0 0 0.5rem 0 ;*/
  295.         /*}*/
  296.         /*.column-right-article .other-article:last-of-type .item{*/
  297.         /*    padding: 0.5rem 0 0 0 ;*/
  298.         /*    border: 0;*/
  299.         /*}*/
  300.         /*.other-article .item{*/
  301.         /*    display: flex;*/
  302.         /*    flex-direction: row-reverse;*/
  303.         /*    align-items: center;*/
  304.         /*    justify-content: space-between;*/
  305.         /*    gap: 2rem;*/
  306.         /*    padding: 0.5rem 0;*/
  307.         /*    border-bottom: 1px solid #D9D9D9;*/
  308.         /*}*/
  309.         /*.other-article .item .image img{*/
  310.         /*    width: 200px !important;*/
  311.         /*    max-width: none !important;*/
  312.         /*    height: auto;*/
  313.         /*}*/
  314.         /*.other-article .description{*/
  315.         /*    width: 100%;*/
  316.         /*}*/
  317.     </style>
  318. {% endblock %}