From 17e51fdb262105bc5be9aafa314bc3f0c44edbf5 Mon Sep 17 00:00:00 2001
From: hellraiserrob <robertjamesphillips@googlemail.com>
Date: Mon, 15 Jul 2024 13:24:54 +0100
Subject: [PATCH] before / after example

---
 index.html  | 537 +++++++++++++++++++++++++++++++++++-----------------
 src/main.ts |   5 +-
 2 files changed, 365 insertions(+), 177 deletions(-)

diff --git a/index.html b/index.html
index a6507d0..17e6505 100644
--- a/index.html
+++ b/index.html
@@ -14,177 +14,360 @@ <h1>
         </h1>
         <h2>Automating keyword links</h2>
 
-        <div class="test">
-          Logistics solutions lorem test <span>test</span> ipsum dolor test sit amet, consectetuer adipiscing elit.
-          Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
-          penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-          Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
-          Nulla consequat massa quis enim. <a href="http://www.google.com">logistics solutions</a> Donec pede justo, fringilla vel,
-          aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,
-          imperdiet a, venenatis vitae, justo. Spoon Nullam dictum felis eu pede
-          mollis pretium. Integer tincidunt. Cras dapibus. Vivamus
-          elementum semper nisi. test1.  Digital solutions. test-fr
-        </div>
-        
-        <div class="rich-text">
-          Lorem test ipsum dolor warehouse LCL test sit amet, consectetuer adipiscing elit.
-          Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
-          penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-          Donec quam felis, ultricies nec, logistics solutions pellentesque eu, pretium quis, sem.
-          Nulla consequat massa quis enim. <a href="http://www.google.com">A test link</a> Donec pede justo, fringilla vel,
-          aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,
-          imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
-          mollis pretium. Integer tincidunt. Cras dapibus. Vivamus
-          elementum semper nisi. test1
-        </div>
-
-        <div>
-          Test Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu,
-          consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in,
-          viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus
-          varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam logistics solutions1 ultricies nisi
-          vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam
-          rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam
-          semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc,
-          blandit vel, luctus pulvinar, hendrerit id, lorem. test.
-        </div>
-
-        <div>
-          Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut
-          libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget
-          eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.
-          Donec sodales sagittis magna. Sed consequat, leo eget bibendum
-          sodales, augue velit cursus nunc, logistics solutions quis gravida magna mi a libero.
-          Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque
-          ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras
-          ultricies mi eu turpis hendrerit fringilla.
-        </div>
-
-        <div>
-          Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
-          posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam
-          pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet
-          nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer
-          ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent
-          adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy
-          metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros
-          et nisl sagittis vestibulum.
-        </div>
-
-        <div>
-          Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat,
-          pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in
-          justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec
-          neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis,
-          nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere
-          imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed
-          cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus
-          accumsan cursus velit.
-        </div>
-
-        <div>
-          Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
-          posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit
-          erat euismod orci, ac placerat dolor lectus quis orci. Phasellus
-          consectetuer vestibulum elit. Aenean tellus metus, bibendum sed,
-          posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet
-          augue. In turpis. Pellentesque posuere. Praesent turpis. Aenean
-          posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu
-          sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales
-          nec, volutpat a, suscipit non, turpis.
-        </div>
+        <div class="row">
+          <div class="col before">
+            <h2>Before</h2>
 
