.magic-wrapper {
    position: relative;
    border-radius: 20px;
    padding: 2px;
    z-index: 0;
}

.magic-wrapper::before,
.magic-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    background: conic-gradient(from var(--deg) at center,
            #00bcd4,
            #3f51b5,
            #9c27b0,
            #00bcd4);
    border-radius: inherit;
    z-index: -2;
    animation: autoRotate 2s linear infinite;
}

.magic-wrapper::after {
    filter: blur(10px);
}

.magic-box {
    background: whitesmoke;
    border-radius: 20px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20%;
    z-index: 1;
}

/* other styles remain the same */
.magic-box img {
    border-radius: inherit;
}

@property --deg {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0deg;
}

@keyframes autoRotate {
    to {
        --deg: 360deg;
    }
}

.with-padding {
    padding: 20px;
}