.voucher-item {
  overflow: hidden;
  width: 100%;
  display: block;
  text-decoration: none;
}
.voucher-item .voucher-image {
  height: 123px;
  width: 123px;
  flex: 0 0 123px;
}
.voucher-item.varian-2 .buble {
  background-color: var(--white-gray) !important;
}
.voucher-item.disabled {
  filter: brightness(1) grayscale(1);
}
.voucher-item .svg-bg {
  opacity: 0.9;
  right: -10%;
}
.voucher-item .buble {
  position: absolute;
  top: 0;
  height: 15px;
  width: 15px;
  background-color: var(--white);
  border-radius: 100%;
  top: -7.5px;
}
.voucher-item .buble::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1px solid var(--gray);
  border-radius: 100%;
}
.voucher-item .buble.left {
  left: -16.5px;
}
.voucher-item .buble.right {
  right: -16.5px;
}
.voucher-item .buble.right::after {
  left: unset;
  right: 0;
}
.voucher-item .buble.right::before {
  left: unset;
  right: 0;
}

.voucher-item.varian-3 {
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.voucher-item.varian-3.sold-out .voucher-image img {
  filter: grayscale(1) !important;
}
.voucher-item.varian-3 .card::after {
  height: calc(100% - 1px);
  width: 10px;
  content: "";
  background-color: #fff;
  right: 0;
  display: block;
  top: 0;
  position: absolute;
}
.voucher-item.varian-3 .voucher-top {
  width: calc(100% + 20px);
  height: 15px;
  position: relative;
  overflow: hidden;
  display: block;
  box-sizing: unset !important;
}
.voucher-item.varian-3 .voucher-top::before {
  content: "";
  display: block;
  /* Scale */
  width: 20px;
  height: 0;
  box-sizing: unset !important;
  padding-bottom: 20px;
  /* Position */
  position: absolute;
  top: 0; /* Move hole to the bottom */
  left: 10px;
  z-index: 2;
  transform: translate(-50%, -50%); /* Adjust the transformation */
  /* Border */
  border: solid 40000px white;
  border-radius: 50%;
}
.voucher-item.varian-3 .voucher-bottom {
  width: calc(100% + 20px);
  height: 20px;
  position: relative;
  overflow: hidden;
  top: -1px;
  left: -5px;
  display: block;
  box-sizing: unset !important;
}
.voucher-item.varian-3 .voucher-bottom::before {
  content: "";
  display: block;
  /* Scale */
  width: 20px;
  height: 0;
  box-sizing: unset !important;
  padding-bottom: 20px;
  /* Position */
  position: absolute;
  bottom: 0; /* Move hole to the bottom */
  left: 15px;
  z-index: 2;
  transform: translate(-50%, 50%); /* Adjust the transformation */
  /* Border */
  border: solid 40000px white;
  border-radius: 50%;
}