:root {
  --bg: rgba(17,17,19,1);
   --clr: #fff;
}
 
.erm{ max-width:120px;}

.container ul {
   position: relative;
   display: flex;
   gap: 50px;
}
.container ul li {
   position: relative;
   list-style: none;
   width: 140px;
   height: 140px;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   transition: 0.5s; margin:0 auto;
}
.container ul li img{    max-width: 120px;}
.container ul li::before {
   content: '';
   position: absolute;
   inset: 30px;
   box-shadow: 0 0 0 10px var(--clr),
               0 0 0 20px var(--bg),
               0 0 0 22px var(--clr);
   transition: 0.5s;
}
.container ul li:hover::before {
   inset: 15px;
}
.container ul li::after {
   content: '';
   position: absolute;
   inset: 0;
   background: var(--bg);
   transform: rotate(45deg);
   transition: 0.5s;
}
.container ul li:hover::after {
   inset: 0px;
   transform: rotate(0deg);
}
.container ul li a {
   position: relative;
   text-decoration: none;
   z-index: 10;
   display: flex;
   justify-content: center;
   align-items: center;
}
.container ul li a i {
   font-size: 2em;
   transition: 0.5s;
   color: var(--clr);
   opacity: 1;
}
.container ul li:hover a i {
   color: var(--clr);
   transform: translateY(-40%);
}
.container ul li a span {
   position: absolute;
   font-family: sans-serif;
   color: var(--clr);
   opacity: 0;
   transition: 0.5s;
   transform: scale(0) translateY(200%);
}
.container ul li:hover a span {
   opacity: 1; bottom:0;
   transform: scale(1) translateY(100%);
}
.container ul li:hover a i,
.container ul li a span {
  /* filter: drop-shadow(0 0 20px var(--clr)) drop-shadow(0 0 40px var(--clr)) drop-shadow(0 0 60px var(--clr));*/
}