.BombBtn{
    .container-button {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: "bt-1 bt-2 bt-3"
          "bt-4 bt-5 bt-6";
        position: relative;
        perspective: 800;
        padding: 0;
        width: 60px;
        height: 25px;
        transition: all 0.3s ease-in-out;
      }
      
      .container-button:active {
        transform: scale(0.95);
      }
      
      .hover {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 200;
      }
      
      .bt-1 {
        grid-area: bt-1;
      }
      
      .bt-2 {
        grid-area: bt-2;
      }
      
      .bt-3 {
        grid-area: bt-3;
      }
      
      .bt-4 {
        grid-area: bt-4;
      }
      
      .bt-5 {
        grid-area: bt-5;
      }
      
      .bt-6 {
        grid-area: bt-6;
      }
      
      .bt-1:hover ~ button {
        transform: rotateX(15deg) rotateY(-15deg) rotateZ(0deg);
        box-shadow: -2px -2px #18181888;
      }
      
      .bt-1:hover ~ button::after {
        animation: shake 0.5s ease-in-out 0.3s;
        text-shadow: -2px -2px #18181888;
      }
      
      .bt-3:hover ~ button {
        transform: rotateX(15deg) rotateY(15deg) rotateZ(0deg);
        box-shadow: 2px -2px #18181888;
      }
      
      .bt-3:hover ~ button::after {
        animation: shake 0.5s ease-in-out 0.3s;
        text-shadow: 2px -2px #18181888;
      }
      
      .bt-4:hover ~ button {
        transform: rotateX(-15deg) rotateY(-15deg) rotateZ(0deg);
        box-shadow: -2px 2px #18181888;
      }
      
      .bt-4:hover ~ button::after {
        animation: shake 0.5s ease-in-out 0.3s;
        text-shadow: -2px 2px #18181888;
      }
      
      .bt-6:hover ~ button {
        transform: rotateX(-15deg) rotateY(15deg) rotateZ(0deg);
        box-shadow: 2px 2px #18181888;
      }
      
      .bt-6:hover ~ button::after {
        animation: shake 0.5s ease-in-out 0.3s;
        text-shadow: 2px 2px #18181888;
      }
      
      .hover:hover ~ button::before {
        background: transparent;
      }
      
      .hover:hover ~ button::after {
        content: attr(data-text);
        top: -200%;
        transform: translate(-50%, 0);
        font-size: 20px;
        color: var(--secondary);
      }
      
      button {
        position: absolute;
        padding: 0;
        width: 60px;
        height: 25px;
        background: var(--secondary);
        font-size: 10px;
        font-weight: 900;
        border: 3px solid var(--secondary);
        border-radius: 12px;
        transition: all 0.3s ease-in-out;
      }
      
      button::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60px;
        height: 25px;
        background-color: var(--secondary);
        border-radius: 12px;
        transition: all 0.3s ease-in-out;
        z-index: -1;
      }
      
      button::after {
        content: attr(data-text);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60px;
        height: 25px;
        background-color: transparent;
        font-size: 10px;
        font-weight: 900;
        line-height: 25px;
        color: var(--primary);
        border: none;
        border-radius: 12px;
        transition: all 0.3s ease-in-out;
        z-index: 2;
      }
      
      @keyframes shake {
        0% {
          left: 45%;
        }
      
        25% {
          left: 54%;
        }
      
        50% {
          left: 48%;
        }
      
        75% {
          left: 52%;
        }
      
        100% {
          left: 50%;
        }
      }
}