{"id":72416,"date":"2026-05-26T13:57:46","date_gmt":"2026-05-26T10:57:46","guid":{"rendered":"https:\/\/twodots.gr\/?p=72416"},"modified":"2026-05-26T14:04:28","modified_gmt":"2026-05-26T11:04:28","slug":"mathimatikes-diataxeis-pos-oi-deiktes-kai-o-arithmos-adelfon-allazoun-ton-schediasmo","status":"publish","type":"post","link":"https:\/\/twodots.gr\/en\/mathimatikes-diataxeis-pos-oi-deiktes-kai-o-arithmos-adelfon-allazoun-ton-schediasmo\/","title":{"rendered":"Mathematical arrangements: how indicators and the number of siblings change the design"},"content":{"rendered":"<nav class=\"td-toc\" aria-label=\"Table of contents\"><div class=\"td-toc-title\">Contents<\/div><ol class=\"td-toc-list\"><li class=\"td-toc-item\"><a href=\"#ti-allazei-sto-css-layout-me-ta-sibling-index-kai-sibling-count\">What changes in CSS layout with sibling-index() and sibling-count()<\/a><\/li><li class=\"td-toc-item\"><a href=\"#giati-to-thema-afora-amesa-ta-e-commerce-sites\">Why the issue directly affects e-commerce sites<\/a><\/li><li class=\"td-toc-item\"><a href=\"#apo-ta-statika-grids-sta-mathimatika-components\">From static grids to mathematical components<\/a><\/li><li class=\"td-toc-item\"><a href=\"#step-by-step-odigos-axiopoiisis-choris-peritto-risko\">Step-by-Step guide to exploitation without unnecessary risk<\/a><\/li><li class=\"td-toc-item\"><a href=\"#kindynoi-ypostirixi-kai-stratigiki-ylopoiisis\">Risks, support and implementation strategy<\/a><\/li><\/ol><\/nav><h2 id=\"ti-allazei-sto-css-layout-me-ta-sibling-index-kai-sibling-count\">What changes in CSS layout with sibling-index() and sibling-count()<\/h2>\n<p>The Smashing Magazine article about mathematical layouts with the new CSS functions <code>sibling-index()<\/code> and <code>sibling-count()<\/code> opens up a very interesting discussion about where frontend development is headed. Until now, when a designer or developer wanted to create a dynamic pattern in a product grid, a staggered animation, a circular menu or a card layout that changes behavior depending on the number of elements, they usually needed JavaScript, Sass loops, utility classes or server-side logic. The new functions attempt to bring some of this logic directly into the CSS layout, allowing each element to \u00abknow\u00bb its position among its siblings and the total number of those elements.<\/p>\n<p>Simply put, the <code>sibling-index()<\/code> returns the order of an element within the same parent group, while <code>sibling-count()<\/code> returns how many sibling elements there are in total. This means that a product card, menu item or visual tile can be given a different offset, animation delay, rotation angle, opacity, size or color without adding a separate class to each item. For an e-commerce site with dozens of categories, dynamic filters and constantly changing product collections, this idea is especially important: styling ceases to be static and starts to react mathematically to the content structure.<\/p>\n<p>The important thing, of course, is to look at these possibilities with professional composure. The functions <code>sibling-index()<\/code> and <code>sibling-count()<\/code> belong to newer CSS specifications and are not yet a mature solution for production in all browsers. This does not diminish their value; on the contrary, it helps e-commerce owners and their teams to understand early on how CSS layout will evolve in the coming years. As has been the case with CSS Grid, Flexbox, the <code>:has()<\/code>, container queries and CSS nesting, features that today seem advanced tomorrow become part of everyday implementation.<\/p>\n<h2 id=\"giati-to-thema-afora-amesa-ta-e-commerce-sites\">Why the issue directly affects e-commerce sites<\/h2>\n<p><p>If you are planning or upgrading an online store, check out our guide to <a href=\"https:\/\/twodots.gr\/%ce%b4%ce%b7%ce%bc%ce%b9%ce%bf%cf%85%cf%81%ce%b3%ce%af%ce%b1-e-shop\/\">e-shop creation<\/a>.<\/p>\n<p>For budget and practical considerations, see also our article on <a href=\"https:\/\/twodots.gr\/%ce%ba%ce%b1%cf%84%ce%b1%cf%83%ce%ba%ce%b5%cf%85%ce%ae-eshop-%ce%ba%cf%8c%cf%83%cf%84%ce%bf%cf%82-%cf%80%ce%b1%cf%81%ce%ac%ce%b3%ce%bf%ce%bd%cf%84%ce%b5%cf%82-%cf%83%cf%85%ce%bc%ce%b2%ce%bf\/\">eShop construction costs<\/a>.<\/p>In an online store, layout is not just an aesthetic issue. It affects readability, product scanning speed, perception of reliability, ease of selection and ultimately conversion rate. A well-designed product grid layout helps the user to compare products without friction, while a bad grid forces them to think more than necessary. When there are badges, prices, discounts, swatches, ratings, stock messages and call-to-action buttons, the CSS layout should remain stable, clean and responsive, even when products have different headline lengths or different brand information.<\/p>\n<p>This is where the value of mathematical CSS comes in. Instead of manually specifying that the first item has a certain offset, the second item has another, the third item has another, and so on, we can use formulas. For example, a grid with featured categories could automatically calculate a different animation delay depending on the order of each card. A hero section with multiple promotional tiles could distribute its elements visually based on their number. A list of brand logos could gain rhythm and balance without hardcoded classes. These are all small details, but in e-commerce UX small details make the difference between a site that looks generic and a site that looks thoughtful, reliable and premium.<\/p>\n<p>For owners, the business value lies in maintenance. Every time a layout requires JavaScript for presentation only, technical debt increases. Every time a team needs to add classes like <code>item-1<\/code>, <code>item-2<\/code>, <code>item-3<\/code>, the likelihood of errors increases. Whenever a CMS or e-commerce platform dynamically produces content, manual rules become fragile. A smarter CSS layout can reduce this dependency and make templates more resilient to real commercial changes: new products, new bundles, seasonal campaigns, flash sales, landing pages and A\/B tests.<\/p>\n<h2 id=\"apo-ta-statika-grids-sta-mathimatika-components\">From static grids to mathematical components<\/h2>\n<p>The central idea behind functions <code>sibling-index()<\/code> and <code>sibling-count()<\/code> is that CSS accesses two critical data: location and count. These two quantities are enough to create complex patterns. If we know that an element is the third of eight, we can calculate progress rate, angle, delay, distance, scale, or color gradient. For example, in a product carousel, each item could theoretically get a different animation delay based on its index. In a radial menu, the angle of each item might be derived by dividing 360 degrees by the total number of items. In a list of \u00abyou might like\u00bb suggestions, visual emphasis might be dropped on the first items without altering the HTML.<\/p>\n<p>This changes the way we think about CSS custom properties. Until today, we often passed custom properties from HTML or JavaScript: <code>style=\"--i: 3\"<\/code>. With the new functions, some of this information can be calculated by the browser itself. A hypothetical example could be the following: <code>animation-delay: calc(sibling-index() * 80ms);;<\/code>. The first card starts earlier, the second a little later, the third even later. The result is a natural staggered reveal, ideal for category cards, collection tiles or editorial commerce blocks.<\/p>\n<p>The same applies to the relationship with responsive design. The more a site relies on dynamic components, the less practical it is to make separate exceptions for each case. CSS Grid and Flexbox have largely solved the problem of basic layout. Container queries solved the problem of the component reacting to its available width and not just the viewport. Tree-counting functions, as described in the CSS Values and Units Level 5 specification, add another layer: the component can react to its own internal structure as well.<\/p>\n<p>To get a clearer picture, it's worth looking at how recent CSS features have matured and are now already being used in serious projects. The <code>:has()<\/code>, for example, was for years something developers wanted but could not use widely. It has now gone into practical use, with specific minimum versions per browser, as shown in the graph below.<\/p>\n<div class=\"td-chart\" data-chart-type=\"bar\"><div class=\"td-chart-head\"><div class=\"td-chart-title\">Minimum browser versions for CSS :has()<\/div><div class=\"td-chart-subtitle\">Source: MDN Web Docs, browser compatibility data for :has()<\/div><\/div><div class=\"td-chart-body\"><div class=\"td-chart-row\"><div class=\"td-chart-label\">Safari<\/div><div class=\"td-chart-track\"><div class=\"td-chart-bar\" style=\"width:13%;background:#FCA311\"><\/div><\/div><div class=\"td-chart-value\">15.4 version<\/div><\/div><div class=\"td-chart-row\"><div class=\"td-chart-label\">Chrome<\/div><div class=\"td-chart-track\"><div class=\"td-chart-bar\" style=\"width:87%;background:#030633\"><\/div><\/div><div class=\"td-chart-value\">105 version<\/div><\/div><div class=\"td-chart-row\"><div class=\"td-chart-label\">Edge<\/div><div class=\"td-chart-track\"><div class=\"td-chart-bar\" style=\"width:87%;background:#555555\"><\/div><\/div><div class=\"td-chart-value\">105 version<\/div><\/div><div class=\"td-chart-row\"><div class=\"td-chart-label\">Firefox<\/div><div class=\"td-chart-track\"><div class=\"td-chart-bar\" style=\"width:100%;background:#E5E5E5\"><\/div><\/div><div class=\"td-chart-value\">121 version<\/div><\/div><\/div><\/div>\n<p>The practical implication is that teams monitoring new CSS capabilities can prepare in a timely manner without risking the user experience. Not every new feature needs to go directly into production. But it does need to be evaluated, tested on isolated components and put on a roadmap, especially when it can reduce JavaScript, simplify templates and improve the flexibility of the design system.<\/p>\n<h3>Examples of application in product grids, menus and animations<\/h3>\n<p>Let's transfer the theory to more practical e-commerce scenarios. A product grid layout with 12 products could display the cards with a progressive delay, without a JavaScript observer for each item. The delay would be based on <code>sibling-index()<\/code>, while the total number can be used to normalize the result so that a grid with 4 items and a grid with 20 items do not look too different. In a promotional section, the <code>sibling-count()<\/code> could help to distribute the available space: two banners spread symmetrically, three to create a more dynamic rhythm, four to get compact grid behaviour.<\/p>\n<p>In navigation menus, especially mega menus, these functions can create cleaner micro-interactions. A menu with categories can display links with a short time interval, giving a sense of speed without loading the site with unnecessary JavaScript. In brand pages, logos can be arranged in waves, in slightly different sizes or with subtle opacity progression. In editorial commerce templates, such as gift guides or seasonal landing pages, cards can form more natural compositions without the designer asking the developer for ten different modifier classes.<\/p>\n<p>But before we get there, teams already have more stable tools at their disposal, such as container queries. These allow a component to change its appearance based on the size of its container, not just the viewport. For responsive product cards, this is critical, because the same card can appear on homepage, listing page, carousel, search results and recommendation block with different available space. The chart below shows the minimum versions of container query support in key browsers.<\/p>\n<div class=\"td-chart\" data-chart-type=\"bar\"><div class=\"td-chart-head\"><div class=\"td-chart-title\">Minimum browser versions for Container Queries<\/div><div class=\"td-chart-subtitle\">Source: MDN Web Docs, browser compatibility data for CSS Container Queries<\/div><\/div><div class=\"td-chart-body\"><div class=\"td-chart-row\"><div class=\"td-chart-label\">Safari<\/div><div class=\"td-chart-track\"><div class=\"td-chart-bar\" style=\"width:15%;background:#FCA311\"><\/div><\/div><div class=\"td-chart-value\">16 version<\/div><\/div><div class=\"td-chart-row\"><div class=\"td-chart-label\">Chrome<\/div><div class=\"td-chart-track\"><div class=\"td-chart-bar\" style=\"width:95%;background:#030633\"><\/div><\/div><div class=\"td-chart-value\">105 version<\/div><\/div><div class=\"td-chart-row\"><div class=\"td-chart-label\">Edge<\/div><div class=\"td-chart-track\"><div class=\"td-chart-bar\" style=\"width:95%;background:#555555\"><\/div><\/div><div class=\"td-chart-value\">105 version<\/div><\/div><div class=\"td-chart-row\"><div class=\"td-chart-label\">Firefox<\/div><div class=\"td-chart-track\"><div class=\"td-chart-bar\" style=\"width:100%;background:#E5E5E5\"><\/div><\/div><div class=\"td-chart-value\">11 version<\/div><\/div><\/div><\/div>\n<p>If we look at it strategically, the new mathematical capabilities of CSS do not replace CSS Grid, Flexbox or container queries. They complement them. CSS Grid is still ideal for two-dimensional layouts, Flexbox for one-dimensional alignment and space allocation, container queries for component responsiveness, and the new sibling functions for structural awareness. When these are combined properly, a design system becomes \u00absmarter\u00bb without becoming heavier.<\/p>\n<h2 id=\"step-by-step-odigos-axiopoiisis-choris-peritto-risko\">Step-by-Step guide to exploitation without unnecessary risk<\/h2>\n<p>For an e-commerce owner, the goal is not to adopt every experimental CSS feature on day one. The goal is to build a process that allows his team to leverage frontend development safely. The first step is an audit of existing layouts. Identify places where the site uses JavaScript or hardcoded classes exclusively for visual patterns: staggered animations, item numbering, alternating layouts, dynamic grids, card offsets, manual delays and decorative transforms. These are the places that will likely benefit from a more mathematical CSS layout in the future.<\/p>\n<p>The second step is to create a small prototype outside of production. The team can build a demo product grid with 4, 8, 12 and 20 items and test how the logic would behave with <code>sibling-index()<\/code> and <code>sibling-count()<\/code>, even if the final support needs experimental flags or is limited to test environments. The goal is not to go live immediately, but to determine which components will be simplified when the support matures.<\/p>\n<p>The third step is to apply progressive enhancement. The basic experience should work with a fixed CSS Grid or Flexbox. More advanced behaviors should only be put in as enhancement. This means that a product grid must remain functional, readable and commercially effective even if the browser ignores the newer functions. At the CSS level, this logic is often organized by <code>@supports<\/code>, fallback styles and a clear hierarchy of rules.<\/p>\n<p>The fourth step is to link to actual UX metrics. Don't evaluate an animation because it \u00ablooks trendy\u00bb. Measure whether it positively or negatively affects the interaction. Track click-through on product cards, add-to-cart rate from listing pages, scroll depth on landing pages, time to first interaction and Core Web Vitals. If a more complex visual behavior doesn't help the user decide faster or trust the brand more, then it may just be decoration.<\/p>\n<p>The fifth step is documentation in the design system. If you decide that certain patterns, such as staggered cards or adaptive promotional tiles, have a place in your brand, document when they are used, what the fallbacks are, what accessibility constraints exist and what the limits of the movement are. For example, any CSS animations strategy must respect the <code>prefers-reduced-motion<\/code>, so that users who have declared reduced motion in their operating system do not receive unnecessary animation effects.<\/p>\n<p>The sixth step is to train the team. Designers need to know that CSS can now account for more things than it used to. Developers need to explain which patterns are production-ready and which are experimental. Marketers need to understand that every visual request has a maintenance cost. When these three parties speak the same language, the result is better pages, fewer ad hoc fixes, and faster implementation of campaigns.<\/p>\n<h2 id=\"kindynoi-ypostirixi-kai-stratigiki-ylopoiisis\">Risks, support and implementation strategy<\/h2>\n<p>The biggest mistake a company can make is to confuse \u00abtechnologically interesting\u00bb with \u00abproduction ready\u00bb. The functions <code>sibling-index()<\/code> and <code>sibling-count()<\/code> are exciting because they show the direction of CSS, not because they have to replace all the existing styling of an online store tomorrow morning. For production projects, the priority remains stability, accessibility, performance and consistency on real devices.<\/p>\n<p>The correct strategy is to separate features into three categories. First, mature tools like CSS Grid, Flexbox and responsive design rules, which should be the foundation of any modern e-commerce. Second, modern but now practical tools like container queries, <code>:has()<\/code> and CSS nesting, which can be used with careful fallbacks. Third, experimental features such as <code>sibling-index()<\/code> and the <code>sibling-count()<\/code>, worth putting into prototypes, internal demos and future planning.<\/p>\n<p>CSS nesting is a good example of a feature that went from the waiting phase to the practical use phase. For teams maintaining large stylesheets on e-commerce platforms, nesting can make code more organized, as long as it is not used too deeply and does not create selectors that are difficult to maintain. The chart below shows the minimum versions of support for CSS nesting in major browsers, according to MDN's browser compatibility data.<\/p>\n<div class=\"td-chart\" data-chart-type=\"bar\"><div class=\"td-chart-head\"><div class=\"td-chart-title\">Minimum browser versions for CSS Nesting<\/div><div class=\"td-chart-subtitle\">Source: MDN Web Docs, browser compatibility data for CSS Nesting<\/div><\/div><div class=\"td-chart-body\"><div class=\"td-chart-row\"><div class=\"td-chart-label\">Safari<\/div><div class=\"td-chart-track\"><div class=\"td-chart-bar\" style=\"width:14%;background:#FCA311\"><\/div><\/div><div class=\"td-chart-value\">16.5 version<\/div><\/div><div class=\"td-chart-row\"><div class=\"td-chart-label\">Chrome<\/div><div class=\"td-chart-track\"><div class=\"td-chart-bar\" style=\"width:96%;background:#030633\"><\/div><\/div><div class=\"td-chart-value\">112 version<\/div><\/div><div class=\"td-chart-row\"><div class=\"td-chart-label\">Edge<\/div><div class=\"td-chart-track\"><div class=\"td-chart-bar\" style=\"width:96%;background:#555555\"><\/div><\/div><div class=\"td-chart-value\">112 version<\/div><\/div><div class=\"td-chart-row\"><div class=\"td-chart-label\">Firefox<\/div><div class=\"td-chart-track\"><div class=\"td-chart-bar\" style=\"width:100%;background:#E5E5E5\"><\/div><\/div><div class=\"td-chart-value\">117 version<\/div><\/div><\/div><\/div>\n<p>From a business perspective, the key is to turn technological development into a competitive advantage without sacrificing stability. A smarter CSS layout can reduce dependencies, improve maintenance, speed up landing page production and make the brand experience more cohesive. But it's not a panacea. You need clean architecture, the right components, testing on real devices and collaboration between design, development and commercial teams.<\/p>\n<p>For TWO DOTS, the practical reading of the issue is clear: e-commerce sites that invest in a modern frontend should not just \u00ablook good\u00bb. They need to have layouts that can withstand change. Campaigns change, products change, collections change, marketing needs change. The more logic that can be expressed clearly, predictably and efficiently in CSS, the less fragile the system becomes. CSS layout is evolving from a presentation mechanism to a computational composition tool, and businesses that understand it early will have more flexible, faster and more maintainable digital stores.<\/p><p>Sources<\/p>\n<ul>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2026\/05\/mathematical-layouts-sibling-index-sibling-count\/\" target=\"_blank\" rel=\"noopener\">Smashing Magazine: Mathematical Layouts With CSS sibling-index() And sibling-count()<\/a><\/li>\n<li><a href=\"https:\/\/drafts.csswg.org\/css-values-5\/#tree-counting\" target=\"_blank\" rel=\"noopener\">CSS Values and Units Module Level 5: Tree-counting functions<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:has\" target=\"_blank\" rel=\"noopener\">MDN Web Docs: CSS :has()<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_containment\/Container_queries\" target=\"_blank\" rel=\"noopener\">MDN Web Docs: CSS Container Queries<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_nesting\" target=\"_blank\" rel=\"noopener\">MDN Web Docs: CSS Nesting<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_grid_layout\" target=\"_blank\" rel=\"noopener\">MDN Web Docs: CSS Grid Layout<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_flexible_box_layout\" target=\"_blank\" rel=\"noopener\">MDN Web Docs: CSS Flexible Box Layout<\/a><\/li>\n<\/ul><section class=\"td-faq\" aria-label=\"Frequently Asked Questions (FAQs)\"><details class=\"td-faq-item\"><summary class=\"td-faq-title\">What are the sibling-index() and sibling-count() functions in CSS?;<\/summary><div class=\"td-faq-content\"><p>The sibling-index() and sibling-count() functions are new CSS features that allow each element to know its position among its siblings and their total number. These functions can be used to create dynamic patterns, such as staggered animations, without the need for JavaScript.<\/p><\/div><\/details><details class=\"td-faq-item\"><summary class=\"td-faq-title\">How can sibling-index() and sibling-count() functions benefit e-commerce sites?;<\/summary><div class=\"td-faq-content\"><p>These functions allow the creation of flexible and dynamic layouts that react to the content. This means they can improve the user experience on e-commerce sites, reducing the need for JavaScript and making styling more resistant to change.<\/p><\/div><\/details><details class=\"td-faq-item\"><summary class=\"td-faq-title\">Are the sibling-index() and sibling-count() functions ready for production in all browsers?;<\/summary><div class=\"td-faq-content\"><p>No, the sibling-index() and sibling-count() functions belong to newer CSS specifications and are not yet fully supported by all browsers. It is important to use them with care and monitor their support by development teams.<\/p><\/div><\/details><details class=\"td-faq-item\"><summary class=\"td-faq-title\">What is the business value of the new CSS mathematical capabilities?;<\/summary><div class=\"td-faq-content\"><p>New CSS features, such as sibling-index() and sibling-count(), reduce dependency on JavaScript and make styling more resistant to changes. This can reduce technical debt and speed up the development and maintenance of e-commerce sites.<\/p><\/div><\/details><details class=\"td-faq-item\"><summary class=\"td-faq-title\">How do the new functions compare to CSS Grid and Flexbox?;<\/summary><div class=\"td-faq-content\"><p>The sibling-index() and sibling-count() functions complement the CSS Grid and Flexbox. While the CSS Grid and Flexbox resolve layout issues, the new functions add a layer of flexibility, allowing components to react to their own structure and position.<\/p><\/div><\/details><details class=\"td-faq-item\"><summary class=\"td-faq-title\">How can CSS mathematical layouts improve the UX in an online store?;<\/summary><div class=\"td-faq-content\"><p>CSS mathematical layouts allow for the creation of custom and dynamic patterns that can improve readability and overall user experience. By using these features, products can be presented in a more natural and attractive way.<\/p><\/div><\/details><\/section>\n\n<section class=\"td-service-cta\" aria-label=\"TWO DOTS services\"><div class=\"td-service-cta-content\"><div class=\"td-service-cta-eyebrow\">Need e-shop that converts?;<\/div><div class=\"td-service-cta-title\">We undertake eShop development &amp; optimization<\/div><div class=\"td-service-cta-text\">From product grids and UX to speed and conversion, we design e-commerce experiences that stand the test of time.<\/div><div class=\"td-service-cta-actions\"><a class=\"td-service-cta-button\" href=\"https:\/\/twodots.gr\/kataskevi-eshop\/\">View the service<\/a><\/div><\/div><\/section>","protected":false},"excerpt":{"rendered":"<p>The Smashing Magazine article looks at the new CSS functions sibling-index() and sibling-count(), which revolutionize CSS layout by allowing each element to know the position and number of its siblings. These functions can reduce the need for JavaScript and create more dynamic and adaptive e-commerce layouts. Although they are in the experimental stage, understanding and using them can provide a competitive advantage for businesses, improving the flexibility and maintainability of digital stores.<\/p>","protected":false},"author":1,"featured_media":72415,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"_gspb_post_css":"","footnotes":""},"categories":[406],"tags":[],"class_list":["post-72416","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/twodots.gr\/en\/wp-json\/wp\/v2\/posts\/72416","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/twodots.gr\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/twodots.gr\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/twodots.gr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/twodots.gr\/en\/wp-json\/wp\/v2\/comments?post=72416"}],"version-history":[{"count":0,"href":"https:\/\/twodots.gr\/en\/wp-json\/wp\/v2\/posts\/72416\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/twodots.gr\/en\/wp-json\/wp\/v2\/media\/72415"}],"wp:attachment":[{"href":"https:\/\/twodots.gr\/en\/wp-json\/wp\/v2\/media?parent=72416"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/twodots.gr\/en\/wp-json\/wp\/v2\/categories?post=72416"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/twodots.gr\/en\/wp-json\/wp\/v2\/tags?post=72416"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}