.grid {
    background: url('/games/blasteroids-2/background-01.jpg');
    background-size: cover;
    height: 500px;
    width: 100%;
    position: relative;
    user-select: none;
    overflow: clip;
}

.explode-large {
    opacity: 1;
    animation-name: explode-large;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    transform-origin: center center;
}

.explode-small {
    opacity: 1;
    animation-name: explode-small;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    transform-origin: center center;
}

.explode-loop {
    opacity: 1;
    animation-name: explode-small;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    transform-origin: center center;
    animation-iteration-count: infinite;
}

@keyframes explode-large {
    0% {
        opacity: 1;
        transform: scale(0.0);
    }
    30% {
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(4.2);
    }
}

@keyframes explode-small {
    0% {
        opacity: 1;
        transform: scale(0.0);
    }
    30% {
        transform: scale(0.85);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }
}