@property --lila {
    syntax: '<color>';
    inherits: false;
    /* initial-value: #6573f2; */
    initial-value: #fff;
}


@property --dark-blue {
    syntax: '<color>';
    inherits: false;
    /* initial-value: #080b93; */
    initial-value: #fff;
}

@property --white {
    syntax: '<color>';
    inherits: false;
    /* initial-value: #fff; */
    initial-value: #fff;
}

.grid-cont .grid .item {
    transition: all 300ms, --lila 300ms, --dark-blue 300ms;
}

.grid-cont .grid .item::after {
    background: linear-gradient(38deg, var(--lila) 0%, var(--dark-blue) 59%, var(--dark-blue) 100%);
    transition: all 300ms, --lila 300ms, --dark-blue 300ms;

}

.grid-cont .grid .item:hover:after {
    --lila: #6573f2;
    --dark-blue: #080b93;
    color: white;
}



.banner .text .button {
    transition: all 300ms, --lila 300ms, --dark-blue 300ms;
}

.banner .text .button::after {
    transition: all 300ms, --lila 300ms, --dark-blue 300ms;

    background: linear-gradient(38deg, var(--lila) 0%, var(--dark-blue) 59%, var(--dark-blue) 100%);
}

.banner .text .button:hover {
    color: white;
}

.banner .text .button:hover:after {
    --lila: #6573f2;
    --dark-blue: #080b93;
    color: white;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

}