inline css style doesn't show up when using a variable array to assign styles

Question

im trying to make a slider using react slick, and each slide inside the react slick slider is a card with a different background (a linear-gradient). i've been trying to give each card a different background but it's not working (nothing shows up, when i inspect element its as if i never even applied this style??)

so heres my array of linear gradients (js)

const gradients = [
    "linear-gradient(135deg, #D8D6FF 0%, #FEF0F9 100%)",
    "linear-gradient(135deg, #FEF0F9 0%, #CEE7FD 100%)",
    "linear-gradient(135deg, #CEE7FD 0%, #DCF7F5 100%)",
    "linear-gradient(135deg, #DCF7F5 0%, #EBF8DE 100%)",
    "linear-gradient(135deg, #EBF8DE 0%, #FFEBD8 100%)",
    "linear-gradient(135deg, #EBF8DE 0%, #FFEBD8 0.01%, #F7D8E7 100%)"
];

this is my react slick slider, i tried to use the index to match up with the gradients array so each card has its respective linear gradient (js)

<Slider {...settings} className={styles.slider}>
      {miniProjects.map((project, i) => (
           <div className={styles.card} style={{background: gradients[i]}}>
               {project.name}
           </div>
       ))}
</Slider>

and just for the sake of it, heres my styling for slider and card (css)

.slider {
    width: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content:space-between;
    margin-left: 175px;
}

.card {
    width: 400px !important;
    height: 400px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

i dont know if this is some kind of react slick issue, or my syntax is wrong in the javascript file which is why the linear gradients are being ignored.