/* Views/www_webpack/pages/certificates/certificates.css */
#certificates {
  display: grid;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px clamp(20px, 5vw, 10vw);
}
#certificates h2 {
  font-weight: normal;
  text-transform: uppercase;
}
#certificates .certificates__slider {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#certificates .swiper-slide {
  position: relative;
  width: 220px;
  height: 300px;
}
#certificates .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#certificates .swiper-slide button {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #ffffff3d;
  border-radius: 8px;
  opacity: 0;
  transition: all 200ms;
}
#certificates .swiper-slide button img {
  width: 50px;
  height: 50px;
  padding: 5px;
  background: #ffffffde;
  border-radius: 8px;
  box-shadow: rgb(0 0 0 / 56%) 0 22px 70px 4px;
  transform: scale(0.2);
  transition: all 150ms;
}
#certificates .swiper-slide:hover {
  box-shadow: rgb(14 30 37 / 12%) 0 2px 4px 0, rgb(14 30 37 / 32%) 0 2px 16px 0;
  transform: scale(1.02);
}
#certificates .swiper-slide:hover button {
  opacity: 1;
}
#certificates .swiper-slide:hover button img {
  transform: scale(1);
}