.perspective {
  perspective: 1000px;
}

.transform-style-preserve-3d {
  transform-style: preserve-3d;
}

.backface-hidden {
  backface-visibility: hidden;
}

#front2::after,
#front3::after,
#front4::after,
#front8::after,
#front9::after,
#front9::after {
    content: "";
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-top: 6px solid transparent;
    border-right: 6px solid white;
    border-bottom: 6px solid white;
}

#front5::after,
#front7::after {
    content: "";
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-top: 6px solid transparent;
    border-right: 6px solid oklch(37.5% 0.0793 238.45);
    border-bottom: 6px solid oklch(37.5% 0.0793 238.45);
}

#overlay5::after,
#overlay7::after {
    content: "";
    position: absolute;
    bottom: 8px;
    left: 8px;
    width: 0;
    height: 0;
    border-right: 6px solid transparent;
    border-top: 6px solid transparent;
    border-left: 6px solid white;
    border-bottom: 6px solid white;
}

#overlay2::after,
#overlay8::after {
    content: "";
    position: absolute;
    bottom: 8px;
    left: 8px;
    width: 0;
    height: 0;
    border-right: 6px solid transparent;
    border-top: 6px solid transparent;
    border-left: 6px solid oklch(59.49% 0.1105 223.8);
    border-bottom: 6px solid oklch(59.49% 0.1105 223.8);
}

#overlay3::after,
#overlay4::after,
#overlay9::after {
    content: "";
    position: absolute;
    bottom: 8px;
    left: 8px;
    width: 0;
    height: 0;
    border-right: 6px solid transparent;
    border-top: 6px solid transparent;
    border-left: 6px solid oklch(56.4% 0.0655 235.37);
    border-bottom: 6px solid oklch(56.4% 0.0655 235.37);
}

@media (min-width: 768px) {
  #front2::after {
    border-right-color: white; /* Change this to your desired color */
    border-bottom-color: white;
  }
}