@import "../_variables.css";

.flip-card {
  perspective: 76.923rem;
  position: relative;
  width: 100%;
  min-height: 25.846rem;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 0.923rem;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.flip-card-back {
  padding: 24px;
}

.flip-card-back-content {
  flex: 1 1 auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.flip-card-back-title {
  font-weight: var(--font-weight-700);
  font-size: var(--font-size-20);
  line-height: var(--line-height-28);
  vertical-align: middle;
  color: rgba(255, 255, 255, 1);
  text-align: left;
}

.flip-card-back-position {
  margin-top: 4px;
  font-weight: var(--font-weight-400);
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
  vertical-align: middle;
  color: rgba(255, 255, 255, 1);
  text-align: left;
}

.flip-card-back-description {
  flex: 1;
  overflow-y: auto;
  margin-top: var(--mp26);
  font-weight: var(--font-weight-400);
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
  color: rgba(255, 255, 255, 1);
}

.flip-card-back-link {
  gap: 0.846rem;
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

.flip-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flip-card-overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) -5.9%, rgba(0, 0, 0, 0.6) 100%);
  text-align: center;
  visibility: visible;
}

.flip-card:hover .flip-card-overlay {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.flip-card-back {
  transform: rotateY(180deg);
}

.gradient-bg {
  background: linear-gradient(252.65deg, #E5052C 8.18%, #250E45 91.82%);
}