-        <div>
-          Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum,
-          sem libero volutpat nibh, nec pellentesque velit pede quis nunc.
-          Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
-          posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero.
-          Phasellus dolor. Maecenas vestibulum mollis diam. Pellentesque ut
-          neque. Pellentesque habitant morbi tristique senectus et netus et
-          malesuada fames ac turpis egestas. In dui magna, posuere eget,
-          vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada
-          pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta
-          a, auctor quis, euismod ut, mi. Aenean viverra rhoncus pede.
-          Pellentesque habitant morbi tristique senectus et netus et malesuada
-          fames ac turpis egestas. Ut non enim eleifend felis pretium feugiat.
-          Vivamus quis mi. Phasellus a est. Phasellus magna. In hac habitasse
-          platea dictumst. Curabitur at lacus ac velit ornare lobortis.
-          Curabitur a felis in nunc fringilla tristique.
-        </div>
-
-        <div>
-          Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu,
-          consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in,
-          viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus
-          varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi
-          vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam
-          rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam
-          semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc,
-          blandit vel, luctus pulvinar, hendrerit id, lorem.
-        </div>
-
-        <div>
-          Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut
-          libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget
-          eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.
-          Donec sodales sagittis magna. Sed consequat, leo eget bibendum
-          sodales, augue velit cursus nunc, quis gravida magna mi a libero.
-          Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque
-          ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras
-          ultricies mi eu turpis hendrerit fringilla.
-        </div>
-
-        <div>
-          Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
-          posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam
-          pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet
-          nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer
-          ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent
-          adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy
-          metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros
-          et nisl sagittis vestibulum.
-        </div>
+            <div class="test">
+              Logistics solutions lorem test <span>test</span> ipsum dolor test sit amet, consectetuer adipiscing elit.
+              Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
+              penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+              Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
+              Nulla consequat massa quis enim. <a href="http://www.google.com">logistics solutions</a> Donec pede justo, fringilla vel,
+              aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,
+              imperdiet a, venenatis vitae, justo. Spoon Nullam dictum felis eu pede
+              mollis pretium. Integer tincidunt. Cras dapibus. Vivamus
+              elementum semper nisi. test1.  Digital solutions. test-fr
+            </div>
+            
+            <div class="rich-text">
+              Lorem test ipsum dolor warehouse LCL test sit amet, consectetuer adipiscing elit.
+              Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
+              penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+              Donec quam felis, ultricies nec, logistics solutions pellentesque eu, pretium quis, sem.
+              Nulla consequat massa quis enim. <a href="http://www.google.com">A test link</a> Donec pede justo, fringilla vel,
+              aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,
+              imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
+              mollis pretium. Integer tincidunt. Cras dapibus. Vivamus
+              elementum semper nisi. test1
+            </div>
+    
+            <div>
+              Test Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu,
+              consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in,
+              viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus
+              varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam logistics solutions1 ultricies nisi
+              vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam
+              rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam
+              semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc,
+              blandit vel, luctus pulvinar, hendrerit id, lorem. test.
+            </div>
+    
+            <div>
+              Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut
+              libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget
+              eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.
+              Donec sodales sagittis magna. Sed consequat, leo eget bibendum
+              sodales, augue velit cursus nunc, logistics solutions quis gravida magna mi a libero.
+              Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque
+              ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras
+              ultricies mi eu turpis hendrerit fringilla.
+            </div>
+    
+            <div>
+              Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+              posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam
+              pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet
+              nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer
+              ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent
+              adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy
+              metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros
+              et nisl sagittis vestibulum.
+            </div>
+    
+            <div>
+              Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat,
+              pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in
+              justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec
+              neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis,
+              nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere
+              imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed
+              cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus
+              accumsan cursus velit.
+            </div>
+    
+            <div>
+              Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+              posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit
+              erat euismod orci, ac placerat dolor lectus quis orci. Phasellus
+              consectetuer vestibulum elit. Aenean tellus metus, bibendum sed,
+              posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet
+              augue. In turpis. Pellentesque posuere. Praesent turpis. Aenean
+              posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu
+              sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales
+              nec, volutpat a, suscipit non, turpis.
+            </div>
+    
+            <div>
+              Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum,
+              sem libero volutpat nibh, nec pellentesque velit pede quis nunc.
+              Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+              posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero.
+              Phasellus dolor. Maecenas vestibulum mollis diam. Pellentesque ut
+              neque. Pellentesque habitant morbi tristique senectus et netus et
+              malesuada fames ac turpis egestas. In dui magna, posuere eget,
+              vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada
+              pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta
+              a, auctor quis, euismod ut, mi. Aenean viverra rhoncus pede.
+              Pellentesque habitant morbi tristique senectus et netus et malesuada
+              fames ac turpis egestas. Ut non enim eleifend felis pretium feugiat.
+              Vivamus quis mi. Phasellus a est. Phasellus magna. In hac habitasse
+              platea dictumst. Curabitur at lacus ac velit ornare lobortis.
+              Curabitur a felis in nunc fringilla tristique.
+            </div>
+    
+            <div>
+              Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu,
+              consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in,
+              viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus
+              varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi
+              vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam
+              rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam
+              semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc,
+              blandit vel, luctus pulvinar, hendrerit id, lorem.
+            </div>
+    
+            <div>
+              Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut
+              libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget
+              eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.
+              Donec sodales sagittis magna. Sed consequat, leo eget bibendum
+              sodales, augue velit cursus nunc, quis gravida magna mi a libero.
+              Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque
+              ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras
+              ultricies mi eu turpis hendrerit fringilla.
+            </div>
+    
+            <div>
+              Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+              posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam
+              pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet
+              nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer
+              ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent
+              adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy
+              metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros
+              et nisl sagittis vestibulum.
+            </div>
+    
+            <div>
+              Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat,
+              pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in
+              justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec
+              neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis,
+              nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere
+              imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed
+              cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus
+              accumsan cursus velit.
+            </div>
+    
+            <div>
+              Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+              posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit
+              erat euismod orci, ac placerat dolor lectus quis orci. Phasellus
+              consectetuer vestibulum elit. Aenean tellus metus, bibendum sed,
+              posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet
+              augue. In turpis. Pellentesque posuere. Praesent turpis. Aenean
+              posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu
+              sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales
+              nec, volutpat a, suscipit non, turpis.
+            </div>
+    
+            <div>
+              Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum,
+              sem libero volutpat nibh, nec pellentesque velit pede quis nunc.
+              Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+              posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero.
+              Phasellus dolor. Maecenas vestibulum mollis diam. Pellentesque ut
+              neque. Pellentesque habitant morbi tristique senectus et netus et
+              malesuada fames ac turpis egestas. In dui magna, posuere eget,
+              vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada
+              pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta
+              a, auctor quis, euismod ut, mi. Aenean viverra rhoncus pede.
+              Pellentesque habitant morbi tristique senectus et netus et malesuada
+              fames ac turpis egestas. Ut non enim eleifend felis pretium feugiat.
+              Vivamus quis mi. Phasellus a est. Phasellus magna. In hac habitasse
+              platea dictumst. Curabitur at lacus ac velit ornare lobortis.
+              Curabitur a felis in nunc fringilla tristique.
+            </div>
+          </div>
+          <div class="col after">
+            <h2>After</h2>
 
