.certificate-content {
  column-gap: var(--grid-gap-medium);
}

/* add padding to prevent the shadow of the image from being hidden */
.certificate-section .swiper {
  padding: 10px 0;
}

.certificate-section .swiper-button-prev,
.certificate-section .swiper-button-next {
  position: static;
  flex-shrink: 0;
}

.certificate-section .swiper-button-prev.hover,
.certificate-section .swiper-button-next.hover {
  opacity: 0;
}

.certificate-section .section-container:hover .swiper-button-prev.hover,
.certificate-section .section-container:hover .swiper-button-next.hover {
  opacity: 1;
}
.certificate-section .section-container:hover .swiper-button-prev.swiper-button-disabled,
.certificate-section .section-container:hover .swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
}

.certificate-section .swiper-slide {
  width: calc(100% * 4 / (3 * var(--col-num) + 1 / var(--col-num)));
  box-shadow: 0 0 10px rgba(4, 0, 0, 0.24);
  cursor: zoom-in;
}

.certificate-section .swiper-slide img {
  width: 100%;
}

@media screen and (max-width: 992px) {
  .certificate-section .swiper-button-prev,
  .certificate-section .swiper-button-next {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .certificate-section .swiper-slide {
    width: calc(100% / 1.5);
    box-shadow: 0 0 6px rgba(4, 0, 0, 0.24)
  }
}