.swipe-widget {
  display: grid;
  gap: 60px;
  justify-content: center;
  overflow: hidden;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  justify-items: center;
}
@media (max-width: 1024px) {
  .swipe-widget {
    gap: 24px;
  }
}

.swipe-widget__cards-column,
.swipe-widget__data-column {
  width: 100%;
}

.swipe-widget__cards-column {
  max-width: 346px;
}

.swipe-widget__data-column {
  max-width: 548px;
}

.swipe-widget__cards {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 346/528;
  margin: 0 auto;
  user-select: none;
}

.swipe-widget__card {
  position: absolute;
  top: -5px;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: scale(0.5);
  transform-origin: 50% 100%;
  display: flex;
  flex-direction: column;
}

.swipe-widget__card.is-active {
  top: 0;
  z-index: 3;
  transform: scale(1);
  transition: 0.5s all;
}

.swipe-widget__card.is-next {
  top: 7.5px;
  z-index: 2;
  transform: scale(0.9);
  transition: 0.5s all;
}

.swipe-widget__card.is-next-2 {
  top: 15px;
  z-index: 1;
  transform: scale(0.8);
}

.swipe-widget__card.is-below {
  display: none;
  z-index: 1;
}

.swipe-widget__card.is-reset {
  transform: translateX(0) !important;
  transition: transform 0.3s;
}

.swipe-widget__card.is-reset .swipe-widget__choice {
  opacity: 0 !important;
  transition: opacity 0.3s;
}

.swipe-widget__card.is-inactive {
  transition: transform 0.3s;
}

.swipe-widget__card.is-to-left {
  transform: translateX(-30rem) rotate(-30deg) !important;
}

.swipe-widget__card.is-to-right {
  transform: translateX(30rem) rotate(30deg) !important;
}

.swipe-widget__card-top {
  flex: 1;
  border-radius: 13px;
  background-color: var(--e-global-color-b9295c8);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.swipe-widget__card-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: -15px;
  padding: 12px 18px;
  border: 0.5px solid rgb(0 0 0 / 8%);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 8px 0 rgb(0 0 0 / 12%);
  text-align: center;
}

.swipe-widget__card-name {
  margin: 0 !important;
  color: var(--e-global-color-text);
  font-family: "Jut-So Sans", sans-serif;
  font-size: clamp(14px, calc(0.875rem + ((1vw - 4.8px) * 0.9091)), 20px);
  font-weight: 700;
  letter-spacing: -0.08px;
  line-height: 100%;
}

.swipe-widget__card-department {
  margin: 0 !important;
  color: var(--e-global-color-text);
  font-family: "Jut-So Sans", sans-serif;
  font-size: clamp(12px, calc(0.75rem + ((1vw - 4.8px) * 0.303)), 14px);
  line-height: 100%;
}

.swipe-widget__choice {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 370px;
  max-height: 515px;
  margin: auto;
  border-radius: 10px;
  opacity: 0;
}

.swipe-widget__choice::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: brightness(100);
}

.swipe-widget__choice--reject::before {
  width: 4rem;
  height: 4rem;
}

.swipe-widget__choice--like::before {
  width: calc(4rem * 22 / 19);
  height: 4rem;
}

.swipe-widget__choice--reject {
  background: #7c68fa;
}

.swipe-widget__choice--like {
  background: #ff695e;
}

.swipe-widget__choice--reject::before {
  background-image: url("assets/icon-reject.svg");
}

.swipe-widget__choice--like::before {
  background-image: url("assets/icon-heart.svg");
}

.swipe-widget__drag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  cursor: grab;
}

.swipe-widget__buttons {
  display: flex;
  justify-content: center;
  align-content: center;
  padding: 10px;
}

button.swipe-widget__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(40px, calc(2.5rem + ((1vw - 4.8px) * 2.1212)), 54px);
  height: clamp(40px, calc(2.5rem + ((1vw - 4.8px) * 2.1212)), 54px);
  margin: 25px 13px 0;
  border: 0;
  border-radius: 100% !important;
  background: var(--e-global-color-00a898e);
  box-shadow: 0 3px 8px rgb(0 0 0 / 12%);
  padding: 0 !important;
}
button.swipe-widget__button:hover {
  background: var(--e-global-color-00a898e);
  filter: brightness(90%);
}

button.swipe-widget__button:focus,
button.swipe-widget__button:active {
  outline: none;
}

.swipe-widget__button-icon {
  display: block;
  flex-shrink: 0;
  width: auto;
  height: auto;
  max-width: 100%;
}

.swipe-widget__button-icon--reject {
  width: clamp(13px, calc(0.8125rem + ((1vw - 4.8px) * 0.9091)), 19px);
  height: auto;
  aspect-ratio: 1;
}

.swipe-widget__button-icon--like {
  width: clamp(15px, calc(0.9375rem + ((1vw - 4.8px) * 0.9091)), 22px);
  height: auto;
  aspect-ratio: 22 / 19;
}

.swipe-widget__data-item h6 {
  margin-bottom: 6px;
  color: var(--white);
  text-transform: uppercase;
  font-size:24px;
}

.swipe-widget__data-item p {
  margin-bottom: 24px;
  color: var(--whitemuted);
}

.swipe-widget__data-item.is-hidden {
  height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s all;
}

.swipe-widget__data-item.is-visible {
  height: auto;
  overflow: auto;
  opacity: 1;
  visibility: visible;
  transition: 0.3s all;
}

@media (max-width: 1024px) {
  .swipe-widget {
    display: flex;
    flex-flow: column;
    align-items: center;
  }

  .swipe-widget__button {
    margin: 18px 10px 0;
  }

  .swipe-widget__button-icon--like {
    width: 17px;
  }

  .swipe-widget__cards-column,
  .swipe-widget__data-column {
    width: 100%;
  }

  .swipe-widget__cards-column {
    max-width: 346px;
  }

  .swipe-widget__card-bottom {
    padding: 10px 12px;
  }
}