-        <div>
-          Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat,
-          pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in
-          justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec
-          neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis,
-          nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere
-          imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed
-          cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus
-          accumsan cursus velit.
+            <div class="test">
+              Logistics solutions lorem test <span>test</span> ipsum dolor test sit amet, consectetuer adipiscing elit.
+              Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
+              penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+              Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
+              Nulla consequat massa quis enim. <a href="http://www.google.com">logistics solutions</a> Donec pede justo, fringilla vel,
+              aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,
+              imperdiet a, venenatis vitae, justo. Spoon Nullam dictum felis eu pede
+              mollis pretium. Integer tincidunt. Cras dapibus. Vivamus
+              elementum semper nisi. test1.  Digital solutions. test-fr
+            </div>
+            
+            <div class="rich-text">
+              Lorem test ipsum dolor warehouse LCL test sit amet, consectetuer adipiscing elit.
+              Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
+              penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+              Donec quam felis, ultricies nec, logistics solutions pellentesque eu, pretium quis, sem.
+              Nulla consequat massa quis enim. <a href="http://www.google.com">A test link</a> Donec pede justo, fringilla vel,
+              aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,
+              imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
+              mollis pretium. Integer tincidunt. Cras dapibus. Vivamus
+              elementum semper nisi. test1
+            </div>
+    
+            <div>
+              Test Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu,
+              consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in,
+              viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus
+              varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam logistics solutions1 ultricies nisi
+              vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam
+              rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam
+              semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc,
+              blandit vel, luctus pulvinar, hendrerit id, lorem. test.
+            </div>
+    
+            <div>
+              Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut
+              libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget
+              eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.
+              Donec sodales sagittis magna. Sed consequat, leo eget bibendum
+              sodales, augue velit cursus nunc, logistics solutions quis gravida magna mi a libero.
+              Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque
+              ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras
+              ultricies mi eu turpis hendrerit fringilla.
+            </div>
+    
+            <div>
+              Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+              posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam
+              pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet
+              nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer
+              ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent
+              adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy
+              metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros
+              et nisl sagittis vestibulum.
+            </div>
+    
+            <div>
+              Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat,
+              pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in
+              justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec
+              neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis,
+              nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere
+              imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed
+              cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus
+              accumsan cursus velit.
+            </div>
+    
+            <div>
+              Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+              posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit
+              erat euismod orci, ac placerat dolor lectus quis orci. Phasellus
+              consectetuer vestibulum elit. Aenean tellus metus, bibendum sed,
+              posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet
+              augue. In turpis. Pellentesque posuere. Praesent turpis. Aenean
+              posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu
+              sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales
+              nec, volutpat a, suscipit non, turpis.
+            </div>
+    
+            <div>
+              Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum,
+              sem libero volutpat nibh, nec pellentesque velit pede quis nunc.
+              Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+              posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero.
+              Phasellus dolor. Maecenas vestibulum mollis diam. Pellentesque ut
+              neque. Pellentesque habitant morbi tristique senectus et netus et
+              malesuada fames ac turpis egestas. In dui magna, posuere eget,
+              vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada
+              pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta
+              a, auctor quis, euismod ut, mi. Aenean viverra rhoncus pede.
+              Pellentesque habitant morbi tristique senectus et netus et malesuada
+              fames ac turpis egestas. Ut non enim eleifend felis pretium feugiat.
+              Vivamus quis mi. Phasellus a est. Phasellus magna. In hac habitasse
+              platea dictumst. Curabitur at lacus ac velit ornare lobortis.
+              Curabitur a felis in nunc fringilla tristique.
+            </div>
+    
+            <div>
+              Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu,
+              consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in,
+              viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus
+              varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi
+              vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam
+              rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam
+              semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc,
+              blandit vel, luctus pulvinar, hendrerit id, lorem.
+            </div>
+    
+            <div>
+              Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut
+              libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget
+              eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.
+              Donec sodales sagittis magna. Sed consequat, leo eget bibendum
+              sodales, augue velit cursus nunc, quis gravida magna mi a libero.
+              Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque
+              ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras
+              ultricies mi eu turpis hendrerit fringilla.
+            </div>
+    
+            <div>
+              Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+              posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam
+              pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet
+              nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer
+              ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent
+              adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy
+              metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros
+              et nisl sagittis vestibulum.
+            </div>
+    
+            <div>
+              Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat,
+              pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in
+              justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec
+              neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis,
+              nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere
+              imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed
+              cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus
+              accumsan cursus velit.
+            </div>
+    
+            <div>
+              Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+              posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit
+              erat euismod orci, ac placerat dolor lectus quis orci. Phasellus
+              consectetuer vestibulum elit. Aenean tellus metus, bibendum sed,
+              posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet
+              augue. In turpis. Pellentesque posuere. Praesent turpis. Aenean
+              posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu
+              sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales
+              nec, volutpat a, suscipit non, turpis.
+            </div>
+    
+            <div>
+              Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum,
+              sem libero volutpat nibh, nec pellentesque velit pede quis nunc.
+              Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+              posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero.
+              Phasellus dolor. Maecenas vestibulum mollis diam. Pellentesque ut
+              neque. Pellentesque habitant morbi tristique senectus et netus et
+              malesuada fames ac turpis egestas. In dui magna, posuere eget,
+              vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada
+              pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta
+              a, auctor quis, euismod ut, mi. Aenean viverra rhoncus pede.
+              Pellentesque habitant morbi tristique senectus et netus et malesuada
+              fames ac turpis egestas. Ut non enim eleifend felis pretium feugiat.
+              Vivamus quis mi. Phasellus a est. Phasellus magna. In hac habitasse
+              platea dictumst. Curabitur at lacus ac velit ornare lobortis.
+              Curabitur a felis in nunc fringilla tristique.
+            </div>
+          </div>
         </div>
 
