Pls help embed CodePen to Squarespace (...It's an image effect)

Site URL: https://cobalt-horse-nm25.squarespace.com/config/

G'day guys!

This is my first time attempting to use CodePen to enhance an image effect on my site.  I thought it would be pretty straightforward with moving HTML & CSS over to the sections in my Squarespace site, but unfortunately it's not showing up as expected, meanwhile it looks fine on CodePen.  If one of you blokes could tell me where I'm going wrong, I'll be eternally grateful...cheers, Dan.  (I've detailed my process below for your critique/review)

CodePen URL reference

• https://codepen.io/ycw/pen/gdLZdN

Step 1 - Copy HTML from CodePen

• I copied the HTML from CodePen and pasted it within a codeblock in my Squarespace site (Image attached)

Step 2 - Copy CSS from CodePen

• I copied the CSS from CodePen and pasted it within the Custom CSS section of my Squarespace site

Error appearing in Custom CSS section

• The following error appears in red within the Custom CSS section: "Operation On An Invalid Type"

Images showing what I'm seeing (...and obviously doing wrong)

• Image 1 (CodePen example working fine) = 

• Image 2 (Step 1 result of copy/paste of HTML) = 

• Image 3 (Custom CSS error message appearing in Squarespace) = 

You need to compile HTMl/CSS. Add all below code to Code Block

<base target="_blank"/>
<ul>
  <li><a href="https://unsplash.com/photos/iuvLYv85r40"><img src="https://images.unsplash.com/photo-1471119017026-179f1bb0a70e?ixlib=rb-0.3.5&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;s=c022be1f4d96b88d053b6874cd1df8f5&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60"/></a></li>
  <li><a href="https://unsplash.com/photos/voeDggfOgxc"><img src="https://images.unsplash.com/photo-1487744137800-5282ebdb0ba3?ixlib=rb-0.3.5&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;s=65472c9ecf25616e0d5037e98795db37&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60"/></a></li>
  <li><a href="https://unsplash.com/photos/_M6gy9oHgII"><img src="https://images.unsplash.com/photo-1488161628813-04466f872be2?ixlib=rb-0.3.5&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;s=8f9d47f8ca4f63a5c7035c2986cfd95e&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60"/></a></li>
  <li><a href="https://unsplash.com/photos/R1Ku62Z7zqE"><img src="https://images.unsplash.com/photo-1448376561459-dbe8868fa34c?ixlib=rb-0.3.5&amp;s=c20042d58b121e90f8b8de83253de4cb&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60"/></a></li>
  <li><a href="https://unsplash.com/photos/JN3XEQdLEss"><img src="https://images.unsplash.com/photo-1490905461158-067f4895ea9d?ixlib=rb-0.3.5&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;s=ec12d476aa884c9ff23d2169cc359a09&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60"/></a></li>
  <li><a href="https://unsplash.com/photos/j4nBSqFf08U"><img src="https://images.unsplash.com/photo-1468818461933-b1d79f62434e?ixlib=rb-0.3.5&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;s=8d34ef5dba728dc836a9f60a2034c912&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60"/></a></li>
</ul>
<style>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
}

ul {
  width: 70vmin;
  height: 70vmin;
  position: relative;
}

li {
  /*
    |a|d|a|
    -------  -           
    |/   \|  | 0.5h
    |\   /|  ^          
    ------- 
    |  w  |
  
    a = 0.5h/tan60 = 0.28867513459h
    d = 0.5h/sin60 = 0.57735026919h
    w = a + d + a  = 1.15470053838h
  
    [zoom out]
  
        |a|_d_|         _____    _
        /|     \       /     \   |
  ang=60_|      \__d__/       \  | h     
       \        /     \       /  |
        \_____|/|      \_____/  _|
              a     
       |--------|
           w
  */
  --h: calc(100% / 3);
  --w: calc(1.15470053838 * var(--h));
  --a: calc(0.28867513459 * var(--h));
  --d: calc(0.57735026919 * var(--h));
  height: var(--h);
  width: var(--w);
  position: absolute;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 
  
   [clip-path coordinates]
  
    --A-F--
   B|/   \|E    coord.
    |\   /|       A(a/w, 0)
    --C-D--       B(0, 50%)
                  C(a/w, 100%)
                  D(100% - a/w, 100%)
                  E(100%, 50%)
                  F(100% - a/w, 0)
                where a/w = 0.24999999999
  */
  --aw: 24.99999999999%;
  clip-path: polygon(
    var(--aw) 0,
    0 50%,
    var(--aw) 100%,
    calc(100% - var(--aw)) 100%,
    100% 50%,
    calc(100% - var(--aw)) 0
  );
}

li:nth-of-type(1) {
  left: calc(50% - var(--a) - var(--d) * 0.5);
  top: 0;
}
li:nth-of-type(2) {
  left: calc(50% - var(--a) * 2 - var(--d) * 1.5);
  top: calc(var(--h) * 0.5);
}
li:nth-of-type(3) {
  left: calc(50% - var(--a) * 2 - var(--d) * 1.5);
  top: calc(var(--h) * 1.5);
}
li:nth-of-type(4) {
  left: calc(50% - var(--a) - var(--d) * 0.5);
  top: calc(var(--h) * 2);
}
li:nth-of-type(5) {
  left: calc(50% + var(--d) * 0.5);
  top: calc(var(--h) * 0.5);
}
li:nth-of-type(6) {
  left: calc(50% + var(--d) * 0.5);
  top: calc(var(--h) * 1.5);
}

/* 
style 
*/

ul {
  filter: drop-shadow(0 0 10px hsla(0, 0%, 0%, 0.3));
}

li:hover {
  filter: drop-shadow(0 0 10px powderblue);
  z-index: 10;
}

/*
anim
*/

ul {
  animation: r 4s forwards;
}
@keyframes r {
  from {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(0);
  }
}

li {
  animation: ir 4s forwards;
}
@keyframes ir {
  from {
    transform: rotate(-360deg);
  }
  to {
    transform: rotate(0);
  }
}

</style>