@property --direc {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.brand {
    --direc: 0deg;
    width: 120px;
    height: 200px;
    color: rgb(255, 255, 255);
    font-size: 2rem;
    background-image: linear-gradient(var(--direc), #ffffff, #f7f2b3, 43%, #f1ecbc);
    /* background-image: linear-gradient(0deg, #5ddcff, #3c67e3, 43%, #4e00c2); */
    animation: rotate 3s linear infinite;
    text-align: center;
    display: inline-block;
}

.brand img {
    width: 100px;
    height: 100px;
    /* border: solid 2px orange; */
    /* margin: 0 auto; */
    align: center;
}

.brand p {
    color: white;
}

@keyframes rotate {
    to {
        --direc: 360deg;
    }
}