.content-grid__item:has(.decora-pop) {
  overflow: visible !important;
  border-color: transparent !important;

  &:hover {
    border-color: transparent !important;
  }

  .content-grid__item__image-container {
    z-index: 1;
    position: relative;
  }

  .content-grid__item__image-container > img {
    transform: scale(0.9) translate(0, 10px);
    transform-origin: 50% 100%;
    transition: transform 0.3s cubic-bezier(0.1, 0, 0, 1);
  }

  .decora-pop {
    container-name: decorations;
    container-type: size;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  [class*="deco--"] {
    --deco--scale: scale(1);
    --deco--translate: translate(0cqw, 0cqh);
    --deco--rotate: rotate(0);

    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translate(0, 0) scale(0) rotate(0deg);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0, 1);

    &[class*="--1"] {
      --deco--scale: scale(1);
      --deco--translate: translate(-29cqw, -19cqh);
      --deco--rotate: rotate(-65deg);
    }

    &[class*="--2"] {
      --deco--scale: scale(1);
      --deco--translate: translate(-35cqw, 35cqh);
      --deco--rotate: rotate(-15deg);
    }

    &[class*="--3"] {
      --deco--scale: scale(1);
      --deco--translate: translate(33cqw, -16cqh);
      --deco--rotate: rotate(17deg);
    }
  }

  [class*="deco--"] img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 64px;
    height: auto;
    margin: auto;
  }

  @media only screen and (min-width: 640px) and (pointer: fine) {
    /* hover changes */
    &:hover .content-grid__item__image-container > img {
      /* rotate original image a lil on hover */
      transform: scale(1) translate(-16px, 0px) rotate(6deg);
    }

    &:hover [class*="deco--"] {
      transform: var(--deco--translate) var(--deco--scale) var(--deco--rotate);
    }

    &:hover [class*="deco--"] img {
      animation: floatX 2s, floatY 1s, rotateZ 1s;
      animation-composition: add;
      animation-timing-function: ease-in-out;
      animation-delay: 1s, 0.5s, 0s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
    }
  }
}
@keyframes floatX {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(2px);
  }
}

@keyframes floatY {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(2px);
  }
}

@keyframes rotateZ {
  from {
    transform: rotate(-2deg);
  }
  to {
    transform: rotate(2deg);
  }
}