Copy environment

Index 

<div class="header  ">
    <div class="header__inner h-container">
        <div class="grid grid--no-gutter header__grid">
            <div class="grid__col grid__col--md-1 header__logo-col">

                <div class="logo  header__logo">
                    <a href="https://play.ee" class="logo__content logo__link">
                        <svg viewBox="0 0 58 62" xmlns="http://www.w3.org/2000/svg" class="logo__svg">
                            <path d="M8.93299 7.67307c0 2.85703-1.6054 4.32633-3.45778 4.32633-.82328 0-1.68772-.3265-2.22285-.8571v4.1222H.700195V3.42839H3.29352v.65303c.5763-.61221 1.48191-.81628 2.22286-.81628 2.26402 0 3.41661 1.95908 3.41661 4.40793zm-2.55217-.04081c0-1.4285-.53513-2.12234-1.56423-2.12234-1.35841 0-1.77005.93873-1.77005 2.12234 0 1.18361.4528 2.16315 1.72889 2.16315 1.07026 0 1.60539-.69384 1.60539-2.16315zM10.085 9.71379V0h2.5933v9.34646c0 .40814.1646.44895.494.44895.1234 0 .3293 0 .5351-.08162v1.99991c-.5351.2041-1.0291.2857-1.3996.2857-1.2349 0-2.2228-.6939-2.2228-2.28561zM22.187 6.53028v5.30582h-2.3464l-.1646-.8163c-.6998.898-1.6054 1.0204-2.2229 1.0204-1.8935 0-3.2519-1.1836-3.2519-2.89781 0-.97955.4528-1.67339 1.1526-2.04072.5351-.2857 1.1937-.40814 1.9347-.40814h2.3463v-.16325c0-.61222-.494-1.02036-1.4407-1.02036-.6175 0-1.2761.20407-2.0171.89791l-1.8523-1.55094c.9879-1.10198 2.5521-1.59175 3.9929-1.59175 2.4286 0 3.8694 1.26524 3.8694 3.26514zm-2.5934 1.99989h-1.9347c-.2881 0-.4939.04082-.6586.16326-.1646.12244-.247.2857-.247.48977 0 .40814.3705.77547 1.1115.77547.9056 0 1.6877-.61221 1.7288-1.4285zM25.48 11.5505l-3.1284-8.08126h2.8403l1.6877 5.14259 1.8935-5.14259h2.8404L26.7149 15.3054h-2.7991l1.5642-3.7549zM9.17956 30.8964l-1.44074-1.6326c-1.0291.8163-2.22285 1.1837-3.58126 1.1837C1.85238 30.4066 0 29.3863 0 27.3456c0-1.7142 1.31725-2.7754 2.63449-3.6325-.49396-.4898-1.31724-1.3877-1.31724-2.6121 0-1.8366 1.81121-2.8978 3.45777-2.8978 1.72888 0 3.29311 1.1836 3.29311 2.8978 0 1.2652-.82327 2.1632-1.81121 2.9386l1.39958 1.551c.24698-.5306.49396-1.1837.69978-1.9183l2.30522.4081c-.3705 1.3469-.82332 2.4489-1.35845 3.306l1.68775 1.8774-1.81124 1.6326zm-2.9638-3.3468l-1.89354-2.1223c-.98794.653-1.81122 1.2652-1.81122 1.9999 0 .653.61746.8571 1.44074.8571.86444-.0408 1.60539-.2857 2.26402-.7347zM4.5692 22.5703c.65862-.4489 1.11142-.8979 1.11142-1.4693 0-.449-.24698-.8571-.86444-.8571-.53513 0-.98793.2857-.98793.8163 0 .4898.41164 1.102.74095 1.5101zM8.76833 38.7736v5.5507H6.175v-4.612c0-.653 0-1.7142-1.31725-1.7142-1.60539 0-1.60539 1.5101-1.60539 2.408v3.9182H.700195v-8.3669H3.29352v.7754c.61746-.7754 1.52307-.9795 2.38751-.9795 1.93471.0408 3.0873 1.1836 3.0873 3.0203zM9.75586 40.1613c0-2.2856 1.60544-4.3672 4.36334-4.3672 2.7169 0 4.3223 2.0407 4.3223 4.3672 0 2.2856-1.6054 4.3671-4.3223 4.3671-2.7579 0-4.36334-2.0815-4.36334-4.3671zm6.09224 0c0-1.0612-.3293-2.1224-1.7289-2.1224-1.3995 0-1.77 1.0612-1.77 2.1224 0 1.0203.3293 2.1631 1.77 2.1631 1.3584 0 1.7289-1.102 1.7289-2.1631zM27.8267 40.202c0 2.857-1.6054 4.3264-3.4578 4.3264-.8233 0-1.6877-.3266-2.2228-.8571v4.1222h-2.5934V35.9574h2.6345v.6122c.5763-.6122 1.4819-.8163 2.2229-.8163 2.2228.0408 3.4166 1.9591 3.4166 4.4487zm-2.5933-.0408c0-1.4285-.5352-2.1223-1.5643-2.1223-1.3584 0-1.77.9387-1.77 2.1223 0 1.1836.4528 2.1632 1.7289 2.1632 1.0702 0 1.6054-.7347 1.6054-2.1632zM36.6768 41.0592h-5.5571c.0823.653.6175 1.1836 1.7289 1.1836.6174 0 1.3172-.2449 1.77-.8163l1.7701 1.5509c-.9056 1.0204-2.0994 1.551-3.5813 1.551-3.1284 0-4.281-2.1632-4.281-4.3263 0-2.0816 1.1526-4.408 4.1575-4.408 2.6345 0 4.0341 1.8775 4.0341 4.4488 0 .2449-.0412.4489-.0412.8163zm-2.4286-1.8775c-.0412-.7755-.741-1.2652-1.6054-1.2652-1.0703 0-1.4819.6938-1.5643 1.2652h3.1697zM7.98581 55.997v5.3059H5.63946l-.16466-.8163c-.69978.8979-1.60539 1.0203-2.22285 1.0203C1.35841 61.5069 0 60.3233 0 58.6091c0-.9795.452803-1.6733 1.15259-2.0407.53513-.2857 1.19375-.4081 1.93471-.4081h2.34634v-.1225c0-.6122-.49397-1.0203-1.44074-1.0203-.61746 0-1.27608.2041-2.01703.8979L.123492 54.3645c1.070258-1.102 2.634488-1.5918 4.075228-1.5918 2.34635 0 3.78709 1.2244 3.78709 3.2243zm-2.59333 1.9999H3.45777c-.28815 0-.49397.0408-.65862.1633-.16466.1224-.24699.2857-.24699.4898 0 .4081.37048.7754 1.11143.7754.90561 0 1.68772-.5714 1.72889-1.4285zM9.5498 59.1807v-9.7138h2.5933v9.3465c0 .4081.1647.4489.494.4489.1235 0 .3293 0 .5351-.0816v1.9999c-.5351.2041-1.0291.2857-1.3995.2857-1.2761.0408-2.2229-.653-2.2229-2.2856zM14.2842 59.1807v-9.7138h2.5933v9.3465c0 .4081.1647.4489.494.4489.1235 0 .3293 0 .5351-.0816v1.9999c-.5351.2041-1.0291.2857-1.3996.2857-1.2349.0408-2.2228-.653-2.2228-2.2856zM19.0996 49.4669h2.6345v2.3264h-2.6345v-2.3264zm.0412 3.4692h2.5933v8.3669h-2.5933v-8.3669zM30.9145 55.997v5.3059h-2.3463l-.1647-.8163c-.6998.8979-1.6054 1.0203-2.2228 1.0203-1.8936 0-3.252-1.1836-3.252-2.8978 0-.9795.4528-1.6733 1.1526-2.0407.5351-.2857 1.1938-.4081 1.9347-.4081h2.3464v-.1225c0-.6122-.494-1.0203-1.4408-1.0203-.6174 0-1.2761.2041-2.017.8979l-1.8524-1.5509c1.0703-1.102 2.6345-1.5918 4.0752-1.5918 2.3464 0 3.7871 1.2244 3.7871 3.2243zm-2.5933 1.9999h-1.9347c-.2882 0-.494.0408-.6586.1633-.1647.1224-.247.2857-.247.4898 0 .4081.3704.7754 1.1114.7754.9056 0 1.6877-.5714 1.7289-1.4285zM40.6698 55.7523v5.5507h-2.5933v-4.612c0-.653 0-1.7142-1.3172-1.7142-1.6054 0-1.6054 1.5102-1.6054 2.4081v3.9181h-2.5934v-8.3669h2.5934v.7755c.6174-.7755 1.523-.9795 2.3875-.9795 1.9759.0408 3.1284 1.1836 3.1284 3.0202zM41.6582 57.14c0-2.204 1.3584-4.4079 4.2399-4.4079 1.77 0 3.1284.8162 3.7459 2.5304l-2.4287.9796c-.1235-.7755-.6586-1.3061-1.3172-1.3061-1.1938 0-1.6054 1.102-1.6054 2.1632 0 1.0611.3705 2.1223 1.5642 2.1223.6586 0 1.2349-.4897 1.3584-1.2244l2.3464.8979c-.5763 1.5918-1.8936 2.5713-3.6636 2.5713-2.9227.0408-4.2399-2.1632-4.2399-4.3263zM57.9591 57.9971h-5.5572c.0824.653.6175 1.1836 1.7289 1.1836.6175 0 1.3173-.2449 1.7701-.8163l1.77 1.551c-.9056 1.0203-2.0994 1.5509-3.5813 1.5509-3.1284 0-4.281-2.1631-4.281-4.3263 0-2.0815 1.1526-4.4079 4.1576-4.4079 2.6344 0 4.034 1.8774 4.034 4.4487 0 .2449 0 .4898-.0411.8163zm-2.4287-1.8775c-.0412-.7754-.741-1.2652-1.6054-1.2652-1.0703 0-1.4819.6938-1.5642 1.2652h3.1696z" />
                        </svg>

                        <span class="h-visually-hidden">

                        </span>
                    </a>
                </div>

                <div class="logo  header__logo header__logo--negative">
                    <a href="https://play.ee" class="logo__content logo__link">
                        <svg viewBox="0 0 58 62" xmlns="http://www.w3.org/2000/svg" class="logo__svg">
                            <path d="M8.93299 7.67307c0 2.85703-1.6054 4.32633-3.45778 4.32633-.82328 0-1.68772-.3265-2.22285-.8571v4.1222H.700195V3.42839H3.29352v.65303c.5763-.61221 1.48191-.81628 2.22286-.81628 2.26402 0 3.41661 1.95908 3.41661 4.40793zm-2.55217-.04081c0-1.4285-.53513-2.12234-1.56423-2.12234-1.35841 0-1.77005.93873-1.77005 2.12234 0 1.18361.4528 2.16315 1.72889 2.16315 1.07026 0 1.60539-.69384 1.60539-2.16315zM10.085 9.71379V0h2.5933v9.34646c0 .40814.1646.44895.494.44895.1234 0 .3293 0 .5351-.08162v1.99991c-.5351.2041-1.0291.2857-1.3996.2857-1.2349 0-2.2228-.6939-2.2228-2.28561zM22.187 6.53028v5.30582h-2.3464l-.1646-.8163c-.6998.898-1.6054 1.0204-2.2229 1.0204-1.8935 0-3.2519-1.1836-3.2519-2.89781 0-.97955.4528-1.67339 1.1526-2.04072.5351-.2857 1.1937-.40814 1.9347-.40814h2.3463v-.16325c0-.61222-.494-1.02036-1.4407-1.02036-.6175 0-1.2761.20407-2.0171.89791l-1.8523-1.55094c.9879-1.10198 2.5521-1.59175 3.9929-1.59175 2.4286 0 3.8694 1.26524 3.8694 3.26514zm-2.5934 1.99989h-1.9347c-.2881 0-.4939.04082-.6586.16326-.1646.12244-.247.2857-.247.48977 0 .40814.3705.77547 1.1115.77547.9056 0 1.6877-.61221 1.7288-1.4285zM25.48 11.5505l-3.1284-8.08126h2.8403l1.6877 5.14259 1.8935-5.14259h2.8404L26.7149 15.3054h-2.7991l1.5642-3.7549zM9.17956 30.8964l-1.44074-1.6326c-1.0291.8163-2.22285 1.1837-3.58126 1.1837C1.85238 30.4066 0 29.3863 0 27.3456c0-1.7142 1.31725-2.7754 2.63449-3.6325-.49396-.4898-1.31724-1.3877-1.31724-2.6121 0-1.8366 1.81121-2.8978 3.45777-2.8978 1.72888 0 3.29311 1.1836 3.29311 2.8978 0 1.2652-.82327 2.1632-1.81121 2.9386l1.39958 1.551c.24698-.5306.49396-1.1837.69978-1.9183l2.30522.4081c-.3705 1.3469-.82332 2.4489-1.35845 3.306l1.68775 1.8774-1.81124 1.6326zm-2.9638-3.3468l-1.89354-2.1223c-.98794.653-1.81122 1.2652-1.81122 1.9999 0 .653.61746.8571 1.44074.8571.86444-.0408 1.60539-.2857 2.26402-.7347zM4.5692 22.5703c.65862-.4489 1.11142-.8979 1.11142-1.4693 0-.449-.24698-.8571-.86444-.8571-.53513 0-.98793.2857-.98793.8163 0 .4898.41164 1.102.74095 1.5101zM8.76833 38.7736v5.5507H6.175v-4.612c0-.653 0-1.7142-1.31725-1.7142-1.60539 0-1.60539 1.5101-1.60539 2.408v3.9182H.700195v-8.3669H3.29352v.7754c.61746-.7754 1.52307-.9795 2.38751-.9795 1.93471.0408 3.0873 1.1836 3.0873 3.0203zM9.75586 40.1613c0-2.2856 1.60544-4.3672 4.36334-4.3672 2.7169 0 4.3223 2.0407 4.3223 4.3672 0 2.2856-1.6054 4.3671-4.3223 4.3671-2.7579 0-4.36334-2.0815-4.36334-4.3671zm6.09224 0c0-1.0612-.3293-2.1224-1.7289-2.1224-1.3995 0-1.77 1.0612-1.77 2.1224 0 1.0203.3293 2.1631 1.77 2.1631 1.3584 0 1.7289-1.102 1.7289-2.1631zM27.8267 40.202c0 2.857-1.6054 4.3264-3.4578 4.3264-.8233 0-1.6877-.3266-2.2228-.8571v4.1222h-2.5934V35.9574h2.6345v.6122c.5763-.6122 1.4819-.8163 2.2229-.8163 2.2228.0408 3.4166 1.9591 3.4166 4.4487zm-2.5933-.0408c0-1.4285-.5352-2.1223-1.5643-2.1223-1.3584 0-1.77.9387-1.77 2.1223 0 1.1836.4528 2.1632 1.7289 2.1632 1.0702 0 1.6054-.7347 1.6054-2.1632zM36.6768 41.0592h-5.5571c.0823.653.6175 1.1836 1.7289 1.1836.6174 0 1.3172-.2449 1.77-.8163l1.7701 1.5509c-.9056 1.0204-2.0994 1.551-3.5813 1.551-3.1284 0-4.281-2.1632-4.281-4.3263 0-2.0816 1.1526-4.408 4.1575-4.408 2.6345 0 4.0341 1.8775 4.0341 4.4488 0 .2449-.0412.4489-.0412.8163zm-2.4286-1.8775c-.0412-.7755-.741-1.2652-1.6054-1.2652-1.0703 0-1.4819.6938-1.5643 1.2652h3.1697zM7.98581 55.997v5.3059H5.63946l-.16466-.8163c-.69978.8979-1.60539 1.0203-2.22285 1.0203C1.35841 61.5069 0 60.3233 0 58.6091c0-.9795.452803-1.6733 1.15259-2.0407.53513-.2857 1.19375-.4081 1.93471-.4081h2.34634v-.1225c0-.6122-.49397-1.0203-1.44074-1.0203-.61746 0-1.27608.2041-2.01703.8979L.123492 54.3645c1.070258-1.102 2.634488-1.5918 4.075228-1.5918 2.34635 0 3.78709 1.2244 3.78709 3.2243zm-2.59333 1.9999H3.45777c-.28815 0-.49397.0408-.65862.1633-.16466.1224-.24699.2857-.24699.4898 0 .4081.37048.7754 1.11143.7754.90561 0 1.68772-.5714 1.72889-1.4285zM9.5498 59.1807v-9.7138h2.5933v9.3465c0 .4081.1647.4489.494.4489.1235 0 .3293 0 .5351-.0816v1.9999c-.5351.2041-1.0291.2857-1.3995.2857-1.2761.0408-2.2229-.653-2.2229-2.2856zM14.2842 59.1807v-9.7138h2.5933v9.3465c0 .4081.1647.4489.494.4489.1235 0 .3293 0 .5351-.0816v1.9999c-.5351.2041-1.0291.2857-1.3996.2857-1.2349.0408-2.2228-.653-2.2228-2.2856zM19.0996 49.4669h2.6345v2.3264h-2.6345v-2.3264zm.0412 3.4692h2.5933v8.3669h-2.5933v-8.3669zM30.9145 55.997v5.3059h-2.3463l-.1647-.8163c-.6998.8979-1.6054 1.0203-2.2228 1.0203-1.8936 0-3.252-1.1836-3.252-2.8978 0-.9795.4528-1.6733 1.1526-2.0407.5351-.2857 1.1938-.4081 1.9347-.4081h2.3464v-.1225c0-.6122-.494-1.0203-1.4408-1.0203-.6174 0-1.2761.2041-2.017.8979l-1.8524-1.5509c1.0703-1.102 2.6345-1.5918 4.0752-1.5918 2.3464 0 3.7871 1.2244 3.7871 3.2243zm-2.5933 1.9999h-1.9347c-.2882 0-.494.0408-.6586.1633-.1647.1224-.247.2857-.247.4898 0 .4081.3704.7754 1.1114.7754.9056 0 1.6877-.5714 1.7289-1.4285zM40.6698 55.7523v5.5507h-2.5933v-4.612c0-.653 0-1.7142-1.3172-1.7142-1.6054 0-1.6054 1.5102-1.6054 2.4081v3.9181h-2.5934v-8.3669h2.5934v.7755c.6174-.7755 1.523-.9795 2.3875-.9795 1.9759.0408 3.1284 1.1836 3.1284 3.0202zM41.6582 57.14c0-2.204 1.3584-4.4079 4.2399-4.4079 1.77 0 3.1284.8162 3.7459 2.5304l-2.4287.9796c-.1235-.7755-.6586-1.3061-1.3172-1.3061-1.1938 0-1.6054 1.102-1.6054 2.1632 0 1.0611.3705 2.1223 1.5642 2.1223.6586 0 1.2349-.4897 1.3584-1.2244l2.3464.8979c-.5763 1.5918-1.8936 2.5713-3.6636 2.5713-2.9227.0408-4.2399-2.1632-4.2399-4.3263zM57.9591 57.9971h-5.5572c.0824.653.6175 1.1836 1.7289 1.1836.6175 0 1.3173-.2449 1.7701-.8163l1.77 1.551c-.9056 1.0203-2.0994 1.5509-3.5813 1.5509-3.1284 0-4.281-2.1631-4.281-4.3263 0-2.0815 1.1526-4.4079 4.1576-4.4079 2.6344 0 4.034 1.8774 4.034 4.4487 0 .2449 0 .4898-.0411.8163zm-2.4287-1.8775c-.0412-.7754-.741-1.2652-1.6054-1.2652-1.0703 0-1.4819.6938-1.5642 1.2652h3.1696z" />
                        </svg>

                        <span class="h-visually-hidden">

                        </span>
                    </a>
                </div>
            </div>
            <div class="grid__col grid__col--md-11 header__main-col">
                <div class="header__container">
                    <div class="header__container-inner h-container">
                        <div class="header__content-wrapper">

                            <nav class="navigation  header__navigation">
                                <ul class="navigation__list navigation__list--parents">
                                    <li class="navigation__item   ">
                                        <svg class="icon  navigation__arrow-icon">
                                            <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-right-long-54"></use>
                                        </svg>
                                        <a href="#" class="navigation__link">
                                            Home
                                        </a>
                                        <span class="navigation__description">Home is the place to be #staythefuckhome</span>
                                    </li>
                                    <li class="navigation__item has-children is-current  ">
                                        <svg class="icon  navigation__arrow-icon">
                                            <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-right-long-54"></use>
                                        </svg>
                                        <a href="#" class="navigation__link">
                                            Services
                                            <svg class="icon  navigation__chevron">
                                                <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#chevron-bottom-24"></use>
                                            </svg>
                                        </a>
                                        <span class="navigation__description">Everything digital under one roof.</span>
                                        <ul class="navigation__list navigation__list--children">
                                            <li class="navigation__item  ">
                                                <a href="#" class="navigation__link">
                                                    Business transformation
                                                </a>

                                                <svg class="icon  navigation__arrow-icon">
                                                    <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
                                                </svg>
                                            </li>
                                            <li class="navigation__item  ">
                                                <a href="#" class="navigation__link">
                                                    Design &amp; Innovation
                                                </a>

                                                <svg class="icon  navigation__arrow-icon">
                                                    <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
                                                </svg>
                                            </li>
                                            <li class="navigation__item  ">
                                                <a href="#" class="navigation__link">
                                                    Development
                                                </a>

                                                <svg class="icon  navigation__arrow-icon">
                                                    <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
                                                </svg>
                                            </li>
                                            <li class="navigation__item  ">
                                                <a href="#" class="navigation__link">
                                                    Maintenance
                                                </a>

                                                <svg class="icon  navigation__arrow-icon">
                                                    <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
                                                </svg>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="navigation__item has-children  ">
                                        <svg class="icon  navigation__arrow-icon">
                                            <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-right-long-54"></use>
                                        </svg>
                                        <a href="#" class="navigation__link">
                                            Work
                                            <svg class="icon  navigation__chevron">
                                                <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#chevron-bottom-24"></use>
                                            </svg>
                                        </a>
                                        <span class="navigation__description">Home is the place to be #staythefuckhome</span>
                                        <ul class="navigation__list navigation__list--children">
                                            <li class="navigation__item  ">
                                                <a href="#" class="navigation__link">
                                                    Business transformation
                                                </a>

                                                <svg class="icon  navigation__arrow-icon">
                                                    <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
                                                </svg>
                                            </li>
                                            <li class="navigation__item  ">
                                                <a href="#" class="navigation__link">
                                                    Design &amp; Innovation
                                                </a>

                                                <svg class="icon  navigation__arrow-icon">
                                                    <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
                                                </svg>
                                            </li>
                                            <li class="navigation__item  ">
                                                <a href="#" class="navigation__link">
                                                    Development
                                                </a>

                                                <svg class="icon  navigation__arrow-icon">
                                                    <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
                                                </svg>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="navigation__item   ">
                                        <svg class="icon  navigation__arrow-icon">
                                            <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-right-long-54"></use>
                                        </svg>
                                        <a href="#" class="navigation__link">
                                            About
                                        </a>
                                        <span class="navigation__description">Home is the place to be #staythefuckhome</span>
                                    </li>
                                    <li class="navigation__item   ">
                                        <svg class="icon  navigation__arrow-icon">
                                            <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-right-long-54"></use>
                                        </svg>
                                        <a href="#" class="navigation__link">
                                            Contact
                                        </a>
                                        <span class="navigation__description">Got a project you dream of realizing? Get in touch!</span>
                                    </li>
                                </ul>
                            </nav>
                            <div class="header__contact">
                                <div class="header__contact-item">
                                    <div class="header__contact-label text-small">Email</div>
                                    <div class="header__contact-data">
                                        <a href="mailto:contact@something.com" class="link header__link">contact@something.com</a>
                                    </div>
                                </div>
                                <div class="header__contact-item">
                                    <div class="header__contact-label text-small">Connect</div>
                                    <div class="header__contact-data">
                                        <a href="tel:56565656" class="link header__link">56565656</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <figure class="image  header__background-image">
                        <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20480%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/360x216 360w, //via.placeholder.com/720x432 720w, //via.placeholder.com/1000x600 1000w, //via.placeholder.com/2000x1200 2000w, //via.placeholder.com/800x480 800w, //via.placeholder.com/1600x960 1600w, //via.placeholder.com/1200x720 1200w, //via.placeholder.com/2400x1440 2400w" data-sizes="auto" alt="" class="image__img lazyload">

                    </figure>
                </div>
                <div class="header__burger-wrapper">
                    <button type="button" class="header__burger js-toggle-menu" aria-label="Toggle mobile menu" aria-expanded="false">
                        <span class="header__burger-box">
                            <span class="header__burger-inner">
                                <span class="header__burger-top"></span>
                                <span class="header__burger-middle"></span>
                                <span class="header__burger-bottom"></span>
                            </span>
                        </span>
                    </button>
                    <button type="button" class="header__burger header__burger--negative js-toggle-menu" aria-label="Toggle mobile menu">
                        <span class="header__burger-box">
                            <span class="header__burger-inner">
                                <span class="header__burger-top"></span>
                                <span class="header__burger-middle"></span>
                                <span class="header__burger-bottom"></span>
                            </span>
                        </span>
                    </button>
                </div>
                <div class="header__circle"></div>
            </div>
        </div>
    </div>
