{"id":516,"date":"2026-08-16T01:07:03","date_gmt":"2026-08-15T22:07:03","guid":{"rendered":"http:\/\/digitaldesignonline.ru\/?page_id=516"},"modified":"2026-10-28T21:08:09","modified_gmt":"2026-10-28T18:08:09","slug":"hikingv1","status":"publish","type":"page","link":"https:\/\/digitaldesignonline.ru\/ru\/hikingv1\/","title":{"rendered":"Hiking"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"516\" class=\"elementor elementor-516\">\n\t\t\t\t<div class=\"elementor-element elementor-element-51354ab4 e-con-full e-flex e-con e-parent\" data-id=\"51354ab4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-74275080 e-con-full e-flex e-con e-child\" data-id=\"74275080\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-12c2384c elementor-widget elementor-widget-html\" data-id=\"12c2384c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section\r\n  class=\"hike-hero\"\r\n  id=\"hike-hero\"\r\n  style=\"--hero-poster: url('https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/4124242122452.jpg');\"\r\n>\r\n\r\n  <!-- BACKGROUND VIDEO -->\r\n  <video\r\n    class=\"hike-hero__video\"\r\n    muted\r\n    loop\r\n    playsinline\r\n    preload=\"none\"\r\n    poster=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/4124242122452.jpg\"\r\n    aria-hidden=\"true\"\r\n  >\r\n    <source\r\n      data-src=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/08161.mp4\"\r\n      type=\"video\/mp4\"\r\n    >\r\n  <\/video>\r\n\r\n\r\n  <!-- DARK OVERLAY -->\r\n  <div\r\n    class=\"hike-hero__shade\"\r\n    aria-hidden=\"true\"\r\n  ><\/div>\r\n\r\n\r\n  <!-- GLASS PANEL -->\r\n  <div class=\"hike-hero__glass\">\r\n\r\n    <div class=\"hike-hero__content\">\r\n\r\n      <div class=\"hike-hero__eyebrow\">\r\n        <span>01<\/span>\r\n        <span>INTO THE WILD<\/span>\r\n      <\/div>\r\n\r\n\r\n      <!-- TITLE CUTOUT AREA -->\r\n      <div class=\"hike-hero__title-slot\">\r\n\r\n        <h1 class=\"hike-hero__title-fallback\">\r\n          TRAILBOUND\r\n        <\/h1>\r\n\r\n      <\/div>\r\n\r\n\r\n      <p class=\"hike-hero__description\">\r\n        Leave the noise behind. Follow untamed trails through\r\n        mountains, forests and remote landscapes built for those\r\n        who choose the long way.\r\n      <\/p>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\n   RESET\r\n========================================================= *\/\r\n\r\n.hike-hero,\r\n.hike-hero * {\r\n  box-sizing: border-box;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HERO\r\n========================================================= *\/\r\n\r\n.hike-hero {\r\n  position: relative;\r\n\r\n  width: 100%;\r\n  height: 100svh;\r\n\r\n  min-height: 680px;\r\n  max-height: 1100px;\r\n\r\n  overflow: hidden;\r\n  isolation: isolate;\r\n\r\n  color: #ffffff;\r\n\r\n  background:\r\n    #1d211d\r\n    var(--hero-poster)\r\n    center center \/ cover no-repeat;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   VIDEO\r\n========================================================= *\/\r\n\r\n.hike-hero__video {\r\n  position: absolute;\r\n\r\n  z-index: -4;\r\n\r\n  inset: 0;\r\n\r\n  width: 100%;\r\n  height: 100%;\r\n\r\n  object-fit: cover;\r\n  object-position: center center;\r\n\r\n  pointer-events: none;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DARK OVERLAY\r\n========================================================= *\/\r\n\r\n.hike-hero__shade {\r\n  position: absolute;\r\n\r\n  z-index: -3;\r\n\r\n  inset: 0;\r\n\r\n  pointer-events: none;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      rgba(6, 9, 7, 0.22) 0%,\r\n      rgba(6, 9, 7, 0.07) 46%,\r\n      rgba(6, 9, 7, 0.16) 100%\r\n    );\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   GLASS PANEL\r\n========================================================= *\/\r\n\r\n.hike-hero__glass {\r\n\r\n  --panel-padding:\r\n    clamp(28px, 3.2vw, 62px);\r\n\r\n  \/*\r\n    Controls entire content vertically.\r\n    Slightly above screen center.\r\n  *\/\r\n  --content-top:\r\n    clamp(150px, 25vh, 270px);\r\n\r\n\r\n  position: relative;\r\n\r\n  z-index: 1;\r\n\r\n  width: clamp(\r\n    500px,\r\n    42vw,\r\n    760px\r\n  );\r\n\r\n  height: 100%;\r\n\r\n  overflow: hidden;\r\n\r\n  border-right:\r\n    1px solid rgba(255, 255, 255, 0.18);\r\n\r\n  contain: paint;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   GLASS LAYER\r\n========================================================= *\/\r\n\r\n.hike-hero__glass::before {\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n\r\n  z-index: -1;\r\n\r\n  inset: 0;\r\n\r\n  pointer-events: none;\r\n\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      rgba(196, 199, 189, 0.23) 0%,\r\n      rgba(145, 151, 142, 0.14) 55%,\r\n      rgba(105, 112, 105, 0.10) 100%\r\n    );\r\n\r\n\r\n  -webkit-backdrop-filter:\r\n    blur(12px)\r\n    saturate(108%);\r\n\r\n  backdrop-filter:\r\n    blur(12px)\r\n    saturate(108%);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TITLE CUTOUT\r\n\r\n   TRAILBOUND is literally removed\r\n   from the glass layer.\r\n\r\n   Increased font-weight to 700\r\n   for a much bolder cutout.\r\n========================================================= *\/\r\n\r\n@supports (\r\n  (-webkit-mask-composite: xor)\r\n  or\r\n  (mask-composite: exclude)\r\n) {\r\n\r\n  .hike-hero__glass::before {\r\n\r\n    -webkit-mask-image:\r\n\r\n      linear-gradient(\r\n        #ffffff 0 0\r\n      ),\r\n\r\n      url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 1000 170'%3E%3Ctext x='0' y='143' fill='white' font-family='Arial,Helvetica,sans-serif' font-size='148' font-weight='700' textLength='1000' lengthAdjust='spacingAndGlyphs'%3ETRAILBOUND%3C\/text%3E%3C\/svg%3E\");\r\n\r\n\r\n    mask-image:\r\n\r\n      linear-gradient(\r\n        #ffffff 0 0\r\n      ),\r\n\r\n      url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 1000 170'%3E%3Ctext x='0' y='143' fill='white' font-family='Arial,Helvetica,sans-serif' font-size='148' font-weight='700' textLength='1000' lengthAdjust='spacingAndGlyphs'%3ETRAILBOUND%3C\/text%3E%3C\/svg%3E\");\r\n\r\n\r\n    -webkit-mask-size:\r\n\r\n      100% 100%,\r\n\r\n      calc(\r\n        100% - (var(--panel-padding) * 2)\r\n      )\r\n      auto;\r\n\r\n\r\n    mask-size:\r\n\r\n      100% 100%,\r\n\r\n      calc(\r\n        100% - (var(--panel-padding) * 2)\r\n      )\r\n      auto;\r\n\r\n\r\n    -webkit-mask-position:\r\n\r\n      0 0,\r\n\r\n      var(--panel-padding)\r\n      calc(\r\n        var(--content-top) + 42px\r\n      );\r\n\r\n\r\n    mask-position:\r\n\r\n      0 0,\r\n\r\n      var(--panel-padding)\r\n      calc(\r\n        var(--content-top) + 42px\r\n      );\r\n\r\n\r\n    -webkit-mask-repeat:\r\n      no-repeat,\r\n      no-repeat;\r\n\r\n    mask-repeat:\r\n      no-repeat,\r\n      no-repeat;\r\n\r\n\r\n    -webkit-mask-composite:\r\n      xor;\r\n\r\n    mask-composite:\r\n      exclude;\r\n  }\r\n\r\n\r\n  .hike-hero__title-fallback {\r\n    opacity: 0;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CONTENT\r\n========================================================= *\/\r\n\r\n.hike-hero__content {\r\n  position: absolute;\r\n\r\n  top: var(--content-top);\r\n\r\n  left: var(--panel-padding);\r\n  right: var(--panel-padding);\r\n\r\n  width: auto;\r\n\r\n  max-width:\r\n    calc(\r\n      100% - (var(--panel-padding) * 2)\r\n    );\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   EYEBROW\r\n========================================================= *\/\r\n\r\n.hike-hero__eyebrow {\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  gap: 18px;\r\n\r\n  height: 18px;\r\n\r\n  margin: 0 0 24px;\r\n\r\n  overflow: hidden;\r\n\r\n  font-family:\r\n    Arial,\r\n    Helvetica,\r\n    sans-serif;\r\n\r\n  font-size:\r\n    clamp(\r\n      11px,\r\n      0.82vw,\r\n      14px\r\n    );\r\n\r\n  font-weight: 500;\r\n\r\n  line-height: 18px;\r\n\r\n  letter-spacing: 0.09em;\r\n\r\n  white-space: nowrap;\r\n\r\n  color:\r\n    rgba(255, 255, 255, 0.96);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TITLE SLOT\r\n========================================================= *\/\r\n\r\n.hike-hero__title-slot {\r\n  position: relative;\r\n\r\n  width: 100%;\r\n\r\n  \/*\r\n    Same ratio as SVG mask.\r\n  *\/\r\n  aspect-ratio: 1000 \/ 170;\r\n\r\n  overflow: hidden;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FALLBACK TITLE\r\n\r\n   Used only where mask-composite\r\n   isn't supported.\r\n========================================================= *\/\r\n\r\n.hike-hero__title-fallback {\r\n  position: absolute;\r\n\r\n  inset: 0;\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  margin: 0;\r\n\r\n  width: 100%;\r\n  height: 100%;\r\n\r\n  font-family:\r\n    Arial,\r\n    Helvetica,\r\n    sans-serif;\r\n\r\n  font-size:\r\n    clamp(\r\n      44px,\r\n      5.2vw,\r\n      84px\r\n    );\r\n\r\n  \/*\r\n    Bolder fallback too.\r\n  *\/\r\n  font-weight: 700;\r\n\r\n  line-height: 1;\r\n\r\n  letter-spacing: -0.045em;\r\n\r\n  white-space: nowrap;\r\n\r\n  color: transparent;\r\n\r\n  -webkit-text-stroke:\r\n    1px rgba(255, 255, 255, 0.62);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DESCRIPTION\r\n========================================================= *\/\r\n\r\n.hike-hero__description {\r\n  width: 100%;\r\n\r\n  max-width: 430px;\r\n\r\n  margin:\r\n    clamp(\r\n      28px,\r\n      3.2vh,\r\n      40px\r\n    )\r\n    0\r\n    0;\r\n\r\n  font-family:\r\n    Arial,\r\n    Helvetica,\r\n    sans-serif;\r\n\r\n  font-size:\r\n    clamp(\r\n      13px,\r\n      0.92vw,\r\n      16px\r\n    );\r\n\r\n  font-weight: 400;\r\n\r\n  line-height: 1.62;\r\n\r\n  color:\r\n    rgba(255, 255, 255, 0.96);\r\n\r\n  overflow-wrap: break-word;\r\n  word-break: normal;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media (max-width: 1100px) {\r\n\r\n  .hike-hero__glass {\r\n\r\n    --panel-padding:\r\n      clamp(30px, 4vw, 48px);\r\n\r\n    --content-top:\r\n      clamp(150px, 24vh, 245px);\r\n\r\n    width: 55%;\r\n\r\n    min-width: 460px;\r\n  }\r\n\r\n\r\n  .hike-hero__description {\r\n    max-width: 390px;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 767px) {\r\n\r\n  .hike-hero {\r\n    min-height: 640px;\r\n\r\n    height: 100svh;\r\n\r\n    background-position:\r\n      60% center;\r\n  }\r\n\r\n\r\n  .hike-hero__glass {\r\n\r\n    --panel-padding: 24px;\r\n\r\n    --content-top:\r\n      clamp(\r\n        145px,\r\n        23vh,\r\n        210px\r\n      );\r\n\r\n    width: 100%;\r\n\r\n    min-width: 0;\r\n    max-width: none;\r\n\r\n    border-right: 0;\r\n  }\r\n\r\n\r\n  .hike-hero__glass::before {\r\n\r\n    background:\r\n      linear-gradient(\r\n        180deg,\r\n        rgba(160, 166, 157, 0.13) 0%,\r\n        rgba(95, 102, 94, 0.17) 100%\r\n      );\r\n\r\n\r\n    -webkit-backdrop-filter:\r\n      blur(7px)\r\n      saturate(105%);\r\n\r\n    backdrop-filter:\r\n      blur(7px)\r\n      saturate(105%);\r\n  }\r\n\r\n\r\n  .hike-hero__description {\r\n    max-width: 360px;\r\n\r\n    font-size: 14px;\r\n  }\r\n\r\n\r\n  .hike-hero__eyebrow {\r\n    font-size: 11px;\r\n\r\n    gap: 14px;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   VERY SMALL MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 390px) {\r\n\r\n  .hike-hero__glass {\r\n    --panel-padding: 20px;\r\n  }\r\n\r\n\r\n  .hike-hero__description {\r\n    font-size: 13px;\r\n\r\n    line-height: 1.55;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REDUCED MOTION\r\n========================================================= *\/\r\n\r\n@media (\r\n  prefers-reduced-motion: reduce\r\n) {\r\n\r\n  .hike-hero__video {\r\n    display: none;\r\n  }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<script>\n(() => {\n  const hero = document.getElementById('hike-hero');\n  if (!hero) return;\n\n  const video = hero.querySelector('.hike-hero__video');\n  if (!video) return;\n\n  const reducedMotion = window.matchMedia(\n    '(prefers-reduced-motion: reduce)'\n  ).matches;\n\n  const disableVideoOnMobile = false;\n  const isMobile = window.matchMedia('(max-width: 767px)').matches;\n\n  if (reducedMotion || (disableVideoOnMobile && isMobile)) {\n    video.remove();\n    return;\n  }\n\n  let loaded = false;\n  let waitingForCanPlay = false;\n\n  const ensureLoaded = () => {\n    if (loaded) return;\n    loaded = true;\n\n    video.querySelectorAll('source[data-src]').forEach((source) => {\n      source.src = source.dataset.src;\n      source.removeAttribute('data-src');\n    });\n\n    video.load();\n  };\n\n  const playVideo = () => {\n    ensureLoaded();\n\n    const play = () => {\n      waitingForCanPlay = false;\n      const promise = video.play();\n      if (promise !== undefined) promise.catch(() => {});\n    };\n\n    if (video.readyState >= 2) {\n      play();\n      return;\n    }\n\n    if (!waitingForCanPlay) {\n      waitingForCanPlay = true;\n      video.addEventListener('canplay', play, { once: true });\n    }\n  };\n\n  if ('IntersectionObserver' in window) {\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting) {\n          playVideo();\n        } else if (!video.paused) {\n          video.pause();\n        }\n      },\n      { threshold: 0.05 }\n    );\n\n    observer.observe(hero);\n  } else {\n    playVideo();\n  }\n\n  document.addEventListener('visibilitychange', () => {\n    if (document.hidden) {\n      if (!video.paused) video.pause();\n      return;\n    }\n\n    const rect = hero.getBoundingClientRect();\n    if (rect.bottom > 0 && rect.top < window.innerHeight) {\n      playVideo();\n    }\n  });\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-64823efb e-con-full e-flex e-con e-child\" data-id=\"64823efb\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-73ed568f elementor-widget elementor-widget-html\" data-id=\"73ed568f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* =====================================================\n   \u041e\u0421\u041d\u041e\u0412\u041d\u041e\u0419 \u0411\u041b\u041e\u041a\n===================================================== *\/\n\n.el-project-switcher {\n  width: 100%;\n  font-family: Arial, sans-serif;\n  --transition: 0.45s ease;\n}\n\n\n\/* =====================================================\n   \u0421\u0426\u0415\u041d\u0410 1\n   \u0424\u041e\u041d + 4 \u041a\u0410\u0420\u0422\u041e\u0427\u041a\u0418\n===================================================== *\/\n\n.el-project-cards-section {\n  width: 100vw;\n\n  position: relative;\n  left: 50%;\n  margin-left: -50vw;\n\n  padding: 90px 20px;\n\n  overflow: hidden;\n  isolation: isolate;\n  background: #1f2024;\n}\n\n.el-project-cards-bg {\n  position: absolute;\n  z-index: 0;\n  inset: 0;\n\n  display: block;\n\n  width: 100%;\n  height: 100%;\n\n  object-fit: cover;\n  object-position: center center;\n\n  pointer-events: none;\n}\n\n.el-project-cards-section::after {\n  content: \"\";\n\n  position: absolute;\n  z-index: 1;\n  inset: 0;\n\n  background: rgba(0, 0, 0, 0.25);\n\n  pointer-events: none;\n}\n\n\n\/* =====================================================\n   \u041a\u041e\u041d\u0422\u0415\u0419\u041d\u0415\u0420 \u041a\u0410\u0420\u0422\u041e\u0427\u0415\u041a\n===================================================== *\/\n\n.el-project-cards {\n  position: relative;\n  z-index: 2;\n\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n\n  gap: 16px;\n\n  width: 100%;\n  max-width: 1400px;\n\n  margin: 0 auto;\n}\n\n\n\/* =====================================================\n   \u041a\u0410\u0420\u0422\u041e\u0427\u041a\u0410\n===================================================== *\/\n\n.el-project-card {\n  position: relative;\n\n  min-height: 420px;\n\n  border-radius: 18px;\n  overflow: hidden;\n\n  cursor: pointer;\n\n  transition:\n    transform var(--transition),\n    opacity var(--transition);\n}\n\n.el-project-card > img.el-project-card-image {\n  position: absolute !important;\n  z-index: 0;\n  inset: 0 !important;\n\n  display: block;\n\n  width: 100% !important;\n  height: 100% !important;\n  min-width: 100%;\n  min-height: 100%;\n  max-width: none !important;\n\n  object-fit: cover !important;\n  object-position: center center;\n\n  pointer-events: none;\n}\n\n\n\/* \u0417\u0430\u0442\u0435\u043c\u043d\u0435\u043d\u0438\u0435 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a *\/\n\n.el-project-card::before {\n  content: \"\";\n\n  position: absolute;\n  z-index: 1;\n  inset: 0;\n\n  background: linear-gradient(\n    to top,\n    rgba(0, 0, 0, 0.75),\n    rgba(0, 0, 0, 0.05) 65%\n  );\n\n  transition: background var(--transition);\n}\n\n\n\/* Hover *\/\n\n.el-project-card:hover {\n  transform: translateY(-6px);\n}\n\n\n.el-project-card:hover::before,\n.el-project-card.active::before {\n  background: linear-gradient(\n    to top,\n    rgba(0, 0, 0, 0.85),\n    rgba(0, 0, 0, 0.08) 65%\n  );\n}\n\n\n\/* \u0410\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 *\/\n\n.el-project-card.active {\n  transform: translateY(-6px);\n}\n\n\n\/* =====================================================\n   \u0422\u0415\u041a\u0421\u0422 \u0412\u041d\u0423\u0422\u0420\u0418 \u041a\u0410\u0420\u0422\u041e\u0427\u0415\u041a\n===================================================== *\/\n\n.el-card-content {\n  position: absolute;\n\n  z-index: 2;\n\n  left: 25px;\n  right: 25px;\n  bottom: 25px;\n\n  color: #ffffff;\n}\n\n\n.el-card-number {\n  display: block;\n\n  margin-bottom: 8px;\n\n  font-size: 13px;\n  letter-spacing: 2px;\n\n  opacity: 0.7;\n}\n\n\n.el-card-title {\n  margin: 0;\n\n  font-size: 27px;\n  line-height: 1.1;\n  font-weight: 600;\n}\n\n\n\/* =====================================================\n   \u0421\u0426\u0415\u041d\u0410 2\n   \u0421\u0415\u0420\u042b\u0419 \u0424\u041e\u041d\n===================================================== *\/\n\n.el-project-scene {\n  width: 100vw;\n\n  position: relative;\n  left: 50%;\n  margin-left: -50vw;\n\n  overflow: hidden;\n\n  background: #1f2024;\n}\n\n\n\/* =====================================================\n   \u0413\u041b\u0410\u0412\u041d\u0410\u042f \u0411\u041e\u041b\u042c\u0428\u0410\u042f \u0424\u041e\u0422\u041e\u0413\u0420\u0410\u0424\u0418\u042f\n===================================================== *\/\n\n.el-project-hero {\n  position: relative;\n\n  width: 100%;\n\n  height: min(82vh, 850px);\n  min-height: 600px;\n\n  overflow: hidden;\n\n  isolation: isolate;\n}\n\n\n\/* \u0421\u0430\u043c\u0430 \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u044f *\/\n\n.el-project-hero-image {\n  position: absolute;\n\n  inset: 0;\n\n  z-index: 1;\n\n  display: block;\n\n  width: 100%;\n  height: 100%;\n\n  object-fit: cover;\n  object-position: center center;\n\n  transition:\n    opacity var(--transition),\n    transform 0.8s ease;\n}\n\n\n\/* \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0441\u043c\u0435\u043d\u044b \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0438 *\/\n\n.el-project-hero.is-changing .el-project-hero-image {\n  opacity: 0;\n  transform: scale(1.03);\n}\n\n\n\/* \u0417\u0430\u0442\u0435\u043c\u043d\u0435\u043d\u0438\u0435 \u043f\u043e\u0432\u0435\u0440\u0445 \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0438 *\/\n\n.el-project-hero::after {\n  content: \"\";\n\n  position: absolute;\n\n  inset: 0;\n\n  z-index: 2;\n\n  background: linear-gradient(\n    90deg,\n    rgba(0, 0, 0, 0.72) 0%,\n    rgba(0, 0, 0, 0.38) 42%,\n    rgba(0, 0, 0, 0.05) 75%\n  );\n\n  pointer-events: none;\n}\n\n\n\/* =====================================================\n   \u0422\u0415\u041a\u0421\u0422 \u041f\u041e\u0412\u0415\u0420\u0425 HERO\n===================================================== *\/\n\n.el-project-hero-content {\n  position: relative;\n\n  z-index: 3;\n\n  height: 100%;\n\n  max-width: 1400px;\n\n  margin: 0 auto;\n\n  padding: 60px 40px;\n\n  display: flex;\n\n  align-items: flex-end;\n}\n\n\n.el-project-text {\n  position: relative;\n\n  z-index: 4;\n\n  width: min(650px, 100%);\n\n  padding-bottom: 30px;\n\n  color: #ffffff;\n\n  transition:\n    opacity 0.3s ease,\n    transform 0.3s ease;\n}\n\n\n\/* \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u0430 *\/\n\n.el-project-hero.is-changing .el-project-text {\n  opacity: 0;\n\n  transform: translateY(15px);\n}\n\n\n.el-project-label {\n  display: block;\n\n  margin-bottom: 15px;\n\n  font-size: 13px;\n\n  text-transform: uppercase;\n\n  letter-spacing: 3px;\n\n  color: #ffffff;\n\n  opacity: 0.75;\n}\n\n\n.el-project-title {\n  margin: 0 0 18px;\n\n  font-size: clamp(42px, 6vw, 90px);\n\n  line-height: 0.95;\n\n  font-weight: 500;\n\n  color: #ffffff;\n}\n\n\n.el-project-description {\n  max-width: 600px;\n\n  margin: 0;\n\n  font-size: 18px;\n\n  line-height: 1.6;\n\n  color: rgba(255, 255, 255, 0.9);\n}\n\n\n\/* =====================================================\n   \u0422\u0420\u0418 \u0414\u041e\u041f\u041e\u041b\u041d\u0418\u0422\u0415\u041b\u042c\u041d\u042b\u0415 \u0424\u041e\u0422\u041e\u0413\u0420\u0410\u0424\u0418\u0418\n===================================================== *\/\n\n.el-project-gallery {\n  width: 100%;\n\n  display: grid;\n\n  grid-template-columns: repeat(3, 1fr);\n\n  gap: 16px;\n\n  padding: 16px;\n\n  background: #1f2024;\n}\n\n\n.el-gallery-item {\n  height: 550px;\n\n  overflow: hidden;\n\n  border-radius: 10px;\n}\n\n\n.el-gallery-item img {\n  display: block;\n\n  width: 100%;\n  height: 100%;\n\n  object-fit: cover;\n\n  transition:\n    opacity var(--transition),\n    transform 0.8s ease;\n}\n\n\n\/* \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0433\u0430\u043b\u0435\u0440\u0435\u0438 *\/\n\n.el-project-gallery.is-changing img {\n  opacity: 0;\n\n  transform: scale(1.03);\n}\n\n\n\/* =====================================================\n   TABLET\n===================================================== *\/\n\n@media (max-width: 1024px) {\n\n  .el-project-cards-section {\n    padding: 60px 20px;\n  }\n\n\n  .el-project-cards {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n\n  .el-project-card {\n    min-height: 350px;\n  }\n\n\n  .el-gallery-item {\n    height: 400px;\n  }\n\n}\n\n\n\/* =====================================================\n   MOBILE\n===================================================== *\/\n\n@media (max-width: 767px) {\n\n  \/* ==================================================\n     \u041a\u0410\u0420\u0422\u041e\u0427\u041a\u0418\n  ================================================== *\/\n\n  .el-project-cards-section {\n    padding: 40px 15px;\n  }\n\n\n  .el-project-cards {\n    grid-template-columns: 1fr;\n\n    gap: 12px;\n  }\n\n\n  .el-project-card {\n    min-height: 360px;\n  }\n\n\n  \/* ==================================================\n     \u0411\u041e\u041b\u042c\u0428\u0410\u042f \u0424\u041e\u0422\u041e\u0413\u0420\u0410\u0424\u0418\u042f\n  ================================================== *\/\n\n  .el-project-hero {\n    position: relative;\n\n    width: 100%;\n\n    height: 75vh;\n    min-height: 560px;\n\n    overflow: hidden;\n\n    isolation: isolate;\n  }\n\n\n  \/* ==================================================\n     \u0424\u041e\u0422\u041e\u0413\u0420\u0410\u0424\u0418\u042f \u2014\n     \u041d\u0418\u0416\u041d\u0418\u0419 \u0421\u041b\u041e\u0419\n  ================================================== *\/\n\n  .el-project-hero-image {\n    position: absolute !important;\n\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n\n    z-index: 1 !important;\n\n    width: 100% !important;\n    height: 100% !important;\n\n    object-fit: cover;\n    object-position: center center;\n  }\n\n\n  \/* ==================================================\n     \u0422\u0401\u041c\u041d\u042b\u0419 \u0413\u0420\u0410\u0414\u0418\u0415\u041d\u0422 \u2014\n     \u0421\u0420\u0415\u0414\u041d\u0418\u0419 \u0421\u041b\u041e\u0419\n  ================================================== *\/\n\n  .el-project-hero::after {\n    content: \"\";\n\n    position: absolute;\n\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n\n    z-index: 2 !important;\n\n    background: linear-gradient(\n      to top,\n      rgba(0, 0, 0, 0.85) 0%,\n      rgba(0, 0, 0, 0.67) 25%,\n      rgba(0, 0, 0, 0.30) 52%,\n      rgba(0, 0, 0, 0.05) 80%\n    );\n\n    pointer-events: none;\n  }\n\n\n  \/* ==================================================\n     \u0422\u0415\u041a\u0421\u0422 \u2014\n     \u0412\u0415\u0420\u0425\u041d\u0418\u0419 \u0421\u041b\u041e\u0419\n\n     \u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0434\u043b\u044f:\n     ALPINE\n     FOREST\n     COASTAL\n     VALLEY\n  ================================================== *\/\n\n  .el-project-hero-content {\n    position: absolute !important;\n\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n\n    z-index: 10 !important;\n\n    width: 100%;\n    height: 100%;\n\n    max-width: none;\n\n    margin: 0;\n\n    padding:\n      30px\n      22px\n      calc(38px + env(safe-area-inset-bottom))\n      22px;\n\n    display: flex;\n\n    flex-direction: column;\n\n    align-items: flex-start;\n\n    justify-content: flex-end;\n\n    pointer-events: none;\n  }\n\n\n  .el-project-text {\n    position: relative !important;\n\n    z-index: 11 !important;\n\n    display: block;\n\n    width: 100%;\n    max-width: 100%;\n\n    margin: 0;\n\n    padding: 0;\n\n    color: #ffffff;\n\n    pointer-events: auto;\n  }\n\n\n  \/* \u041a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f *\/\n\n  .el-project-label {\n    display: block;\n\n    margin: 0 0 10px;\n\n    font-size: 12px;\n\n    line-height: 1.3;\n\n    letter-spacing: 2px;\n\n    text-transform: uppercase;\n\n    color: #ffffff;\n\n    opacity: 0.8;\n  }\n\n\n  \/* \u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 *\/\n\n  .el-project-title {\n    display: block;\n\n    margin: 0 0 14px;\n\n    font-size: clamp(38px, 12vw, 54px);\n\n    line-height: 0.95;\n\n    font-weight: 500;\n\n    color: #ffffff;\n  }\n\n\n  \/* \u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 *\/\n\n  .el-project-description {\n    display: block;\n\n    width: 100%;\n    max-width: 520px;\n\n    margin: 0;\n\n    font-size: 16px;\n\n    line-height: 1.5;\n\n    color: rgba(255, 255, 255, 0.92);\n  }\n\n\n  \/* ==================================================\n     \u0413\u0410\u041b\u0415\u0420\u0415\u042f\n  ================================================== *\/\n\n  .el-project-gallery {\n    grid-template-columns: 1fr;\n\n    padding: 10px;\n\n    gap: 10px;\n\n    background: #777777;\n  }\n\n\n  .el-gallery-item {\n    height: 450px;\n  }\n\n}\n\n\n\/* =====================================================\n   \u041e\u0427\u0415\u041d\u042c \u041c\u0410\u041b\u0415\u041d\u042c\u041a\u0418\u0415 \u0422\u0415\u041b\u0415\u0424\u041e\u041d\u042b\n===================================================== *\/\n\n@media (max-width: 390px) {\n\n  .el-project-hero {\n    height: 72vh;\n\n    min-height: 520px;\n  }\n\n\n  .el-project-hero-content {\n    padding:\n      25px\n      18px\n      calc(30px + env(safe-area-inset-bottom))\n      18px;\n  }\n\n\n  .el-project-title {\n    font-size: 38px;\n  }\n\n\n  .el-project-description {\n    font-size: 15px;\n\n    line-height: 1.45;\n  }\n\n}\n\n\n\/* Respect the user's reduced-motion preference without changing the default design. *\/\n@media (prefers-reduced-motion: reduce) {\n  .el-project-card,\n  .el-project-hero-image,\n  .el-project-text,\n  .el-gallery-item img {\n    transition: none !important;\n  }\n}\n\n<\/style>\n\n\n<div class=\"el-project-switcher\">\n\n\n  <!-- =================================================\n       \u0421\u0426\u0415\u041d\u0410 1\n  ================================================== -->\n\n  <div class=\"el-project-cards-section\">\n\n    <img\n      class=\"el-project-cards-bg\"\n      src=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/2532352.jpg\"\n      alt=\"\"\n      loading=\"lazy\"\n      decoding=\"async\"\n    >\n\n    <div class=\"el-project-cards\">\n\n\n      <!-- =================================================\n           \u041a\u0410\u0420\u0422\u041e\u0427\u041a\u0410 1 \u2014 ALPINE\n      ================================================== -->\n\n      <div\n        class=\"el-project-card active\"\n\n        data-title=\"Alpine\"\n\n        data-label=\"Hiking 01\"\n\n        data-text=\"High ridges, cold air and endless mountain horizons.\"\n\n        data-main=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/pexels-wolfgang-weiser-467045605-24816307.jpg\"\n\n        data-img1=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/pexels-flavienpics-6128537.jpg\"\n\n        data-img2=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/pexels-christopher-politano-978995-32348846.jpg\"\n\n        data-img3=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/pexels-ismaele-rigon-1335993625-27817389.jpg\"\n      >\n\n        <img\n          class=\"el-project-card-image\"\n          src=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/53534634.jpg\"\n          alt=\"\"\n          loading=\"lazy\"\n          decoding=\"async\"\n        >\n\n        <div class=\"el-card-content\">\n\n          <span class=\"el-card-number\">\n            01\n          <\/span>\n\n          <h3 class=\"el-card-title\">\n            Alpine\n          <\/h3>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- =================================================\n           \u041a\u0410\u0420\u0422\u041e\u0427\u041a\u0410 2 \u2014 FOREST\n      ================================================== -->\n\n      <div\n        class=\"el-project-card\"\n\n        data-title=\"Forest\"\n\n        data-label=\"Hiking 02\"\n\n        data-text=\"Deep woodland trails shaped by silence, rain and time.\"\n\n        data-main=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/pexels-terence-b-774980713-19099520.jpg\"\n\n        data-img1=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/pexels-669212965-28818459.jpg\"\n\n        data-img2=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/pexels-photations-27068420.jpg\"\n\n        data-img3=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/pexels-mavihnt-38145936.jpg\"\n      >\n\n        <img\n          class=\"el-project-card-image\"\n          src=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/434636436.jpg\"\n          alt=\"\"\n          loading=\"lazy\"\n          decoding=\"async\"\n        >\n\n        <div class=\"el-card-content\">\n\n          <span class=\"el-card-number\">\n            02\n          <\/span>\n\n          <h3 class=\"el-card-title\">\n            Forest\n          <\/h3>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- =================================================\n           \u041a\u0410\u0420\u0422\u041e\u0427\u041a\u0410 3 \u2014 COASTAL\n      ================================================== -->\n\n      <div\n        class=\"el-project-card\"\n\n        data-title=\"Coastal\"\n\n        data-label=\"Hiking 03\"\n\n        data-text=\"Wild cliffs, open water and trails at the edge of land.\"\n\n        data-main=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/4151768650.jpg\"\n\n        data-img1=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/pexels-katetrifo-4088411.jpg\"\n\n        data-img2=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/pexels-brayden-stanford-74121309-8521886.jpg\"\n\n        data-img3=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/pexels-imperioame-33378541.jpg\"\n      >\n\n        <img\n          class=\"el-project-card-image\"\n          src=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/46346343.jpg\"\n          alt=\"\"\n          loading=\"lazy\"\n          decoding=\"async\"\n        >\n\n        <div class=\"el-card-content\">\n\n          <span class=\"el-card-number\">\n            03\n          <\/span>\n\n          <h3 class=\"el-card-title\">\n            Coastal\n          <\/h3>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- =================================================\n           \u041a\u0410\u0420\u0422\u041e\u0427\u041a\u0410 4 \u2014 VALLEY\n      ================================================== -->\n\n      <div\n        class=\"el-project-card\"\n\n        data-title=\"Valley\"\n\n        data-label=\"Hiking 04\"\n\n        data-text=\"Long paths through quiet valleys and untouched terrain.\"\n\n        data-main=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/pexels-anastasia-rezvanova-79376345-8701922.jpg\"\n\n        data-img1=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/pexels-nadezhda-moryak-9674393.jpg\"\n\n        data-img2=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/pexels-barnabas-davoti-31615494-9246564.jpg\"\n\n        data-img3=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/pexels-zak-mir-2158162344-35429973.jpg\"\n      >\n\n        <img\n          class=\"el-project-card-image\"\n          src=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/2535352.jpg\"\n          alt=\"\"\n          loading=\"lazy\"\n          decoding=\"async\"\n        >\n\n        <div class=\"el-card-content\">\n\n          <span class=\"el-card-number\">\n            04\n          <\/span>\n\n          <h3 class=\"el-card-title\">\n            Valley\n          <\/h3>\n\n        <\/div>\n\n      <\/div>\n\n\n    <\/div>\n\n  <\/div>\n\n\n  <!-- =================================================\n       \u0421\u0426\u0415\u041d\u0410 2\n       \u041f\u041e \u0423\u041c\u041e\u041b\u0427\u0410\u041d\u0418\u042e ALPINE\n  ================================================== -->\n\n  <div class=\"el-project-scene\">\n\n\n    <!-- =================================================\n         \u0411\u041e\u041b\u042c\u0428\u0410\u042f \u0424\u041e\u0422\u041e\u0413\u0420\u0410\u0424\u0418\u042f\n    ================================================== -->\n\n    <div class=\"el-project-hero\">\n\n      <img\n        class=\"el-project-hero-image\"\n\n        src=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/pexels-wolfgang-weiser-467045605-24816307.jpg\"\n\n        alt=\"Alpine\"\n      \n        loading=\"lazy\"\n        decoding=\"async\"\n      >\n\n\n      <!-- \u0422\u0435\u043a\u0441\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 hero.\n           \u041d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0435 \u044d\u0442\u043e\u0442 \u0431\u043b\u043e\u043a \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u043e\u0432\u0435\u0440\u0445 \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0438. -->\n\n      <div class=\"el-project-hero-content\">\n\n        <div class=\"el-project-text\">\n\n          <span class=\"el-project-label\">\n            Hiking 01\n          <\/span>\n\n          <h2 class=\"el-project-title\">\n            Alpine\n          <\/h2>\n\n          <p class=\"el-project-description\">\n            High ridges, cold air and endless mountain horizons.\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- =================================================\n         \u0422\u0420\u0418 \u0414\u041e\u041f\u041e\u041b\u041d\u0418\u0422\u0415\u041b\u042c\u041d\u042b\u0415 \u0424\u041e\u0422\u041e\u0413\u0420\u0410\u0424\u0418\u0418\n    ================================================== -->\n\n    <div class=\"el-project-gallery\">\n\n\n      <div class=\"el-gallery-item\">\n\n        <img\n          class=\"el-gallery-img-1\"\n\n          src=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/pexels-flavienpics-6128537.jpg\"\n\n          alt=\"Alpine\"\n        \n        loading=\"lazy\"\n        decoding=\"async\"\n      >\n\n      <\/div>\n\n\n      <div class=\"el-gallery-item\">\n\n        <img\n          class=\"el-gallery-img-2\"\n\n          src=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/pexels-christopher-politano-978995-32348846.jpg\"\n\n          alt=\"Alpine\"\n        \n        loading=\"lazy\"\n        decoding=\"async\"\n      >\n\n      <\/div>\n\n\n      <div class=\"el-gallery-item\">\n\n        <img\n          class=\"el-gallery-img-3\"\n\n          src=\"https:\/\/digitaldesignonline.ru\/wp-content\/uploads\/2026\/08\/pexels-ismaele-rigon-1335993625-27817389.jpg\"\n\n          alt=\"Alpine\"\n        \n        loading=\"lazy\"\n        decoding=\"async\"\n      >\n\n      <\/div>\n\n\n    <\/div>\n\n  <\/div>\n\n<\/div>\n\n\n<script>\n(() => {\n  document.querySelectorAll('.el-project-switcher').forEach((switcher) => {\n    const cardsWrap = switcher.querySelector('.el-project-cards');\n    const cards = Array.from(switcher.querySelectorAll('.el-project-card'));\n    const hero = switcher.querySelector('.el-project-hero');\n    const gallery = switcher.querySelector('.el-project-gallery');\n    const heroImage = switcher.querySelector('.el-project-hero-image');\n    const projectTitle = switcher.querySelector('.el-project-title');\n    const projectLabel = switcher.querySelector('.el-project-label');\n    const projectText = switcher.querySelector('.el-project-description');\n    const galleryImages = [\n      switcher.querySelector('.el-gallery-img-1'),\n      switcher.querySelector('.el-gallery-img-2'),\n      switcher.querySelector('.el-gallery-img-3')\n    ];\n\n    if (\n      !cardsWrap ||\n      !cards.length ||\n      !hero ||\n      !gallery ||\n      !heroImage ||\n      !projectTitle ||\n      !projectLabel ||\n      !projectText ||\n      galleryImages.some((image) => !image)\n    ) {\n      return;\n    }\n\n    let swapTimer = 0;\n    let revealTimer = 0;\n    const preloaded = new Set();\n\n    const getProject = (card) => ({\n      title: card.dataset.title || '',\n      label: card.dataset.label || '',\n      text: card.dataset.text || '',\n      main: (card.dataset.main || '').trim(),\n      images: [\n        (card.dataset.img1 || '').trim(),\n        (card.dataset.img2 || '').trim(),\n        (card.dataset.img3 || '').trim()\n      ]\n    });\n\n    const preloadProject = (card) => {\n      const project = getProject(card);\n\n      [project.main, ...project.images].forEach((src) => {\n        if (!src || preloaded.has(src)) return;\n        preloaded.add(src);\n\n        const image = new Image();\n        image.decoding = 'async';\n        image.src = src;\n      });\n    };\n\n    const updateProject = (card) => {\n      const project = getProject(card);\n\n      projectTitle.textContent = project.title;\n      projectLabel.textContent = project.label;\n      projectText.textContent = project.text;\n\n      heroImage.src = project.main;\n      heroImage.alt = project.title;\n\n      galleryImages.forEach((image, index) => {\n        image.src = project.images[index];\n        image.alt = project.title;\n      });\n    };\n\n    const updateActiveState = (activeCard) => {\n      cards.forEach((card) => {\n        const isActive = card === activeCard;\n        card.classList.toggle('active', isActive);\n        card.setAttribute('aria-pressed', String(isActive));\n      });\n    };\n\n    const setProject = (card, animate = true) => {\n      if (!card) return;\n      if (animate && card.classList.contains('active')) return;\n\n      window.clearTimeout(swapTimer);\n      window.clearTimeout(revealTimer);\n\n      updateActiveState(card);\n      preloadProject(card);\n\n      if (!animate) {\n        updateProject(card);\n        return;\n      }\n\n      hero.classList.add('is-changing');\n      gallery.classList.add('is-changing');\n\n      swapTimer = window.setTimeout(() => {\n        updateProject(card);\n\n        revealTimer = window.setTimeout(() => {\n          hero.classList.remove('is-changing');\n          gallery.classList.remove('is-changing');\n        }, 100);\n      }, 350);\n    };\n\n    cards.forEach((card) => {\n      card.setAttribute('role', 'button');\n      card.setAttribute('tabindex', '0');\n      card.setAttribute(\n        'aria-pressed',\n        String(card.classList.contains('active'))\n      );\n    });\n\n    setProject(cards[0], false);\n\n    cardsWrap.addEventListener('click', (event) => {\n      const card = event.target.closest('.el-project-card');\n      if (!card || !cardsWrap.contains(card)) return;\n      setProject(card, true);\n    });\n\n    cardsWrap.addEventListener('keydown', (event) => {\n      if (event.key !== 'Enter' && event.key !== ' ') return;\n\n      const card = event.target.closest('.el-project-card');\n      if (!card || !cardsWrap.contains(card)) return;\n\n      event.preventDefault();\n      setProject(card, true);\n    });\n\n    const warmProject = (event) => {\n      const card = event.target.closest('.el-project-card');\n      if (card && cardsWrap.contains(card)) preloadProject(card);\n    };\n\n    cardsWrap.addEventListener('pointerover', warmProject, {\n      passive: true\n    });\n    cardsWrap.addEventListener('focusin', warmProject);\n  });\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>01 INTO THE WILD TRAILBOUND Leave the noise behind. Follow untamed trails through mountains, forests and remote landscapes built for those who choose the long way. 01 Alpine 02 Forest 03 Coastal 04 Valley Hiking 01 Alpine High ridges, cold air and endless mountain horizons.<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-516","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/digitaldesignonline.ru\/ru\/wp-json\/wp\/v2\/pages\/516","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digitaldesignonline.ru\/ru\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/digitaldesignonline.ru\/ru\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/digitaldesignonline.ru\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digitaldesignonline.ru\/ru\/wp-json\/wp\/v2\/comments?post=516"}],"version-history":[{"count":155,"href":"https:\/\/digitaldesignonline.ru\/ru\/wp-json\/wp\/v2\/pages\/516\/revisions"}],"predecessor-version":[{"id":1518,"href":"https:\/\/digitaldesignonline.ru\/ru\/wp-json\/wp\/v2\/pages\/516\/revisions\/1518"}],"wp:attachment":[{"href":"https:\/\/digitaldesignonline.ru\/ru\/wp-json\/wp\/v2\/media?parent=516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}