.spinner-eye {
  grid-column: 2 / span 2;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffffff;
  mask: radial-gradient(circle closest-side at 50% 40%, #0000 100%, #000);
  -webkit-mask: radial-gradient(circle closest-side at 50% 40%,#0000 100%, #000);
  transform-origin: 50% 40%;
  animation: s5 1.3s infinite linear;
}

@keyframes s5 {
  100% {transform: rotate(1turn)}
}

/* From Uiverse.io by Nawsome */
.banter-loader {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 10%;
    place-self: center;
    grid-column: 2 / span 2;
  }
  
  .banter-loader__box {
    position: relative;
    width: 100%;
    height: 100%;
  }
  
  .banter-loader__box:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
  }
  
  .banter-loader__box:nth-child(3n) {
    margin-right: 0;
    margin-bottom: 25%;
  }
  
  .banter-loader__box:nth-child(1):before,
  .banter-loader__box:nth-child(4):before {
    margin-left: 137.5%;
  }
  
  .banter-loader__box:nth-child(3):before {
    margin-top: 275%;
  }
  
  .banter-loader__box:last-child {
    margin-bottom: 0;
  }
  
  @keyframes moveBox-1 {
    9.0909090909% { transform: translate(-137.5%, 0); }
    18.1818181818% { transform: translate(0, 0); }
    27.2727272727% { transform: translate(0, 0); }
    36.3636363636% { transform: translate(137.5%, 0); }
    45.4545454545% { transform: translate(137.5%, 137.5%); }
    54.5454545455% { transform: translate(137.5%, 137.5%); }
    63.6363636364% { transform: translate(137.5%, 137.5%); }
    72.7272727273% { transform: translate(137.5%, 0); }
    81.8181818182% { transform: translate(0, 0); }
    90.9090909091% { transform: translate(-137.5%, 0); }
    100% { transform: translate(0, 0); }
  }
  
  @keyframes moveBox-2 {
    9.0909090909% { transform: translate(0, 0); }
    18.1818181818% { transform: translate(137.5%, 0); }
    27.2727272727% { transform: translate(0, 0); }
    36.3636363636% { transform: translate(137.5%, 0); }
    45.4545454545% { transform: translate(137.5%, 137.5%); }
    54.5454545455% { transform: translate(137.5%, 137.5%); }
    63.6363636364% { transform: translate(137.5%, 137.5%); }
    72.7272727273% { transform: translate(137.5%, 137.5%); }
    81.8181818182% { transform: translate(0, 137.5%); }
    90.9090909091% { transform: translate(0, 137.5%); }
    100% { transform: translate(0, 0); }
  }
  
  @keyframes moveBox-3 {
    9.0909090909% { transform: translate(-137.5%, 0); }
    18.1818181818% { transform: translate(-137.5%, 0); }
    27.2727272727% { transform: translate(0, 0); }
    36.3636363636% { transform: translate(-137.5%, 0); }
    45.4545454545% { transform: translate(-137.5%, 0); }
    54.5454545455% { transform: translate(-137.5%, 0); }
    63.6363636364% { transform: translate(-137.5%, 0); }
    72.7272727273% { transform: translate(-137.5%, 0); }
    81.8181818182% { transform: translate(-137.5%, -137.5%); }
    90.9090909091% { transform: translate(0, -137.5%); }
    100% { transform: translate(0, 0); }
  }
  
  @keyframes moveBox-4 {
    9.0909090909% { transform: translate(-137.5%, 0); }
    18.1818181818% { transform: translate(-137.5%, 0); }
    27.2727272727% { transform: translate(-137.5%, -137.5%); }
    36.3636363636% { transform: translate(0, -137.5%); }
    45.4545454545% { transform: translate(0, 0); }
    54.5454545455% { transform: translate(0, -137.5%); }
    63.6363636364% { transform: translate(0, -137.5%); }
    72.7272727273% { transform: translate(0, -137.5%); }
    81.8181818182% { transform: translate(-137.5%, -137.5%); }
    90.9090909091% { transform: translate(-137.5%, 0); }
    100% { transform: translate(0, 0); }
  }
  
  @keyframes moveBox-5 {
    9.0909090909% { transform: translate(0, 0); }
    18.1818181818% { transform: translate(0, 0); }
    27.2727272727% { transform: translate(0, 0); }
    36.3636363636% { transform: translate(137.5%, 0); }
    45.4545454545% { transform: translate(137.5%, 0); }
    54.5454545455% { transform: translate(137.5%, 0); }
    63.6363636364% { transform: translate(137.5%, 0); }
    72.7272727273% { transform: translate(137.5%, 0); }
    81.8181818182% { transform: translate(137.5%, -137.5%); }
    90.9090909091% { transform: translate(0, -137.5%); }
    100% { transform: translate(0, 0); }
  }
  
  @keyframes moveBox-6 {
    9.0909090909% { transform: translate(0, 0); }
    18.1818181818% { transform: translate(-137.5%, 0); }
    27.2727272727% { transform: translate(-137.5%, 0); }
    36.3636363636% { transform: translate(0, 0); }
    45.4545454545% { transform: translate(0, 0); }
    54.5454545455% { transform: translate(0, 0); }
    63.6363636364% { transform: translate(0, 0); }
    72.7272727273% { transform: translate(0, 137.5%); }
    81.8181818182% { transform: translate(-137.5%, 137.5%); }
    90.9090909091% { transform: translate(-137.5%, 0); }
    100% { transform: translate(0, 0); }
  }
  
  @keyframes moveBox-7 {
    9.0909090909% { transform: translate(137.5%, 0); }
    18.1818181818% { transform: translate(137.5%, 0); }
    27.2727272727% { transform: translate(137.5%, 0); }
    36.3636363636% { transform: translate(0, 0); }
    45.4545454545% { transform: translate(0, -137.5%); }
    54.5454545455% { transform: translate(137.5%, -137.5%); }
    63.6363636364% { transform: translate(0, -137.5%); }
    72.7272727273% { transform: translate(0, -137.5%); }
    81.8181818182% { transform: translate(0, 0); }
    90.9090909091% { transform: translate(137.5%, 0); }
    100% { transform: translate(0, 0); }
  }
  
  @keyframes moveBox-8 {
    9.0909090909% { transform: translate(0, 0); }
    18.1818181818% { transform: translate(-137.5%, 0); }
    27.2727272727% { transform: translate(-137.5%, -137.5%); }
    36.3636363636% { transform: translate(0, -137.5%); }
    45.4545454545% { transform: translate(0, -137.5%); }
    54.5454545455% { transform: translate(0, -137.5%); }
    63.6363636364% { transform: translate(0, -137.5%); }
    72.7272727273% { transform: translate(0, -137.5%); }
    81.8181818182% { transform: translate(137.5%, -137.5%); }
    90.9090909091% { transform: translate(137.5%, 0); }
    100% { transform: translate(0, 0); }
  }
  
  @keyframes moveBox-9 {
    9.0909090909% { transform: translate(-137.5%, 0); }
    18.1818181818% { transform: translate(-137.5%, 0); }
    27.2727272727% { transform: translate(0, 0); }
    36.3636363636% { transform: translate(-137.5%, 0); }
    45.4545454545% { transform: translate(0, 0); }
    54.5454545455% { transform: translate(0, 0); }
    63.6363636364% { transform: translate(-137.5%, 0); }
    72.7272727273% { transform: translate(-137.5%, 0); }
    81.8181818182% { transform: translate(-275%, 0); }
    90.9090909091% { transform: translate(-137.5%, 0); }
    100% { transform: translate(0, 0); }
  }
  
  /* Animation assignments */
  .banter-loader__box:nth-child(1) { animation: moveBox-1 4s infinite; }
   .banter-loader__box:nth-child(2) { animation: moveBox-2 4s infinite; }
  .banter-loader__box:nth-child(3) { animation: moveBox-3 4s infinite; }
  .banter-loader__box:nth-child(4) { animation: moveBox-4 4s infinite; }
  .banter-loader__box:nth-child(5) { animation: moveBox-5 4s infinite; }
  .banter-loader__box:nth-child(6) { animation: moveBox-6 4s infinite; }
  .banter-loader__box:nth-child(7) { animation: moveBox-7 4s infinite; }
  .banter-loader__box:nth-child(8) { animation: moveBox-8 4s infinite; }
  .banter-loader__box:nth-child(9) { animation: moveBox-9 4s infinite; } 
  
  
  @media (min-width: 728px) {
    .banter-loader {
      grid-column: 3 / span 4;
    }

    .spinner-eye {
      grid-column:3 / span 4;
      width: 70%;
    }
  }
  
  @media (min-width: 1024px) {
    .banter-loader {
      grid-column: 6 / span 2;
    }

    .spinner-eye {
      grid-column: 6 / span 2;
      width: 100%;
    }
  }