css – React Slider limiting card peak

I’m utilizing a react Slider so as to add a pair playing cards in a row. I’ve been looking for the issue after I render the app the Slider row is below class “slick-slider skills–slider slick-initialized” so the whole lot is regular. What’s the problem that’s stopping the containers from rendering their full peak.

Image:
Slider Concern

Right here is the CSS:

 .skills--section {
    show:flex;
    hole: 25px;
    padding-top: 70px;
    flex-direction: column;
    justify-content: middle;
    align-items: middle;
    width: 100%; /* Ensures the part makes use of full width */
  }
    
    .skills--section--heading {
    shade: var(--heading-color);
    font-size: 48px;
    font-weight: 700;
    line-height: 58px;
    margin-bottom: 40px;
    }

    .skills--slider {
      width: 90%;
      overflow: inital; /* This permits the overlapping */
    }
    
    
    .skills--section--card {
      show: flex !essential;
      flex-direction: column;
      align-items: middle;
      padding: 20px;
      border-radius: 15px;
      background: var(--bg-shade);
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      min-height: 350px;
      max-width: 80%;
      margin-bottom: 10px;
      opacity: 0.5;
      /* Add margin to stop clipping */
      
  }
    
  .slick-center .skills--section--card {
    remodel: scale(1.1); /* Enlarges the central card */
    z-index: 1; /* Ensures it is above others */
    opacity: 1;
  }
    
    .skills--section--card:hover {
    border-bottom: 4px stable var(--primary);
    }
    .slick-dots {
      backside: -25px; /* Modify the place of the dots nearer to the playing cards */
    }

    .skills--section--card:hover .skills--section--description {
    shade: var(--darkblue);
    }
    
    .skills--section--img {
    show: flex;
    padding: 15px;
    margin-top: 10px;
    justify-content: middle;
    align-items: middle;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    }
    
    .skills--section--img img {
    max-width: 80px;
    peak: auto;
    }
    
    .skills--section--card--content {
    show: flex;
    flex-direction: column;
    align-items: middle;
    hole: 15px;
    text-align: middle;
    }
    
    .skills--section--title {
    shade: var(--heading-color);
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    }
    
    .skills--section--description {
    shade: var(--black);
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    }

Right here is the react element:

import React from 'react';
import Slider from 'react-slick';
import knowledge from '../../knowledge/index.json';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

export default operate MySkills() {
    const settings = {
        dots: true,
        infinite: true,
        pace: 500,
        slidesToShow: 3,
        slidesToScroll: 1,
        centerMode: true,
        centerPadding: '0px',
        arrows: true,
        prevArrow: <button kind="button" className="slick-prev">Prev</button>,
        nextArrow: <button kind="button" className="slick-next">Subsequent</button>,
        responsive: [
            {
                breakpoint: 768,
                settings: {
                    slidesToShow: 1,
                    centerPadding: '20px',
                },
            },
        ],
    };

    return (
        <part className="skills--section" id="mySkills">
            <div className="skills--container">
                <p className="skills-section--title">My Expertise</p>
                <h2 className="skills--section--heading">My Experience</h2>
            </div>
            <Slider {...settings} className="skills--slider">
                {knowledge?.abilities?.map((merchandise, index) => (
                    <div key={index} className="skills--section--card">
                        <div className="skills--section--img">
                            <img src={merchandise.src} alt={merchandise.title} />
                        </div>
                        <div className="skills--section--card--content">
                            <h3 className="skills--section--title">{merchandise.title}</h3>
                            <p className="skills--section--description">{merchandise.description}</p>
                        </div>
                    </div>
                ))}
            </Slider>
        </part>
    );
}

I attempted so as to add arrows to the slider but it surely simply brought about the problem. I attempted to take the three courses the variable is below and set the peak in CSS nothing occurred.