</div>
<div class="h-container">
    <div class="grid">
        <div class="grid__col grid__col--xs-12 grid__col--md-4">
            <article>
                <figure class="image image--fluid ">
                    <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20600%2010000%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/200x333 200w, //via.placeholder.com/600x1000 600w, //via.placeholder.com/530x883 530w, //via.placeholder.com/1060x1766 1060w, //via.placeholder.com/680x1133 680w, //via.placeholder.com/1360x2266 1360w, //via.placeholder.com/220x366 220w, //via.placeholder.com/440x733 440w, //via.placeholder.com/1440x2400 1440w, //via.placeholder.com/2880x4800 2880w" data-sizes="auto" alt="" class="image__img lazyload">

                </figure>
                <h2><a href="#">Pealkiri</a></h2>
                <time datetime="2017-01-01T00:00:00+00:00">May 13, 2017</time>
                <span></span>
                <div class="editor text">
                    <blockquote>
                        <p>This should be a blockquote.</p>
                    </blockquote>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique.</p>
                    <figure>
                        <figure class="image image--fluid ">
                            <picture class="image__picture">
                                <source srcset="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20150%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/150x100 150w, //via.placeholder.com/300x200 300w, //via.placeholder.com/600x400 600w" media="(min-width: 1024px)">
                                <source srcset="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20125%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/125x100 125w, //via.placeholder.com/250x200 250w, //via.placeholder.com/500x400 500w" media="(min-width: 768px)">
                                <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w, //via.placeholder.com/400x400 400w" data-sizes="auto" alt="" class="image__img lazyload">

                            </picture>

                        </figure>
                    </figure>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique.</p>
                </div>
            </article>
        </div>
        <div class="grid__col grid__col--xs-12 grid__col--md-4">
            <article>
                <figure class="image image--fluid ">
                    <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20600%2010000%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/200x333 200w, //via.placeholder.com/600x1000 600w, //via.placeholder.com/530x883 530w, //via.placeholder.com/1060x1766 1060w, //via.placeholder.com/680x1133 680w, //via.placeholder.com/1360x2266 1360w, //via.placeholder.com/220x366 220w, //via.placeholder.com/440x733 440w, //via.placeholder.com/1440x2400 1440w, //via.placeholder.com/2880x4800 2880w" data-sizes="auto" alt="" class="image__img lazyload">

                </figure>
                <h2><a href="#">Pealkiri 2</a></h2>
                <time datetime="2017-01-01T00:00:00+00:00">May 13, 2017</time>
                <span></span>
                <div class="editor text">
                    <blockquote>
                        <p>This should be a blockquote.</p>
                    </blockquote>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique.</p>
                    <figure>
                        <figure class="image image--fluid ">
                            <picture class="image__picture">
                                <source srcset="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20150%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/150x100 150w, //via.placeholder.com/300x200 300w, //via.placeholder.com/600x400 600w" media="(min-width: 1024px)">
                                <source srcset="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20125%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/125x100 125w, //via.placeholder.com/250x200 250w, //via.placeholder.com/500x400 500w" media="(min-width: 768px)">
                                <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w, //via.placeholder.com/400x400 400w" data-sizes="auto" alt="" class="image__img lazyload">

                            </picture>

                        </figure>
                    </figure>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique.</p>
                </div>
            </article>
        </div>
    </div>