-        <div>
-          Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
-          posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit
-          erat euismod orci, ac placerat dolor lectus quis orci. Phasellus
-          consectetuer vestibulum elit. Aenean tellus metus, bibendum sed,
-          posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet
-          augue. In turpis. Pellentesque posuere. Praesent turpis. Aenean
-          posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu
-          sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales
-          nec, volutpat a, suscipit non, turpis.
-        </div>
-
-        <div>
-          Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum,
-          sem libero volutpat nibh, nec pellentesque velit pede quis nunc.
-          Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
-          posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero.
-          Phasellus dolor. Maecenas vestibulum mollis diam. Pellentesque ut
-          neque. Pellentesque habitant morbi tristique senectus et netus et
-          malesuada fames ac turpis egestas. In dui magna, posuere eget,
-          vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada
-          pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta
-          a, auctor quis, euismod ut, mi. Aenean viverra rhoncus pede.
-          Pellentesque habitant morbi tristique senectus et netus et malesuada
-          fames ac turpis egestas. Ut non enim eleifend felis pretium feugiat.
-          Vivamus quis mi. Phasellus a est. Phasellus magna. In hac habitasse
-          platea dictumst. Curabitur at lacus ac velit ornare lobortis.
-          Curabitur a felis in nunc fringilla tristique.
-        </div>
+        
       </div>
     </div>
 
