Swiper JS cutting off box-shadow

I have created a carousel using Swiper JS, however my box-shadow seems to be cut off due to the overflow: hidden; property which applied on the .swiper class (I'm assuming the properties are applied through the Swiper Object Initialization).

How can I fix this?

const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'horizontal',
  loop: false,

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // Responsive breakpoints
  breakpoints: {
    600: {
      slidesPerView: 3,
      spaceBetween: 15
    }
  }
});

.product-block {
  background: #ffffff;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;
}

.product-img img {
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3.5;
}

.product-description {
  padding: 7px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;
}

.product-description h2,
h3,
h4 {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

<div class="swiper">
  <div class="home-wrapper-categories swiper-wrapper">
    <article class="product-block swiper-slide">
      <header class="product-img">
        <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="">
      </header>
      <footer class="product-description">
        <h2>Fudge cake</h2>
      </footer>
    </article>
    <article class="product-block swiper-slide">
      <header class="product-img">
        <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="">
      </header>
      <footer class="product-description">
        <h2>Fudge cake</h2>
      </footer>
    </article>
    <article class="product-block swiper-slide drop-shadow">
      <header class="product-img">
        <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="">
      </header>
      <footer class="product-description">
        <h2>Fudge cake</h2>
      </footer>
    </article>
  </div>

  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

</div>

Solution

I figured it out. I added a some padding-bottom to my .swiper class and the box-shadow became more visible. This also works for the left, right and top padding since the overflow: hidden is also applied on those areas too.

const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'horizontal',
  loop: false,

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // Responsive breakpoints
  breakpoints: {
    600: {
      slidesPerView: 3,
      spaceBetween: 15
    }
  }
});

.swiper {
  padding: 10px 10px 10px 10px !important;
}

.product-block {
  background: #ffffff;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;
}

.product-img img {
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3.5;
}

.product-description {
  padding: 7px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;
}

.product-description h2,
h3,
h4 {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

<div class="swiper">
  <div class="home-wrapper-categories swiper-wrapper">
    <article class="product-block swiper-slide">
      <header class="product-img">
        <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="">
      </header>
      <footer class="product-description">
        <h2>Fudge cake</h2>
      </footer>
    </article>
    <article class="product-block swiper-slide">
      <header class="product-img">
        <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="">
      </header>
      <footer class="product-description">
        <h2>Fudge cake</h2>
      </footer>
    </article>
    <article class="product-block swiper-slide drop-shadow">
      <header class="product-img">
        <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="">
      </header>
      <footer class="product-description">
        <h2>Fudge cake</h2>
      </footer>
    </article>
    <article class="product-block swiper-slide drop-shadow">
      <header class="product-img">
        <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="">
      </header>
      <footer class="product-description">
        <h2>Fudge cake</h2>
      </footer>
    </article>
  </div>

  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

</div>