</div>
<div class="notification-list"></div>
 
{% extends '@view-base' %}

{% block page %}
    <div class="h-container">
        <div class="grid">
            {% for article in data.articles %}
                <div class="grid__col grid__col--xs-12 grid__col--md-4">
                    <article>
                        {% include '@image' with { modifier: 'image--fluid', data: article.image|srcset('600x10000f') } %}
                        <h2><a href="{{ article.permalink }}">{{ article.title }}</a></h2>
                        <time datetime="{{ article.isoDate }}">{{ article.date }}</time>
                        <span>{{ article.author }}</span>
                        {% if article.content is defined %}
                            {{ article.content }}
                        {% else %}
                            {% include '@editor' %}
                        {% endif %}
                    </article>
                </div>
            {% endfor %}
        </div>
        {% include '@pagination' with { data: data.pagination } %}
    </div>
{% endblock %}

{
  "language": "en-US",
  "data": {
    "header": {
      "logo": {
        "link": "https://play.ee"
      },
      "navigation": {
        "items": [
          {
            "link": "#",
            "title": "Home",
            "description": "Home is the place to be #staythefuckhome"
          },
          {
            "link": "#",
            "title": "Services",
            "description": "Everything digital under one roof.",
            "current": "true",
            "children": [
              {
                "link": "#",
                "title": "Business transformation"
              },
              {
                "link": "#",
                "title": "Design &amp; Innovation"
              },
              {
                "link": "#",
                "title": "Development"
              },
              {
                "link": "#",
                "title": "Maintenance"
              }
            ]
          },
          {
            "link": "#",
            "title": "Work",
            "description": "Home is the place to be #staythefuckhome",
            "children": [
              {
                "link": "#",
                "title": "Business transformation"
              },
              {
                "link": "#",
                "title": "Design &amp; Innovation"
              },
              {
                "link": "#",
                "title": "Development"
              }
            ]
          },
          {
            "link": "#",
            "title": "About",
            "description": "Home is the place to be #staythefuckhome"
          },
          {
            "link": "#",
            "title": "Contact",
            "description": "Got a project you dream of realizing? Get in touch!"
          }
        ]
      },
      "toggleLabel": "Toggle mobile menu",
      "bgImage": true,
      "contacts": [
        {
          "label": "Email",
          "data": "contact@something.com",
          "link": "mailto:contact@something.com"
        },
        {
          "label": "Connect",
          "data": "56565656",
          "link": "tel:56565656"
        }
      ]
    },
    "articles": [
      {
        "title": "Pealkiri",
        "permalink": "#",
        "isoDate": "2017-01-01T00:00:00+00:00",
        "date": "May 13, 2017"
      },
      {
        "title": "Pealkiri 2",
        "permalink": "#",
        "isoDate": "2017-01-01T00:00:00+00:00",
        "date": "May 13, 2017"
      }
    ],
    "notifications": [
      {
        "component": "BrowserNotification",
        "data": {
          "content": "You are using an outdated browser. Please upgrade your browser to improve your experience and security.",
          "actions": [
            {
              "link": "https://google.com",
              "text": "Learn more",
              "attributes": "target=\"_blank\""
            }
          ],
          "button": {
            "text": "OK"
          }
        }
      },
      {
        "component": "CookieNotification",
        "data": {
          "content": "We use Cookies to improve your web experience. Read our <a href=\"#\"> cookie policy </a>",
          "button": {
            "text": "ACCEPT"
          }
        },
        "sgShouldShow": true
      }
    ]
  }
}