No notes defined.

<div class='c-country-maps'>
    <h1 class='c-heading'>
        Country Maps
    </h1>

    <div class='c-collection c-country-maps__collection'>
        <ul class='c-collection__items l-grid l-grid--compact'>
            <li class='c-collection__items__item l-grid__item'>
                <figure class='c-country-map c-country-maps__country-map'>
                    <span class='c-country-map__map'>
                        <span class='c-icon c-icon--huge c-icon--map-am'>
                            <img src='../../graphic/maps/map-am.svg' alt='' />
                        </span> </span>
                    <figcaption class='c-country-map__content'>
                        <span class='c-icon c-icon--flag-am'>
                            <img src='../../graphic/flags/am.svg' alt='' />
                        </span>
                        <h1 class='c-heading c-heading--minor'>
                            Հայաստան
                        </h1>
                        <p class='c-country-map__localized-name'>Armenia</p>
                    </figcaption>
                </figure>
            </li>
            <li class='c-collection__items__item l-grid__item'>
                <figure class='c-country-map c-country-maps__country-map'>
                    <span class='c-country-map__map'>
                        <span class='c-icon c-icon--huge c-icon--map-at'>
                            <img src='../../graphic/maps/map-at.svg' alt='' />
                        </span> </span>
                    <figcaption class='c-country-map__content'>
                        <span class='c-icon c-icon--flag-at'>
                            <img src='../../graphic/flags/at.svg' alt='' />
                        </span>
                        <h1 class='c-heading c-heading--minor'>
                            Österreich
                        </h1>
                        <p class='c-country-map__localized-name'>Austria</p>
                    </figcaption>
                </figure>
            </li>
            <li class='c-collection__items__item l-grid__item'>
                <figure class='c-country-map c-country-maps__country-map'>
                    <span class='c-country-map__map'>
                        <span class='c-icon c-icon--huge c-icon--map-ba'>
                            <img src='../../graphic/maps/map-ba.svg' alt='' />
                        </span> </span>
                    <figcaption class='c-country-map__content'>
                        <span class='c-icon c-icon--flag-ba'>
                            <img src='../../graphic/flags/ba.svg' alt='' />
                        </span>
                        <h1 class='c-heading c-heading--minor'>
                            Bosna i Hercegovina
                        </h1>
                        <p class='c-country-map__localized-name'>Bosnia and Herzegovina</p>
                    </figcaption>
                </figure>
            </li>
            <li class='c-collection__items__item l-grid__item'>
                <figure class='c-country-map c-country-maps__country-map'>
                    <span class='c-country-map__map'>
                        <span class='c-icon c-icon--huge c-icon--map-br'>
                            <img src='../../graphic/maps/map-br.svg' alt='' />
                        </span> </span>
                    <figcaption class='c-country-map__content'>
                        <span class='c-icon c-icon--flag-br'>
                            <img src='../../graphic/flags/br.svg' alt='' />
                        </span>
                        <h1 class='c-heading c-heading--minor'>
                            Brasil
                        </h1>
                        <p class='c-country-map__localized-name'>Brazil</p>
                    </figcaption>
                </figure>
            </li>
            <li class='c-collection__items__item l-grid__item'>
                <figure class='c-country-map c-country-maps__country-map'>
                    <span class='c-country-map__map'>
                        <span class='c-icon c-icon--huge c-icon--map-bg'>
                            <img src='../../graphic/maps/map-bg.svg' alt='' />
                        </span> </span>
                    <figcaption class='c-country-map__content'>
                        <span class='c-icon c-icon--flag-bg'>
                            <img src='../../graphic/flags/bg.svg' alt='' />
                        </span>
                        <h1 class='c-heading c-heading--minor'>
                            България
                        </h1>
                        <p class='c-country-map__localized-name'>Bulgaria</p>
                    </figcaption>
                </figure>
            </li>
            <li class='c-collection__items__item l-grid__item'>
                <figure class='c-country-map c-country-maps__country-map'>
                    <span class='c-country-map__map'>
                        <span class='c-icon c-icon--huge c-icon--map-cz'>
                            <img src='../../graphic/maps/map-cz.svg' alt='' />
                        </span> </span>
                    <figcaption class='c-country-map__content'>
                        <span class='c-icon c-icon--flag-cz'>
                            <img src='../../graphic/flags/cz.svg' alt='' />
                        </span>
                        <h1 class='c-heading c-heading--minor'>
                            Česko
                        </h1>
                        <p class='c-country-map__localized-name'>Czechia</p>
                    </figcaption>
                </figure>
            </li>
            <li class='c-collection__items__item l-grid__item'>
                <figure class='c-country-map c-country-maps__country-map'>
                    <span class='c-country-map__map'>
                        <span class='c-icon c-icon--huge c-icon--map-cd'>
                            <img src='../../graphic/maps/map-cd.svg' alt='' />
                        </span> </span>
                    <figcaption class='c-country-map__content'>
                        <span class='c-icon c-icon--flag-cd'>
                            <img src='../../graphic/flags/cd.svg' alt='' />
                        </span>
                        <h1 class='c-heading c-heading--minor'>
                            RD Congo
                        </h1>
                        <p class='c-country-map__localized-name'>DR Congo</p>
                    </figcaption>
                </figure>
            </li>
            <li class='c-collection__items__item l-grid__item'>
                <figure class='c-country-map c-country-maps__country-map'>
                    <span class='c-country-map__map'>
                        <span class='c-icon c-icon--huge c-icon--map-ge'>
                            <img src='../../graphic/maps/map-ge.svg' alt='' />
                        </span> </span>
                    <figcaption class='c-country-map__content'>
                        <span class='c-icon c-icon--flag-ge'>
                            <img src='../../graphic/flags/ge.svg' alt='' />
                        </span>
                        <h1 class='c-heading c-heading--minor'>
                            საქართველო
                        </h1>
                        <p class='c-country-map__localized-name'>Georgia</p>
                    </figcaption>
                </figure>
            </li>
            <li class='c-collection__items__item l-grid__item'>
                <figure class='c-country-map c-country-maps__country-map'>
                    <span class='c-country-map__map'>
                        <span class='c-icon c-icon--huge c-icon--map-hr'>
                            <img src='../../graphic/maps/map-hr.svg' alt='' />
                        </span> </span>
                    <figcaption class='c-country-map__content'>
                        <span class='c-icon c-icon--flag-hr'>
                            <img src='../../graphic/flags/hr.svg' alt='' />
                        </span>
                        <h1 class='c-heading c-heading--minor'>
                            Hrvatska
                        </h1>
                        <p class='c-country-map__localized-name'>Croatia</p>
                    </figcaption>
                </figure>
            </li>
            <li class='c-collection__items__item l-grid__item'>
                <figure class='c-country-map c-country-maps__country-map'>
                    <span class='c-country-map__map'>
                        <span class='c-icon c-icon--huge c-icon--map-hu'>
                            <img src='../../graphic/maps/map-hu.svg' alt='' />
                        </span> </span>
                    <figcaption class='c-country-map__content'>
                        <span class='c-icon c-icon--flag-hu'>
                            <img src='../../graphic/flags/hu.svg' alt='' />
                        </span>
                        <h1 class='c-heading c-heading--minor'>
                            Magyarország
                        </h1>
                        <p class='c-country-map__localized-name'>Hungary</p>
                    </figcaption>
                </figure>
            </li>
            <li class='c-collection__items__item l-grid__item'>
                <figure class='c-country-map c-country-maps__country-map'>
                    <span class='c-country-map__map'>
                        <span class='c-icon c-icon--huge c-icon--map-in'>
                            <img src='../../graphic/maps/map-in.svg' alt='' />
                        </span> </span>
                    <figcaption class='c-country-map__content'>
                        <span class='c-icon c-icon--flag-in'>
                            <img src='../../graphic/flags/in.svg' alt='' />
                        </span>
                        <h1 class='c-heading c-heading--minor'>
                            Bhārat Gaṇarājya
                        </h1>
                        <p class='c-country-map__localized-name'>India</p>
                    </figcaption>
                </figure>
            </li>
            <li class='c-collection__items__item l-grid__item'>
                <figure class='c-country-map c-country-maps__country-map'>
                    <span class='c-country-map__map'>
                        <span class='c-icon c-icon--huge c-icon--map-jo'>
                            <img src='../../graphic/maps/map-jo.svg' alt='' />
                        </span> </span>
                    <figcaption class='c-country-map__content'>
                        <span class='c-icon c-icon--flag-jo'>
                            <img src='../../graphic/flags/jo.svg' alt='' />
                        </span>
                        <h1 class='c-heading c-heading--minor'>
                            الأردن
                        </h1>
                        <p class='c-country-map__localized-name'>Jordan</p>
                    </figcaption>
                </figure>
            </li>
            <li class='c-collection__items__item l-grid__item'>
                <figure class='c-country-map c-country-maps__country-map'>
                    <span class='c-country-map__map'>
                        <span class='c-icon c-icon--huge c-icon--map-kz'>
                            <img src='../../graphic/maps/map-kz.svg' alt='' />
                        </span> </span>
                    <figcaption class='c-country-map__content'>
                        <span class='c-icon c-icon--flag-kz'>
                            <img src='../../graphic/flags/kz.svg' alt='' />
                        </span>
                        <h1 class='c-heading c-heading--minor'>
                            Қазақстан
                        </h1>
                        <p class='c-country-map__localized-name'>Kazakhstan</p>
                    </figcaption>
                </figure>
            </li>
            <li class='c-collection__items__item l-grid__item'>
                <figure class='c-country-map c-country-maps__country-map'>
                    <span class='c-country-map__map'>
                        <span class='c-icon c-icon--huge c-icon--map-lb'>
                            <img src='../../graphic/maps/map-lb.svg' alt='' />
                        </span> </span>
                    <figcaption class='c-country-map__content'>
                        <span class='c-icon c-icon--flag-lb'>
                            <img src='../../graphic/flags/lb.svg' alt='' />
                        </span>
                        <h1 class='c-heading c-heading--minor'>
                            لُبْنَان
                        </h1>
                        <p class='c-country-map__localized-name'>Lebanon</p>
                    </figcaption>
                </figure>
            </li>
            <li class='c-collection__items__item l-grid__item'>
                <figure class='c-country-map c-country-maps__country-map'>
                    <span class='c-country-map__map'>
                        <span class='c-icon c-icon--huge c-icon--map-md'>
                            <img src='../../graphic/maps/map-md.svg' alt='' />
                        </span> </span>
                    <figcaption class='c-country-map__content'>
                        <span class='c-icon c-icon--flag-md'>
                            <img src='../../graphic/flags/md.svg' alt='' />
                        </span>
                        <h1 class='c-heading c-heading--minor'>
                            Moldova
                        </h1>
                        <p class='c-country-map__localized-name'>Moldova</p>
                    </figcaption>
                </figure>
            </li>
            <li class='c-collection__items__item l-grid__item'>
                <figure class='c-country-map c-country-maps__country-map'>
                    <span class='c-country-map__map'>
                        <span class='c-icon c-icon--huge c-icon--map-me'>
                            <img src='../../graphic/maps/map-me.svg' alt='' />
                        </span> </span>
                    <figcaption class='c-country-map__content'>
                        <span class='c-icon c-icon--flag-me'>
                            <img src='../../graphic/flags/me.svg' alt='' />
                        </span>
                        <h1 class='c-heading c-heading--minor'>
                            Crna Gora
                        </h1>
                        <p class='c-country-map__localized-name'>Montenegro</p>
                    </figcaption>
                </figure>
            </li>
            <li class='c-collection__items__item l-grid__item'>
                <figure class='c-country-map c-country-maps__country-map'>
                    <span class='c-country-map__map'>
                        <span class='c-icon c-icon--huge c-icon--map-mx'>
                            <img src='../../graphic/maps/map-mx.svg' alt='' />
                        </span> </span>
                    <figcaption class='c-country-map__content'>
                        <span class='c-icon c-icon--flag-mx'>
                            <img src='../../graphic/flags/mx.svg' alt='' />
                        </span>
                        <h1 class='c-heading c-heading--minor'>
                            Mexico
                        </h1>
                        <p class='c-country-map__localized-name'>Mexico</p>
                    </figcaption>
                </figure>
            </li>
            <li class='c-collection__items__item l-grid__item'>
                <figure class='c-country-map c-country-maps__country-map'>
                    <span class='c-country-map__map'>
                        <span class='c-icon c-icon--huge c-icon--map-pl'>
                            <img src='../../graphic/maps/map-pl.svg' alt='' />
                        </span> </span>
                    <figcaption class='c-country-map__content'>
                        <span class='c-icon c-icon--flag-pl'>
                            <img src='../../graphic/flags/pl.svg' alt='' />
                        </span>
                        <h1 class='c-heading c-heading--minor'>
                            Polska
                        </h1>
                        <p class='c-country-map__localized-name'>Poland</p>
                    </figcaption>
                </figure>
            </li>
            <li class='c-collection__items__item l-grid__item'>
                <figure class='c-country-map c-country-maps__country-map'>
                    <span class='c-country-map__map'>
                        <span class='c-icon c-icon--huge c-icon--map-ro'>
                            <img src='../../graphic/maps/map-ro.svg' alt='' />
                        </span> </span>
                    <figcaption class='c-country-map__content'>
                        <span class='c-icon c-icon--flag-ro'>
                            <img src='../../graphic/flags/ro.svg' alt='' />
                        </span>
                        <h1 class='c-heading c-heading--minor'>
                            România
                        </h1>
                        <p class='c-country-map__localized-name'>Romania</p>
                    </figcaption>
                </figure>
            </li>
            <li class='c-collection__items__item l-grid__item'>
                <figure class='c-country-map c-country-maps__country-map'>
                    <span class='c-country-map__map'>
                        <span class='c-icon c-icon--huge c-icon--map-ru'>
                            <img src='../../graphic/maps/map-ru.svg' alt='' />
                        </span> </span>
                    <figcaption class='c-country-map__content'>
                        <span class='c-icon c-icon--flag-ru'>
                            <img src='../../graphic/flags/ru.svg' alt='' />
                        </span>
                        <h1 class='c-heading c-heading--minor'>
                            Росси́я
                        </h1>
                        <p class='c-country-map__localized-name'>Russia</p>
                    </figcaption>
                </figure>
            </li>
            <li class='c-collection__items__item l-grid__item'>
                <figure class='c-country-map c-country-maps__country-map'>
                    <span class='c-country-map__map'>
                        <span class='c-icon c-icon--huge c-icon--map-mk'>
                            <img src='../../graphic/maps/map-mk.svg' alt='' />
                        </span> </span>
                    <figcaption class='c-country-map__content'>
                        <span class='c-icon c-icon--flag-mk'>
                            <img src='../../graphic/flags/mk.svg' alt='' />
                        </span>
                        <h1 class='c-heading c-heading--minor'>
                            Северна Македонија
                        </h1>
                        <p class='c-country-map__localized-name'>North Macedonia</p>
                    </figcaption>
                </figure>
            </li>
            <li class='c-collection__items__item l-grid__item'>
                <figure class='c-country-map c-country-maps__country-map'>
                    <span class='c-country-map__map'>
                        <span class='c-icon c-icon--huge c-icon--map-si'>
                            <img src='../../graphic/maps/map-si.svg' alt='' />
                        </span> </span>
                    <figcaption class='c-country-map__content'>
                        <span class='c-icon c-icon--flag-si'>
                            <img src='../../graphic/flags/si.svg' alt='' />
                        </span>
                        <h1 class='c-heading c-heading--minor'>
                            Slovenija
                        </h1>
                        <p class='c-country-map__localized-name'>Slovenia</p>
                    </figcaption>
                </figure>
            </li>
            <li class='c-collection__items__item l-grid__item'>
                <figure class='c-country-map c-country-maps__country-map'>
                    <span class='c-country-map__map'>
                        <span class='c-icon c-icon--huge c-icon--map-sk'>
                            <img src='../../graphic/maps/map-sk.svg' alt='' />
                        </span> </span>
                    <figcaption class='c-country-map__content'>
                        <span class='c-icon c-icon--flag-sk'>
                            <img src='../../graphic/flags/sk.svg' alt='' />
                        </span>
                        <h1 class='c-heading c-heading--minor'>
                            Slovensko
                        </h1>
                        <p class='c-country-map__localized-name'>Slovakia</p>
                    </figcaption>
                </figure>
            </li>
            <li class='c-collection__items__item l-grid__item'>
                <figure class='c-country-map c-country-maps__country-map'>
                    <span class='c-country-map__map'>
                        <span class='c-icon c-icon--huge c-icon--map-rs'>
                            <img src='../../graphic/maps/map-rs.svg' alt='' />
                        </span> </span>
                    <figcaption class='c-country-map__content'>
                        <span class='c-icon c-icon--flag-rs'>
                            <img src='../../graphic/flags/rs.svg' alt='' />
                        </span>
                        <h1 class='c-heading c-heading--minor'>
                            Srbija
                        </h1>
                        <p class='c-country-map__localized-name'>Serbia</p>
                    </figcaption>
                </figure>
            </li>
            <li class='c-collection__items__item l-grid__item'>
                <figure class='c-country-map c-country-maps__country-map'>
                    <span class='c-country-map__map'>
                        <span class='c-icon c-icon--huge c-icon--map-tr'>
                            <img src='../../graphic/maps/map-tr.svg' alt='' />
                        </span> </span>
                    <figcaption class='c-country-map__content'>
                        <span class='c-icon c-icon--flag-tr'>
                            <img src='../../graphic/flags/tr.svg' alt='' />
                        </span>
                        <h1 class='c-heading c-heading--minor'>
                            Türkiye
                        </h1>
                        <p class='c-country-map__localized-name'>Turkey</p>
                    </figcaption>
                </figure>
            </li>
            <li class='c-collection__items__item l-grid__item'>
                <figure class='c-country-map c-country-maps__country-map'>
                    <span class='c-country-map__map'>
                        <span class='c-icon c-icon--huge c-icon--map-ug'>
                            <img src='../../graphic/maps/map-ug.svg' alt='' />
                        </span> </span>
                    <figcaption class='c-country-map__content'>
                        <span class='c-icon c-icon--flag-ug'>
                            <img src='../../graphic/flags/ug.svg' alt='' />
                        </span>
                        <h1 class='c-heading c-heading--minor'>
                            Uganda
                        </h1>
                        <p class='c-country-map__localized-name'>Uganda</p>
                    </figcaption>
                </figure>
            </li>
            <li class='c-collection__items__item l-grid__item'>
                <figure class='c-country-map c-country-maps__country-map'>
                    <span class='c-country-map__map'>
                        <span class='c-icon c-icon--huge c-icon--map-ua'>
                            <img src='../../graphic/maps/map-ua.svg' alt='' />
                        </span> </span>
                    <figcaption class='c-country-map__content'>
                        <span class='c-icon c-icon--flag-ua'>
                            <img src='../../graphic/flags/ua.svg' alt='' />
                        </span>
                        <h1 class='c-heading c-heading--minor'>
                            Україна
                        </h1>
                        <p class='c-country-map__localized-name'>Ukraine</p>
                    </figcaption>
                </figure>
            </li>
        </ul>
    </div>