@@ -212,23 +395,27 @@ <h2>Automating keyword links</h2>
       }
       
       h2 {
-        font-weight: normal;
+        font-weight: 600;
         font-size: 20px;
-        margin-bottom: 50px;
+        margin-bottom: 20px;
       }
 
       #main {
-        max-width: 1000px;
+        max-width: 1200px;
         margin: 100px auto;
       }
 
-      div + div {
-        margin-top: 20px
+      .row {
+        display: flex;
+        gap: 32px;
       }
 
-      .test {
-        border-left: 2px solid #ccc;
-        padding: 20px 20px 20px 25px;
+      .col {
+        flex: 1;
+
+        div + div {
+          margin-top: 20px
+        }
       }
     </style>
   </body>
diff --git a/src/main.ts b/src/main.ts
index f1ed835..15bac52 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -12,6 +12,7 @@ const options: Option[] = [
       {
         keywords: "test,logistics solutions",
         href: "/my-logistical-solutions-link",
+        selector: ".after",
         target: "_blank",
         classes: "test-class",
         debug: true,
@@ -25,13 +26,13 @@ const options: Option[] = [
       {
         keywords: "warehouse",
         href: "/my-warehousing-link",
-        selector: ".rich-text",
+        selector: ".after .rich-text",
         debug: true
       },
       {
         keywords: "Inland transportation",
         href: "/my-inland-services-link",
-        selector: ".rich-text",
+        selector: ".after .rich-text",
         debug: true
       },
     ],