Download Code
<!-- wp:greenshift-blocks/element {"id":"gsbp-145888a","dynamicGClasses":[{"value":"hm-container","type":"local","label":"hm-container","localed":false,"css":".hm-container{padding:2rem;position:relative;}","attributes":{"styleAttributes":{"padding":["2rem"],"position":["relative"]}},"originalID":"gsbp-145888a","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"hm-header","type":"local","label":"hm-header","localed":false,"css":".hm-header{margin-bottom: 1rem;}","attributes":{"styleAttributes":{"marginBottom":["1rem"]}},"originalID":"gsbp-145888a","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"hm-heading","type":"local","label":"hm-heading","localed":false,"css":".hm-heading{font-size:var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dfont-size\u002d\u002ds, 1rem);font-weight:600;letter-spacing:0.05em;text-transform:uppercase;margin:0;line-height:var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dline-height\u002d\u002ds, 1.4rem);opacity:0.6;}","attributes":{"styleAttributes":{"fontSize":["var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dfont-size\u002d\u002ds, 1rem)"],"fontWeight":["600"],"letterSpacing":["0.05em"],"textTransform":["uppercase"],"margin":["0"],"lineHeight":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dline-height\u002d\u002ds, 1.4rem)"],"opacity":[0.6]}},"originalID":"gsbp-145888a","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"hm-list","type":"local","label":"hm-list","localed":false,"css":".hm-list{display: flex;\n flex-direction: column;\n border-top: 1px solid #d1d5db;}","attributes":{"styleAttributes":{"display":["flex"],"flexDirection":["column"],"borderTop":["1px solid #d1d5db"]}},"originalID":"gsbp-145888a","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"hm-item","type":"local","label":"hm-item","localed":false,"css":".hm-item{position:relative;display:flex;align-items:center;justify-content:space-between;padding:2rem 0;border-bottom:1px solid #d1d5db;cursor:pointer;overflow:hidden;text-decoration:none;color:inherit;padding-top:var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dspacing\u002d\u002d50, 1.5rem);padding-bottom:var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dspacing\u002d\u002d50, 1.5rem);padding-right:0px;padding-left:0px;}","attributes":{"styleAttributes":{"position":["relative"],"display":["flex"],"alignItems":["center"],"justifyContent":["space-between"],"padding":["2rem 0"],"borderBottom":["1px solid #d1d5db"],"cursor":["pointer"],"overflow":["hidden"],"textDecoration":["none"],"color":["inherit"],"paddingTop":["var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dspacing\u002d\u002d50, 1.5rem)"],"paddingBottom":["var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dspacing\u002d\u002d50, 1.5rem)"],"paddingRight":["0px"],"paddingLeft":["0px"]}},"originalID":"gsbp-145888a","originalBlock":"greenshift-blocks/element","selectors":[{"value":":hover .hm-curtain","attributes":{"styleAttributes":{"clipPath":["inset(0 0 0 0)"]}},"css":".hm-item:hover .hm-curtain{clip-path: inset(0 0 0 0);}"},{"value":":hover .hm-content","attributes":{"styleAttributes":{"transform":["translateX(20px)"]}},"css":".hm-item:hover .hm-content{transform: translateX(20px);}"},{"value":":hover .hm-title","attributes":{"styleAttributes":{"color":["#fff"]}},"css":".hm-item:hover .hm-title{color: #fff;}"},{"value":":hover .hm-category","attributes":{"styleAttributes":{"color":["#9ca3af"]}},"css":".hm-item:hover .hm-category{color: #9ca3af;}"},{"value":":hover .hm-arrow","attributes":{"styleAttributes":{"color":["#fff"],"transform":["translate(-15px, 0) rotate(45deg) scale(1.1)"]}},"css":".hm-item:hover .hm-arrow{color: #fff;\n \n transform: translate(-15px, 0) rotate(45deg) scale(1.1);}"}]},{"value":"hm-curtain","type":"local","label":"hm-curtain","localed":false,"css":".hm-curtain{position: absolute;\n inset: 0;\n background-color: #111;\n z-index: 0;\n clip-path: inset(100% 0 0 0);\n transition: clip-path 0.4s cubic-bezier(0.25, 1, 0.5, 1);\n pointer-events: none;}","attributes":{"styleAttributes":{"position":["absolute"],"inset":["0"],"backgroundColor":["#111"],"zIndex":["0"],"clipPath":["inset(100% 0 0 0)"],"transition":["clip-path 0.4s cubic-bezier(0.25, 1, 0.5, 1)"],"pointerEvents":["none"]}},"originalID":"gsbp-145888a","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"hm-content","type":"local","label":"hm-content","localed":false,"css":".hm-content{position: relative;\n z-index: 10;\n pointer-events: none;\n display: flex;\n flex-direction: column;\n transition: transform 0.3s ease-out;}","attributes":{"styleAttributes":{"position":["relative"],"zIndex":["10"],"pointerEvents":["none"],"display":["flex"],"flexDirection":["column"],"transition":["transform 0.3s ease-out"]}},"originalID":"gsbp-145888a","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"hm-title","type":"local","label":"hm-title","localed":false,"css":".hm-title{font-size:var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dfont-size\u002d\u002dgiga, clamp(3rem, 5vw, 4.5rem));font-weight:400;line-height:var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dline-height\u002d\u002dgiga, clamp(4rem, 6vw, 5rem));letter-spacing:-0.025em;margin:0;transition:var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dtransition\u002d\u002dease-in-out, all 0.3s ease-in-out);}","attributes":{"styleAttributes":{"fontSize":["var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dfont-size\u002d\u002dgiga, clamp(3rem, 5vw, 4.5rem))"],"fontWeight":["400"],"lineHeight":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dline-height\u002d\u002dgiga, clamp(4rem, 6vw, 5rem))"],"letterSpacing":["-0.025em"],"margin":["0"],"transition":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dtransition\u002d\u002dease-in-out, all 0.3s ease-in-out)"]}},"originalID":"gsbp-145888a","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"hm-category","type":"local","label":"hm-category","localed":false,"css":".hm-category{font-size: 0.875rem;\n margin-top: 0.5rem;\n text-transform: uppercase;\n letter-spacing: 0.1em;\n color: #6b7280;\n transition: color 0.3s;}","attributes":{"styleAttributes":{"fontSize":["0.875rem"],"marginTop":["0.5rem"],"textTransform":["uppercase"],"letterSpacing":["0.1em"],"color":["#6b7280"],"transition":["color 0.3s"]}},"originalID":"gsbp-145888a","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"hm-arrow","type":"local","label":"hm-arrow","localed":false,"css":".hm-arrow{position: relative;\n z-index: 10;\n color: #000;\n transition: all 0.3s ease;}","attributes":{"styleAttributes":{"position":["relative"],"zIndex":["10"],"color":["#000"],"transition":["all 0.3s ease"]}},"originalID":"gsbp-145888a","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"hm-cursor","type":"local","label":"hm-cursor","localed":false,"css":".hm-cursor{position: fixed;\n top: 0;\n left: 0;\n width: 300px;\n height: 200px;\n overflow: hidden;\n border-radius: 0.75rem;\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n background-color: #111;\n pointer-events: none;\n z-index: 50;\n opacity: 0;\n transform: scale(0.9);\n transition: opacity 0.3s ease, transform 0.1s linear; \n display: none;}@media (min-width: 768px){.hm-cursor{display: block;}}","attributes":{"styleAttributes":{"position":["fixed"],"top":["0"],"left":["0"],"width":["300px"],"height":["200px"],"overflow":["hidden"],"borderRadius":["0.75rem"],"boxShadow":["0 25px 50px -12px rgba(0, 0, 0, 0.25)"],"backgroundColor":["#111"],"pointerEvents":["none"],"zIndex":["50"],"opacity":["0"],"transform":["scale(0.9)"],"transition":["opacity 0.3s ease, transform 0.1s linear"],"display":["none"],"customCSS_Extra":"@media (min-width: 768px){.hm-cursor{display: block;}}"}},"originalID":"gsbp-145888a","originalBlock":"greenshift-blocks/element","selectors":[{"value":" img","attributes":{"styleAttributes":{"position":["absolute"],"top":["0"],"left":["0"],"width":["100%"],"height":["100%"],"objectFit":["cover"]}},"css":".hm-cursor img{position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;}"}]},{"value":"hm-img-enter","type":"local","label":"hm-img-enter","localed":false,"css":".hm-img-enter{animation: hmWipeIn 0.65s cubic-bezier(0.25, 1, 0.5, 1) forwards;\n z-index: 2;}","attributes":{"styleAttributes":{"animation":["hmWipeIn 0.65s cubic-bezier(0.25, 1, 0.5, 1) forwards"],"zIndex":["2"]}},"originalID":"gsbp-145888a","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"hm-img-exit","type":"local","label":"hm-img-exit","localed":false,"css":".hm-img-exit{animation: hmWipeOut 0.65s cubic-bezier(0.25, 1, 0.5, 1) forwards;\n z-index: 1;}","attributes":{"styleAttributes":{"animation":["hmWipeOut 0.65s cubic-bezier(0.25, 1, 0.5, 1) forwards"],"zIndex":["1"]}},"originalID":"gsbp-145888a","originalBlock":"greenshift-blocks/element","selectors":[]}],"metadata":{"name":"Controller for interactive hover links"},"type":"no","className":"hm-container hm-header hm-heading hm-list hm-item hm-curtain hm-content hm-title hm-category hm-arrow hm-cursor hm-img-enter hm-img-exit","localId":"gsbp-145888a","isVariation":"stylemanager","customCss":"@keyframes hmWipeIn {\n from { clip-path: inset(100% 0 0 0); }\n to { clip-path: inset(0 0 0 0); }\n }@keyframes hmWipeOut {\n from { clip-path: inset(0 0 0 0); }\n to { clip-path: inset(0 0 100% 0); }\n }","customJs":"(function () {\n\n const gsHmPreviewCursorItems = document.querySelectorAll('.hm-item');\n const gsHmPreviewCursorElement = document.getElementById('preview-cursor');\n const gsHmPreviewCursorContainer = document.querySelector('.hm-container');\n\n let gsHmPreviewCursorMouseX = 0;\n let gsHmPreviewCursorMouseY = 0;\n let gsHmPreviewCursorX = 0;\n let gsHmPreviewCursorY = 0;\n let gsHmPreviewCursorIsHovering = false;\n let gsHmPreviewCursorActiveImageSrc = null;\n\n // \u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d-\n // Mouse Move Tracking\n // \u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d-\n document.addEventListener('mousemove', function (e) {\n gsHmPreviewCursorMouseX = e.clientX;\n gsHmPreviewCursorMouseY = e.clientY;\n });\n\n // \u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d-\n // Item Hover Events\n // \u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d-\n gsHmPreviewCursorItems.forEach(function (item) {\n\n item.addEventListener('mouseenter', function () {\n\n gsHmPreviewCursorIsHovering = true;\n\n const imageUrl = item.getAttribute('data-image');\n\n if (imageUrl) {\n gsHmPreviewCursorUpdateImage(imageUrl);\n }\n\n if (gsHmPreviewCursorElement) {\n gsHmPreviewCursorElement.style.opacity = '1';\n }\n });\n\n item.addEventListener('mouseleave', function () {\n\n gsHmPreviewCursorIsHovering = false;\n\n if (gsHmPreviewCursorElement) {\n gsHmPreviewCursorElement.style.opacity = '0';\n }\n });\n\n });\n\n // \u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d-\n // Animation Loop\n // \u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d-\n function gsHmPreviewCursorAnimate() {\n\n if (!gsHmPreviewCursorElement) {\n requestAnimationFrame(gsHmPreviewCursorAnimate);\n return;\n }\n\n const SHIFT_X = 400;\n const IMAGE_WIDTH = 300;\n const IMAGE_HEIGHT = 200;\n const PADDING = 24;\n const OVERFLOW_ALLOWANCE = 100;\n\n let targetX = gsHmPreviewCursorMouseX + SHIFT_X;\n let targetY = gsHmPreviewCursorMouseY - (IMAGE_HEIGHT / 2);\n\n // Boundary Logic\n if (gsHmPreviewCursorContainer) {\n\n const containerRect = gsHmPreviewCursorContainer.getBoundingClientRect();\n const maxLeft = containerRect.right - IMAGE_WIDTH - PADDING + OVERFLOW_ALLOWANCE;\n\n if (targetX \u003e maxLeft) {\n targetX = maxLeft;\n }\n\n } else {\n\n const windowWidth = window.innerWidth;\n const maxLeft = windowWidth - IMAGE_WIDTH - PADDING;\n\n if (targetX \u003e maxLeft) {\n targetX = maxLeft;\n }\n }\n\n // Smooth follow (lerp)\n gsHmPreviewCursorX += (targetX - gsHmPreviewCursorX) * 0.1;\n gsHmPreviewCursorY += (targetY - gsHmPreviewCursorY) * 0.1;\n\n const scale = gsHmPreviewCursorIsHovering ? 1 : 0.9;\n\n gsHmPreviewCursorElement.style.transform =\n `translate(${gsHmPreviewCursorX.toFixed(2)}px, ${gsHmPreviewCursorY.toFixed(2)}px) scale(${scale})`;\n\n requestAnimationFrame(gsHmPreviewCursorAnimate);\n }\n\n // Start loop\n gsHmPreviewCursorAnimate();\n\n // \u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d-\n // Image Switching Logic\n // \u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d\u002d-\n function gsHmPreviewCursorUpdateImage(url) {\n\n if (!gsHmPreviewCursorElement) return;\n\n if (gsHmPreviewCursorActiveImageSrc === url) return;\n\n gsHmPreviewCursorActiveImageSrc = url;\n\n const img = document.createElement('img');\n img.src = url;\n img.className = 'hm-img-enter';\n\n const oldImages = Array.from(gsHmPreviewCursorElement.children);\n\n oldImages.forEach(function (child) {\n\n child.classList.remove('hm-img-enter');\n child.classList.add('hm-img-exit');\n\n setTimeout(function () {\n if (child.parentNode === gsHmPreviewCursorElement) {\n gsHmPreviewCursorElement.removeChild(child);\n }\n }, 650);\n\n });\n\n gsHmPreviewCursorElement.appendChild(img);\n }\n\n})();","customJsEnabled":true} -->
<div class="hm-container hm-header hm-heading hm-list hm-item hm-curtain hm-content hm-title hm-category hm-arrow hm-cursor hm-img-enter hm-img-exit"></div>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-fd1ff19","tag":"section","type":"inner","localId":"gsbp-fd1ff19","align":"full","dynamicAttributes":[{"name":"data-type","value":"section-component"}],"styleAttributes":{"display":["flex"],"justifyContent":["center"],"flexDirection":["column"],"alignItems":["center"],"paddingRight":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dspacing\u002d\u002dside, min(3vw, 20px))"],"paddingLeft":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dspacing\u002d\u002dside, min(3vw, 20px))"],"paddingTop":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dspacing\u002d\u002dtop, 0px)"],"paddingBottom":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dspacing\u002d\u002dbottom, 0px)"],"marginTop":["0px"],"marginBottom":["0px"],"paddingLink_Extra":"lr","position":["relative"]},"isVariation":"contentwrapper"} -->
<section class="gsbp-fd1ff19 alignfull" data-type="section-component"><!-- wp:greenshift-blocks/element {"id":"gsbp-3609d10","metadata":{"name":"Content Area"},"type":"inner","localId":"gsbp-3609d10","dynamicAttributes":[{"name":"data-type","value":"content-area-component"}],"styleAttributes":{"maxWidth":["100%"],"width":["var(\u002d\u002dwp\u002d\u002dstyle\u002d\u002dglobal\u002d\u002dwide-size, 1200px)"]},"isVariation":"nocolumncontent"} -->
<div class="gsbp-3609d10" data-type="content-area-component"><!-- wp:greenshift-blocks/element {"id":"gsbp-26423e3","type":"inner","className":"hm-container","localId":"gsbp-26423e3"} -->
<div class="hm-container"><!-- wp:greenshift-blocks/element {"id":"gsbp-03b88a4","tag":"header","type":"inner","className":"hm-header","localId":"gsbp-03b88a4"} -->
<header class="hm-header"><!-- wp:greenshift-blocks/element {"id":"gsbp-376bafa","textContent":"Latest","className":"hm-heading","localId":"gsbp-376bafa"} -->
<div class="hm-heading">Latest</div>
<!-- /wp:greenshift-blocks/element --></header>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-dca0bd3","type":"inner","className":"hm-list","localId":"gsbp-dca0bd3"} -->
<div class="hm-list"><!-- wp:greenshift-blocks/element {"id":"gsbp-4ec47b1","tag":"a","type":"inner","className":"hm-item","localId":"gsbp-4ec47b1","href":"#","dynamicAttributes":[{"name":"data-image","value":"https://picsum.photos/id/10/600/400"}]} -->
<a class="hm-item" href="#" data-image="https://picsum.photos/id/10/600/400"><!-- wp:greenshift-blocks/element {"id":"gsbp-32f6e15","type":"empty","className":"hm-curtain","localId":"gsbp-32f6e15"} -->
<div class="hm-curtain"></div>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-17dd777","type":"inner","className":"hm-content","localId":"gsbp-17dd777"} -->
<div class="hm-content"><!-- wp:greenshift-blocks/element {"id":"gsbp-469fe83","textContent":"Crystal Vibes","tag":"h2","className":"hm-title","localId":"gsbp-469fe83"} -->
<h2 class="hm-title">Crystal Vibes</h2>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-e98c178","textContent":"Interaction Design","tag":"span","className":"hm-category","localId":"gsbp-e98c178"} -->
<span class="hm-category">Interaction Design</span>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-8d1a2cb","type":"inner","className":"hm-arrow","localId":"gsbp-8d1a2cb"} -->
<div class="hm-arrow"><!-- wp:greenshift-blocks/element {"id":"gsbp-3fcf35f","tag":"svg","icon":{"icon":{"svg":"\u003csvg xmlns=\u0022http://www.w3.org/2000/svg\u0022 width=\u002232\u0022 height=\u002232\u0022 viewBox=\u00220 0 24 24\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 stroke-width=\u00221.5\u0022 stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022\u003e\n \u003cpath d=\u0022M7 7h10v10\u0022\u003e\u003c/path\u003e\u003cpath d=\u0022M7 17 17 7\u0022\u003e\u003c/path\u003e\n \u003c/svg\u003e","image":""},"fill":"currentColor","fillhover":"currentColor","type":"svg"},"localId":"gsbp-3fcf35f","styleAttributes":{"width":["32px"],"height":["32px"]}} -->
<svg viewBox="0 0 24 24" width="32" height="32" class="gsbp-3fcf35f">
<path xmlns="http://www.w3.org/2000/svg" d="M7 7h10v10"/><path xmlns="http://www.w3.org/2000/svg" d="M7 17 17 7"/>
</svg>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></a>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-1c449e1","tag":"a","type":"inner","className":"hm-item","localId":"gsbp-1c449e1","href":"#","dynamicAttributes":[{"name":"data-image","value":"https://picsum.photos/id/16/600/400"}]} -->
<a class="hm-item" href="#" data-image="https://picsum.photos/id/16/600/400"><!-- wp:greenshift-blocks/element {"id":"gsbp-bd97847","type":"empty","className":"hm-curtain","localId":"gsbp-bd97847"} -->
<div class="hm-curtain"></div>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-2dbfcfc","type":"inner","className":"hm-content","localId":"gsbp-2dbfcfc"} -->
<div class="hm-content"><!-- wp:greenshift-blocks/element {"id":"gsbp-5b46a56","textContent":"Into the Heat","tag":"h2","className":"hm-title","localId":"gsbp-5b46a56"} -->
<h2 class="hm-title">Into the Heat</h2>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-25d4f28","textContent":"Branding","tag":"span","className":"hm-category","localId":"gsbp-25d4f28"} -->
<span class="hm-category">Branding</span>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-a9bc002","type":"inner","className":"hm-arrow","localId":"gsbp-a9bc002"} -->
<div class="hm-arrow"><!-- wp:greenshift-blocks/element {"id":"gsbp-781c3ec","tag":"svg","icon":{"icon":{"svg":"\u003csvg xmlns=\u0022http://www.w3.org/2000/svg\u0022 width=\u002232\u0022 height=\u002232\u0022 viewBox=\u00220 0 24 24\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 stroke-width=\u00221.5\u0022 stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022\u003e\n \u003cpath d=\u0022M7 7h10v10\u0022\u003e\u003c/path\u003e\u003cpath d=\u0022M7 17 17 7\u0022\u003e\u003c/path\u003e\n \u003c/svg\u003e","image":""},"fill":"currentColor","fillhover":"currentColor","type":"svg"},"localId":"gsbp-781c3ec","styleAttributes":{"width":["32px"],"height":["32px"]}} -->
<svg viewBox="0 0 24 24" width="32" height="32" class="gsbp-781c3ec">
<path xmlns="http://www.w3.org/2000/svg" d="M7 7h10v10"/><path xmlns="http://www.w3.org/2000/svg" d="M7 17 17 7"/>
</svg>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></a>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-6c9f535","tag":"a","type":"inner","className":"hm-item","localId":"gsbp-6c9f535","href":"#","dynamicAttributes":[{"name":"data-image","value":"https://picsum.photos/id/28/600/400"}]} -->
<a class="hm-item" href="#" data-image="https://picsum.photos/id/28/600/400"><!-- wp:greenshift-blocks/element {"id":"gsbp-4224471","type":"empty","className":"hm-curtain","localId":"gsbp-4224471"} -->
<div class="hm-curtain"></div>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-abdfc7f","type":"inner","className":"hm-content","localId":"gsbp-abdfc7f"} -->
<div class="hm-content"><!-- wp:greenshift-blocks/element {"id":"gsbp-76d8a02","textContent":"Radiant","tag":"h2","className":"hm-title","localId":"gsbp-76d8a02"} -->
<h2 class="hm-title">Radiant</h2>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-c455da5","textContent":"Art Direction","tag":"span","className":"hm-category","localId":"gsbp-c455da5"} -->
<span class="hm-category">Art Direction</span>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-71375fc","type":"inner","className":"hm-arrow","localId":"gsbp-71375fc"} -->
<div class="hm-arrow"><!-- wp:greenshift-blocks/element {"id":"gsbp-dc2df58","tag":"svg","icon":{"icon":{"svg":"\u003csvg xmlns=\u0022http://www.w3.org/2000/svg\u0022 width=\u002232\u0022 height=\u002232\u0022 viewBox=\u00220 0 24 24\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 stroke-width=\u00221.5\u0022 stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022\u003e\n \u003cpath d=\u0022M7 7h10v10\u0022\u003e\u003c/path\u003e\u003cpath d=\u0022M7 17 17 7\u0022\u003e\u003c/path\u003e\n \u003c/svg\u003e","image":""},"fill":"currentColor","fillhover":"currentColor","type":"svg"},"localId":"gsbp-dc2df58","styleAttributes":{"width":["32px"],"height":["32px"]}} -->
<svg viewBox="0 0 24 24" width="32" height="32" class="gsbp-dc2df58">
<path xmlns="http://www.w3.org/2000/svg" d="M7 7h10v10"/><path xmlns="http://www.w3.org/2000/svg" d="M7 17 17 7"/>
</svg>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></a>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-8a45564","tag":"a","type":"inner","className":"hm-item","localId":"gsbp-8a45564","href":"#","dynamicAttributes":[{"name":"data-image","value":"https://picsum.photos/id/43/600/400"}]} -->
<a class="hm-item" href="#" data-image="https://picsum.photos/id/43/600/400"><!-- wp:greenshift-blocks/element {"id":"gsbp-ebc7967","type":"empty","className":"hm-curtain","localId":"gsbp-ebc7967"} -->
<div class="hm-curtain"></div>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-c9a34e3","type":"inner","className":"hm-content","localId":"gsbp-c9a34e3"} -->
<div class="hm-content"><!-- wp:greenshift-blocks/element {"id":"gsbp-735220a","textContent":"Framework","tag":"h2","className":"hm-title","localId":"gsbp-735220a"} -->
<h2 class="hm-title">Framework</h2>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-1c906aa","textContent":"Development","tag":"span","className":"hm-category","localId":"gsbp-1c906aa"} -->
<span class="hm-category">Development</span>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-48d0bb6","type":"inner","className":"hm-arrow","localId":"gsbp-48d0bb6"} -->
<div class="hm-arrow"><!-- wp:greenshift-blocks/element {"id":"gsbp-82b19a6","tag":"svg","icon":{"icon":{"svg":"\u003csvg xmlns=\u0022http://www.w3.org/2000/svg\u0022 width=\u002232\u0022 height=\u002232\u0022 viewBox=\u00220 0 24 24\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 stroke-width=\u00221.5\u0022 stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022\u003e\n \u003cpath d=\u0022M7 7h10v10\u0022\u003e\u003c/path\u003e\u003cpath d=\u0022M7 17 17 7\u0022\u003e\u003c/path\u003e\n \u003c/svg\u003e","image":""},"fill":"currentColor","fillhover":"currentColor","type":"svg"},"localId":"gsbp-82b19a6","styleAttributes":{"width":["32px"],"height":["32px"]}} -->
<svg viewBox="0 0 24 24" width="32" height="32" class="gsbp-82b19a6">
<path xmlns="http://www.w3.org/2000/svg" d="M7 7h10v10"/><path xmlns="http://www.w3.org/2000/svg" d="M7 17 17 7"/>
</svg>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></a>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-29fc9f7","tag":"a","type":"inner","className":"hm-item","localId":"gsbp-29fc9f7","href":"#","dynamicAttributes":[{"name":"data-image","value":"https://picsum.photos/id/58/600/400"}]} -->
<a class="hm-item" href="#" data-image="https://picsum.photos/id/58/600/400"><!-- wp:greenshift-blocks/element {"id":"gsbp-182c098","type":"empty","className":"hm-curtain","localId":"gsbp-182c098"} -->
<div class="hm-curtain"></div>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-21044ae","type":"inner","className":"hm-content","localId":"gsbp-21044ae"} -->
<div class="hm-content"><!-- wp:greenshift-blocks/element {"id":"gsbp-364f495","textContent":"Balanced","tag":"h2","className":"hm-title","localId":"gsbp-364f495"} -->
<h2 class="hm-title">Balanced</h2>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-71820e1","textContent":"Photography","tag":"span","className":"hm-category","localId":"gsbp-71820e1"} -->
<span class="hm-category">Photography</span>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-39f4a88","type":"inner","className":"hm-arrow","localId":"gsbp-39f4a88"} -->
<div class="hm-arrow"><!-- wp:greenshift-blocks/element {"id":"gsbp-94933ce","tag":"svg","icon":{"icon":{"svg":"\u003csvg xmlns=\u0022http://www.w3.org/2000/svg\u0022 width=\u002232\u0022 height=\u002232\u0022 viewBox=\u00220 0 24 24\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 stroke-width=\u00221.5\u0022 stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022\u003e\n \u003cpath d=\u0022M7 7h10v10\u0022\u003e\u003c/path\u003e\u003cpath d=\u0022M7 17 17 7\u0022\u003e\u003c/path\u003e\n \u003c/svg\u003e","image":""},"fill":"currentColor","fillhover":"currentColor","type":"svg"},"localId":"gsbp-94933ce","styleAttributes":{"width":["32px"],"height":["32px"]}} -->
<svg viewBox="0 0 24 24" width="32" height="32" class="gsbp-94933ce">
<path xmlns="http://www.w3.org/2000/svg" d="M7 7h10v10"/><path xmlns="http://www.w3.org/2000/svg" d="M7 17 17 7"/>
</svg>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></a>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-958ee2d","tag":"a","type":"inner","className":"hm-item","localId":"gsbp-958ee2d","href":"#","dynamicAttributes":[{"name":"data-image","value":"https://picsum.photos/id/69/600/400"}]} -->
<a class="hm-item" href="#" data-image="https://picsum.photos/id/69/600/400"><!-- wp:greenshift-blocks/element {"id":"gsbp-0f4d964","type":"empty","className":"hm-curtain","localId":"gsbp-0f4d964"} -->
<div class="hm-curtain"></div>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-812ca71","type":"inner","className":"hm-content","localId":"gsbp-812ca71"} -->
<div class="hm-content"><!-- wp:greenshift-blocks/element {"id":"gsbp-3c599b2","textContent":"Neon Nights","tag":"h2","className":"hm-title","localId":"gsbp-3c599b2"} -->
<h2 class="hm-title">Neon Nights</h2>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-1957921","textContent":"Motion Graphics","tag":"span","className":"hm-category","localId":"gsbp-1957921"} -->
<span class="hm-category">Motion Graphics</span>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-3c21cfa","type":"inner","className":"hm-arrow","localId":"gsbp-3c21cfa"} -->
<div class="hm-arrow"><!-- wp:greenshift-blocks/element {"id":"gsbp-0fcc96a","tag":"svg","icon":{"icon":{"svg":"\u003csvg xmlns=\u0022http://www.w3.org/2000/svg\u0022 width=\u002232\u0022 height=\u002232\u0022 viewBox=\u00220 0 24 24\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 stroke-width=\u00221.5\u0022 stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022\u003e\n \u003cpath d=\u0022M7 7h10v10\u0022\u003e\u003c/path\u003e\u003cpath d=\u0022M7 17 17 7\u0022\u003e\u003c/path\u003e\n \u003c/svg\u003e","image":""},"fill":"currentColor","fillhover":"currentColor","type":"svg"},"localId":"gsbp-0fcc96a","styleAttributes":{"width":["32px"],"height":["32px"]}} -->
<svg viewBox="0 0 24 24" width="32" height="32" class="gsbp-0fcc96a">
<path xmlns="http://www.w3.org/2000/svg" d="M7 7h10v10"/><path xmlns="http://www.w3.org/2000/svg" d="M7 17 17 7"/>
</svg>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></a>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-f11eaae","anchor":"preview-cursor","type":"empty","className":"hm-cursor","localId":"gsbp-f11eaae"} -->
<div class="hm-cursor" id="preview-cursor"></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></section>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-ba3bdd5","textContent":"You can change image links for each item in dynamic attributes of each link ","localId":"gsbp-ba3bdd5","styleAttributes":{"hideOnFrontend_Extra":true,"color":["#000000"]},"isVariation":"divtext"} -->
<div class="gsbp-ba3bdd5">You can change image links for each item in dynamic attributes of each link </div>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->