</div>
<div class='{{ get_component_class( 'country-maps', display ) }}'>
    {% if heading %}
        {% include '@unit/heading/heading.twig' with heading %}
    {% endif %}
    
    {% include '@group/collection/collection.twig' with collection %}
</div>
{
  "bodyclass": "container-fluid",
  "heading": {
    "text": "Country Maps"
  },
  "collection": {
    "display": {
      "component": "country-maps"
    },
    "collection": {
      "display": {
        "itemTemplate": "unit/country-map/country-map",
        "listClass": [
          "l-grid",
          "l-grid--compact"
        ],
        "itemClass": [
          "l-grid__item"
        ]
      },
      "items": [
        {
          "icon": {
            "iso": "am"
          },
          "heading": {
            "text": "Հայաստան"
          },
          "localized_name": "Armenia"
        },
        {
          "icon": {
            "iso": "at"
          },
          "heading": {
            "text": "Österreich"
          },
          "localized_name": "Austria"
        },
        {
          "icon": {
            "iso": "ba"
          },
          "heading": {
            "text": "Bosna i Hercegovina"
          },
          "localized_name": "Bosnia and Herzegovina"
        },
        {
          "icon": {
            "iso": "br"
          },
          "heading": {
            "text": "Brasil"
          },
          "localized_name": "Brazil"
        },
        {
          "icon": {
            "iso": "bg"
          },
          "heading": {
            "text": "България"
          },
          "localized_name": "Bulgaria"
        },
        {
          "icon": {
            "iso": "cz"
          },
          "heading": {
            "text": "Česko"
          },
          "localized_name": "Czechia"
        },
        {
          "icon": {
            "iso": "cd"
          },
          "heading": {
            "text": "RD Congo"
          },
          "localized_name": "DR Congo"
        },
        {
          "icon": {
            "iso": "ge"
          },
          "heading": {
            "text": "საქართველო"
          },
          "localized_name": "Georgia"
        },
        {
          "icon": {
            "iso": "hr"
          },
          "heading": {
            "text": "Hrvatska"
          },
          "localized_name": "Croatia"
        },
        {
          "icon": {
            "iso": "hu"
          },
          "heading": {
            "text": "Magyarország"
          },
          "localized_name": "Hungary"
        },
        {
          "icon": {
            "iso": "in"
          },
          "heading": {
            "text": "Bhārat Gaṇarājya"
          },
          "localized_name": "India"
        },
        {
          "icon": {
            "iso": "jo"
          },
          "heading": {
            "text": "الأردن"
          },
          "localized_name": "Jordan"
        },
        {
          "icon": {
            "iso": "kz"
          },
          "heading": {
            "text": "Қазақстан"
          },
          "localized_name": "Kazakhstan"
        },
        {
          "icon": {
            "iso": "lb"
          },
          "heading": {
            "text": "لُبْنَان"
          },
          "localized_name": "Lebanon"
        },
        {
          "icon": {
            "iso": "md"
          },
          "heading": {
            "text": "Moldova"
          },
          "localized_name": "Moldova"
        },
        {
          "icon": {
            "iso": "me"
          },
          "heading": {
            "text": "Crna Gora"
          },
          "localized_name": "Montenegro"
        },
        {
          "icon": {
            "iso": "mx"
          },
          "heading": {
            "text": "Mexico"
          },
          "localized_name": "Mexico"
        },
        {
          "icon": {
            "iso": "pl"
          },
          "heading": {
            "text": "Polska"
          },
          "localized_name": "Poland"
        },
        {
          "icon": {
            "iso": "ro"
          },
          "heading": {
            "text": "România"
          },
          "localized_name": "Romania"
        },
        {
          "icon": {
            "iso": "ru"
          },
          "heading": {
            "text": "Росси́я"
          },
          "localized_name": "Russia"
        },
        {
          "icon": {
            "iso": "mk"
          },
          "heading": {
            "text": "Северна Македонија"
          },
          "localized_name": "North Macedonia"
        },
        {
          "icon": {
            "iso": "si"
          },
          "heading": {
            "text": "Slovenija"
          },
          "localized_name": "Slovenia"
        },
        {
          "icon": {
            "iso": "sk"
          },
          "heading": {
            "text": "Slovensko"
          },
          "localized_name": "Slovakia"
        },
        {
          "icon": {
            "iso": "rs"
          },
          "heading": {
            "text": "Srbija"
          },
          "localized_name": "Serbia"
        },
        {
          "icon": {
            "iso": "tr"
          },
          "heading": {
            "text": "Türkiye"
          },
          "localized_name": "Turkey"
        },
        {
          "icon": {
            "iso": "ug"
          },
          "heading": {
            "text": "Uganda"
          },
          "localized_name": "Uganda"
        },
        {
          "icon": {
            "iso": "ua"
          },
          "heading": {
            "text": "Україна"
          },
          "localized_name": "Ukraine"
        }
      ]
    }
  }
}